TLDR; use JPG images when possible, not PNG or GIF, and make them 2-3 times bigger than the pixel size in Illustrator.
Most often, the images you use in your pages will be pixel images (also called bitmapped images):
- JPG or JPEG images ending in .jpg
- PNG images ending in .png (pronounced ping)
- GIF images, ending in .gif
A pixel image is composed of individual pixels — it’s obvious when zoomed in:
For this reason, pixel images have an optimal size:
- too small: the pixels become obvious
- too large: the file is larger than necessary
2.4x for Computer Screen · 3.5x for Mobile
To make your images look good without being inefficient, use the following equation when possible:
computer screen: image = Adobe Illustrator x 2.4
mobile screen: image = Adobe Illustrator x 3.5
For example:
- an image in your Illustrator file is 400px wide
- you’re working on a page for a computer screen
- the best size for the image is 400 x 2.4 = 960px wide
JPG quality: it is better to use a large image created at low quality then a small image created at high quality.
Other Formats
There are several other common pixel image formats:
- BMP · Windows bitmap image
- PDF · Portable Document File
- EPS · Encapsulated PostScript, similar to a PDF
- TIF or TIFF · Tag Image File Format, intended for scanning images
- HEIC · iPhone photos
- PSD or PSB · Photoshop files
These image formats are not suitable for use in a web page; they are either not well supported or result in large file sizes.
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
Next Steps sections: