Updated

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. A Folder Called Links
  2. Pixel Images
  3. Vector Images
  4. Embedded Images

Next Steps sections:

Leave a Reply

Your email address will not be published.