Images

Some Guidelines

File Types

  • JPG: Photos
  • PNG: High-quality illustrations
  • GIF: Low-quality illustrations
monarch.jpg
JPG
monarch.png
PNG
monarch.gif
GIF

Aspect Ratios

  • Camera's original aspect ratio is best
  • 4:3 is always a good default
  • 16:9 is the standard widescreen ratio
4:3 16:9

Dimensions

  • Ideal scenario: Get the largest images available, and use them to generate smaller versions
  • Typically up to 1024px wide
  • Zoomed/full screen images might go up to 1600px or 2400px

Resolutions

  • Ideal scenario: Get the highest quality images available, and use them to generate smaller versions
  • 144px/in (@2x): Recommended resolution (requires some developer help)
  • 72px/in (@1x): Minimum resolution
Retina logo Retina pixels

Compression

  • Ideal scenario: Get uncompressed images, and use them to generate compressed versions
  • Use Photoshop's Save for Web option
    • JPG: High preset
    • PNG: 24-bit for artwork with lots of color/detail
    • PNG: 8-bit for artwork with few colors/low detail
    • GIF: Selective mode

File Sizes

  • Depends on dimensions
  • Any image over 100KB when served should be double-checked
  • Photoshop and other tools can be used to further compress various file types

Vector Images

  • Used for resolution-independent illustrations
  • Can be scaled up/down without appearing blurry
  • Can include simple lines, shapes, colors, gradients, etc
  • SVG is the web-friendly format
  • Trickier to implement than raster PNG/GIF files

Questions?