Placed Image Sizes
[for information about batch-converting images see this page]
TLDR :
- full width images are 4000px wide.
- other desktop images are Illustrator width x 2.4
- other mobile images are Illustrator width x 16 (if illustrator width is 420)
Desktop and mobile pages are initially constructed using the same size images.
A full-width image for desktop should have the same pixel width as a full-width image for mobile, even though the Illustrator page is 1680px wide for desktop and 240px wide for mobile.
The last stage of the process described below automatically reduces the mobile image sizes to 35% of their initial width.
This means that throughout the creation of desktop and mobile versions of the site it is not necessary to have separate image sizes for the two versions.
Desktop version: a full-width image (screen+40%) should be 4000px wide.
Other images should be the Illustrator pixel width multiplied by 2.4.
Example: an image that is 300px wide in Illustrator should be saved from Photoshop at 300 x 2.4 = 720 pixels wide.
Note: mobile images will automatically be reduced by 35% when they are optimized, at the end of the process. The sizes listed here are pre-reduction sizes.
Mobile version: a full-width image (screen+40%) should be 4000px wide.
Other images should be the Illustrator pixel width multiplied by 16.
Example: an image that is 70px wide in Illustrator should be saved from Photoshop at 70 x 16 = 1120 pixels wide.
This presumes that the mobile images will be batch reduced to 1/3 of their size with all the other images.
Mobile images that will not be batch resized should be saved at 5x their pixel width.
It is useful to save PSD files for each site image with an empty layer specifying the final width (eg 1200px).
If you’re replacing a single image at a time
Save a high-quality, full-resolution version using “save a copy” (cmd-alt-S) in _hq jpg
Use save for web (cmd-alt-shift-S) to save a zero quality version in the Links folder.
Use large images with very low quality
Through much experimentation we have found that we can get much better images by using very high-resolution (300 dpi instead of 72dpi) but very low quality (JPEG quality 0 or 10) images.
You can quickly convert all your images from high to low quality using Photoshop’s Scripts.
If you are manually sizing images for mobile, and not using Photoshop’s Image Processor:
A full-width mobile image (screen+40%) should be 1500px wide.
Other images should be the Illustrator pixel width multiplied by 3.5.
Example: an image that is 70px wide in Illustrator should be saved from Photoshop at 70 x 3.5 = 245 pixels wide.