Illustration Extraction and Compression Procedure

illustration-compression.md

1. Create a new file (RGB, 72dpi) at the desired size for the illustration
2. Copy illustration from design comp
3. Paste into the new file
4. Ensure the illustration's center point is exactly centered on artboard
5. If this is a circular image or has curving shapes right at the edge:
   1. Relative to center point, scale down the whole image by 1 pixel
   2. Turn on Pixel Preview, ensure that no pixels are bleeding off the artboard
   3. Turn off Pixel Preview
6. File > Save for Web
   1. Choose the PNG-24 format
   2. Use Transparency if needed
   3. Save in the format <name>_<size>_ai24bit.png, e.g., mortgages_170_ai24bit.png
7. Duplicate the artboard so we can create a 2x version for retina displays
   • Do not attempt to export a different size by adjusting the dimensions in Illustrator's Save for Web dialog. It won't work.
8. Increase the artboard size by a factor of 2, relative to the top left corner
9. Move the illustration's center point to the center of the artboard
10. Increase the size of the illustration to the size of the artboard
11. If this is a circular image or has curving shapes right at the edge:
    1. Relative to center point, scale down the whole image by 1 pixel
    2. Turn on Pixel Preview, ensure that no pixels are bleeding off the artboard
    3. Turn off Pixel Preview
12. Save for Web with the larger artboard
13. Open each file in Fireworks (find in Self Service or contact Steve Shane)
14. File > Image Preview
    1. Set Format to PNG 8
    2. If this image has transparency, select Alpha Transparency.
    3. Ensure Palette is Adaptive and that the maximum number of colors is set to 256.
    4. Save in the format <name>_<size>_fw8bit.png, e.g., mortgages_340_fw8bit.png
15. Copy the two new files to their final location in your project repository
16. Rename them to the desired final filenames
17. If the images use transparency, run them through ImageAlpha (find in Self Service or contact Steve Shane)
    • Use the option to automatically send through ImageOptim when completed
18. If the images don't use transparency, run them through ImageOptim (find in Self Service or contact Steve Shane)

All done! Now all that you have to figure out is how you want to call them in your front-end code. If the images are purely decorative, endeavor to use them as CSS background images. If the images are key to the content, include them with the HTML img element.

N.B.: For img usage to be retina-ready, you'll have to use the larger image and scale it down by half, until we develop a more sophisticated responsive image solution.

Pro Tip for automating Steps 13–16 for every file exported from AI:

1. Open Fireworks, but do not open any files
2. File > Batch Process
3. Select all the 24bit files exported from AI
4. In Batch Options:
   1. Select Export and add it to the list on the right. Change the export settings to Custom and select the settings as described above (PNG 8, Adaptive, transparency if required))
   2. Select Rename and choose to Replace _ai24bit with an empty string (this should give you the desired final filename)
   3. Click Next
5. In Saving Files:
   1. Select Custom Location and choose the final destination in the project repo for the files.

Boom! Now just run the whole lot through ImageAlpha/ImageOptim and you're good to go!