Pixel Images

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:

  1. Placed Image Sizes
  2. Why save high-quality images at reduced resolution?
  3. Converting High Quality Images
  4. A Folder Called Links
  5. Pixel Images
  6. Add a New Image
  7. Vector Images
  8. Embedded Images
  9. Working With Images’
  10. Images

Next Steps sections:

Ask a Question...

Your email address will not be published. Required fields are marked *