Tag: image processing

FLIF – Free Lossless Image Format

TheSmithy

http://flif.info/

FLIF is a novel lossless image format which outperforms PNG, lossless WebP, lossless BPG and lossless JPEG2000 in terms of compression ratio.

According to the compression experiments we have performed, FLIF files are, on average:

  • 26% smaller than brute-force crushed PNG files,
  • 35% smaller than typical PNG files,
  • 37% smaller than lossless JPEG 2000 compression,
  • 15% smaller than lossless WebP,
  • 22% smaller than lossless BPG.

Retina Sprites

TheSmithy

Updated June 3 2015

1. Make sure you have all png images in both the normal and the retina version.

2. Make sure the retina versions are exactly 2x bigger than the normal versions

3. Create 2 zip files. 1 for the normal images and 1 for the retina versions

4. Got to http://spritegen.website-performance.org/

5. Upload the normal zip file. Choose offset of 25px. Copy the css and download the file
Update: because of some Safari bug it may be better to use 50px for the normal and 100px for the @2x sprite

Drag the images to the generator. Choose padding of 5px. Choose a vertical layout. Click downloads and save the sprite and the stylesheet.

6. Upload the retina zip file. Choose offset of 50px. Do the same for the retina images, but choose a padding of 10px. Copy the css and download the file

Note 1: Read More

Export a path from AI to png

TheSmithy

To export a path from AI (CS5)  do the following:

See also http://creativedroplets.com/transparent-png-with-illustrator/

  • Select the path(s) you want to export
  • Copy and paste it somewhere if necessary
  • Draw an artboard somewhere with the artboard tool
  • In the artboard presets select fit to selected art
  • Now export as png and check the box ‘use artboards’
  • Select your artboard
  • Select the correct resolution (if the resolution is different from the AI source, the png size will change accordingly)