Images for Web

Formats

• JPG: For photos with millions of colours (never use PNG for photos)
• PNG-24: For images with transparencies or graphics/logos with many colours
• PNG-8: For graphics/logos with few colours
• GIF: Same as PNG-8

JPG Photos

• JPG Compression: Use around 40% or 50%
• JPG Progressive: Save JPG in progressive mode
• JPG Degradation: Avoid JPG degradation by open/save same JPG as you loose quality, instead use a master in lossless format (PSD or PNG-24)

Colour

• Colour System: Use always RGB, Grey Scale or Indexed colour, never CMYK (this is for printing)
• Colour Profile: Use always sRGB and do not embed in image when saving

Dimension

• Image Resolution: This is not relevant for web images (this is for printing)
• Image Dimension: Resize the image at the maximum dimension that is going to be presented in the biggest responsive scenario, never bigger
• Resampling pixel dimensions: You can Downsample (reduce pixels) but you cannot Upsampe (increase pixels) as you get a blur image

SEO (Search Engine Optimisation)

• Image File name: Use correct human readable text for your image file names. Do not use special characters and use hyphens instead of spaces. ie: glass-of-water.jpg
• Image Alt tag: Use correct human readable text for your image alt tags. ie: alt=”glass of water”

Digital Images »