Web Development : Image Formats & Optimization - Part 4

Go back Web Development : Image Formats & Optimization - Part 3

Exporting web-ready files

Regardless of which type of design file created a simple mood board, a style tile, or a complete mockup and whether we ultimately save the images individually or in groups, the image(s) need to be exported when we’re ready to start building the page functionality.

Photoshop’s Save for Web feature makes this a breeze. When you’re ready to export web images from Photoshop, choose File > Save for Web & Devices. This opens a window similar to the one shown in below.

 
In this instance, we’ve selected the first slice below the logo (outlined in yellow in the screen capture). Next, we select the JPEG High option from the Preset menu in the upper right corner, to see what the results look like. Using this preset, the final image size will be just over 10k (as shown in the lower left corner of the window). Using PNG, the file size jumps to over 38k! Because the goal is to get the best looking image for the least amount of file size, we stick with the JPEG version of this image.

When exporting multiple slices, we simply select each slice in the Save for Web & Devices window, customizing the options using the menus to the right. When we have finished optimizing all the slices, choose the Save button at the bottom. (Note: if you choose to export all the slices in the image, there’d be no need to select any of them prior to clicking the save button. But if you only want to export a few of the slices, make sure to Shift-Select those slices before clicking Save. Then choose ‘Selected Slices’ from the Slices menu on the Save window.)

You can also take advantage of the 2-Up or 4-Up options to get a side-by-side comparison of how different optimization settings affect an image.

Above shows the 4-Up view of portions of three slices of a mockup. Here, we Shift-Selected three slices, then selected different presets from the menus on the right.

The upper-left section shows the results of using the PNG-24 setting, while the lower left uses PNG-8. The lower right shows a low-quality JPEG, and the upper-right displays the option we selected – the 60% quality JPEG. This option is the optimum for these images because it gives us the lowest file size with the best quality.

Go back to Web Development : Image Formats & Optimization - Part 1