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 »

Be the first to write a comment.

Feedback


Share this page in:

twitter sharefacebook sharelinkedin sharegoogle plus shareemail sharepinterest sharewhatsapp share