This note contains apps, web tools and extensions that I use in everyday image editing.

General:

• ImageOptim: Lossless compression for JPG and PNG images in-place by drag-and-drop.

  Tested it with some random images:
  Orig:     IO:      Photoshop:
  8   KB -> 3  KB <> 4   KB
  18  KB -> 4  KB <> 6   KB
  88  KB -> 44 KB <> 60  KB
  151 KB -> 70 KB <> 103 KB (transparent PNG)
  

• ImageAlpha: Extra lossy optimization for transparent PNG images.

  Orig:     IA+IO:   Photoshop:
  151 KB -> 45 KB <> 103 KB (transparent PNG)
  

• SVGO: SVGO is a Nodejs-based tool for optimizing SVG vector graphics files.

• Data URL Maker: Convert image to data URL string, shows original and result size.

Photoshop:

• GuideGuide: Generates grids with Photoshop guides using grid notation.

# Create 20px baseline grid starting from 100px.
$h = | 20px |
100px | $h* | ( hlp )

# Create 3 columns with 10px gutter.
$v = | ~ | 10px |
| $v*2 | ~ | ( vl )

# Same, but start from 50px to the left, grid width 200px
$v = | ~ | 10px |
| $v*2 | ~ | ( vl, 50px | 200px | 50px )

# Create 6 columns, page has 20px margin left and right
$v = | ~ |
| 20px | $v*6 | 20px | ( vlp )

# Create 6 columns with 10px gutter, page has 20px margin left and right
$v = | ~ | 10px |
| 20px | $v*5 | ~ | 20px | ( vlp )

• Slicy: Extract PNG images from named PSD groups e.g. header.png or button1.png

Sketch:

• Runner: Run menu commands and add symbols by name using a popup window.

• Arrange Artboard: Arranges arboards into rows.