All the images for the SVG files are stored in folders called Links in order to make the Illustrator documents portable.
Whenever Illustrator can’t find a linked image, it will look for missing images in a folder called Links.
This means that you can move your site around and send it to colleagues without worrying that your images will become unlinked.
Placed Vector Images
If you want to use a linked Illustrator file (a logo, for example):
- save it as a .ai file (if you want to be able to click on it to open it in Illustrator)
- keep it it the Links folder with placed images
- it will be directly integrated into the final SVG, not linked to
Note that when placing a .ai file, Illustrator uses the saved PDF information and not the Illustrator source. This means that it must be saved with “Create PDF Compatible File” checked.
All site images are saved at 90 quality in a folder called /_hq jpg so that we can experiment with different levels of quality for the images in /svg/Links.
The reason for this is that we can use Photoshop’s File › Scripts › Image Processor to automatically convert all the high quality images into smaller but useable images both for desktop and mobile versions.
It means that the mobile versions will look much better, being converted only once, and it also means that we can re-convert all the site images in one fell swoop.
[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.
Pages in this section:
- Placed Image Sizes
- Why save high-quality images at reduced resolution?
- Converting High Quality Images
- A Folder Called Links
- Pixel Images
- Add a New Image
- Vector Images
- Embedded Images
- Working With Images’
- Images
Sections: