Image Optimization 101

Introduction to Image Optimization here >

  • Photographic images (pixel based): should ALWAYS be progressive, optimized JPGs. Note: if the pixel proportions of the image are very large (in excess of 500px), consider ways of cropping the image and fading it to a solid background color. ALWAYS select to save JPGs as progressive – it means they load incrementally, as opposed to in one full download.
  • Flat color graphics: should ALWAYS be SVGs (vector based) where possible, and where this is not the case (if we don’t have access to vector assets, or if alpha transparency is required), use optimized (pixel based) PNGs. NEVER create a PNG from a previously compressed JPG, as the JPG compression will have caused dithering that will cause increased file size with PNGs (LZW compression).
  • Single color elements or gradients: should NEVER be image assets but defined in CSS. May POSSIBLY be done as SVGs if necessary.
  • Transparent/masked images: use very SPARINGLY, especially if photographic, since these have to be saved as PNGs with an alpha channel, which adds to the file size. If the proportions are very large, consider fading the image to transparent, or to a solid background color.
  • Optimization:
    • ALWAYS crop the image to the smallest size possible. If you know that parts of the image are going to fall outside the browser, or be masked by the size constraints of a div, crop the image first. 
    • If using a JPG, ALWAYS make sure to compress the image as much as you can, without suffering noticeable compression artifacts. Be especially wary of JPG compression with red images. If parts of the image can be blurred somewhat, this will help bring the file size down, since the lossy compression will “take” better. IDEALLY, do not compress an already compressed JPG, as the quality will suffer.
    • If using a PNG, ALWAYS use an adaptive palette with reduced color depth – NEVER full 24- or 32-bit color, since the file size will be prohibitively large. Also, NEVER apply dithering unless absolutely necessary, or where it can be used to subtly rasterize a gradient with fewer colors.
    • ALWAYS run image assets through an optimizer, like Compressor.io, Guetzli.it or Tinypng.com for instance, just to make sure compression is as efficient as possible, and all metadata has been stripped out.
  • Scaling: NEVER scale images up, and consider not scaling down either, but optimizing the files to the true size on the page. EXCEPTIONS: if the image is vector based, or if the same image is being used in multiple places. Then use the highest common denominator, and scale down where applicable. Don’t use the same higher-res images for retina resolution screens and for regular screens, but replace dynamically with  assets specific to each resolution.
  • Image sources: NEVER upload assets directly to your CMS that have been procured by a third party. First of all, as designers, we have to ensure that we are free from liability in case a proper image license has not been provided, and second, we cannot assume that third party representatives know exactly how the image will be used, so they may not be able to determine which file format and size would be most appropriate, and they also may not be sufficiently diligent in optimizing assets. ALWAYS run image assets by your Creative Team before using them.
  • Invalid image types: EPS, TIFF, BMP, PCT, AI, PDF, INDD (GIF may be permissible).
  • Glossary: 
    • Load time: the time required for a web browser to load an asset, given the Internet connection speed, data transfer latency and processor power.
      • 1 Mb of data takes approximately a second to load on a typical 5 Mbps connection
      • The same amount of data would take roughly the same amount of time to load on an average 4G LTE wireless connection
      • File size is not the only thing that determines load times however: there is also the consideration of external server calls, such as tracking pixels for instance, that require time to resolve.
    • Resolution: The pixel density of bitmap images, commonly expressed as dots-per-inch, or DPI. Screen images should always be 72dpi. Pixel density affects file size (see below).
    • File size: The file size of an image file is proportionately related to the data required to describe the image:
      • its pixel proportions (the number of pixels required to render the image)
      • its color depth (the number of colors any pixel can take)
      • the vector points (the number of vector reference points required to draw the bézier curves that make up a vector image)
      • the compression format (either non-lossy LZW, or lossy JPG compression)
    • Optimal file size: As a rule of thumb, images should ideally not exceed 500 Kb in size. On mobile devices, that size should be even smaller.
    • Pixel: the smallest visual rendering component on a computer screen; a rectangular block of one solid color. Pixel based images appear jagged when scaled up, since the pixel ratio and proportions are locked into the image file based on how it was created. They may also appear jagged when scaled down, depending on how many colors are used to render the image, and whether anti-aliasing is applied or not.
    • Vector: An image encoding technique which defines images as a series of (bézier) vector outlines, with or without fills, lines and colors. Vector images can scale freely without quality loss or file size gain, since the vector shapes are rendered in the browser as pixels based on the final, displayed proportions, not the proportions in which the image was created.
    • Anti-aliasing: a smoothing technique to make pixel-based images appear less jagged, and to render vector or polygon images into a pixel-based grid.
    • JPG: Joint Photographer’s Expert Group – a pixel based photo image format with lossy compression (meaning: if a JPG image is being repeatedly compressed, image quality will continuously become worse).
    • PNG: Portable Network Graphics – an image format which allows for the addition of alpha channel transparency. Compression is non-lossy, but color depth can be (irreversably) reduced with the attachment of a color palette specific to the image (fixed, partially adaptive, or fully adaptive).
    • SVG: Scalable Vector Graphics – a web-friendly vector based image format. SVGs are ideal for simple, flat color or simple gradient shapes, such as logotypes or stylized graphics.
    • EPS: Encapsulated Post Script – typically a vector image format, but pixel based images CAN be saved as EPS files.
    • TIFF: Tagged Image File Format – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • BMP: Bitmap  – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • PCT: Picture – a Mac based pixel image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • AI: Adobe Illustrator – the file format native to the Adobe Illustrator app. AI files cannot be rendered as-is in a web browser, but they can be converted to SVGs, or rasterized and rendered as pixel-based images.
    • PDF: Portable Document Format – the document format native to Adobe Acrobat. PDF is not an image format per se, but images can be “printed” to a PDF document, and can be rendered in Photoshop.
    • INDD: InDesign Document – the document format native to Adobe Acrobat. INDD is not an image format and cannot be used in a web browser, and images included in INDD files are typically linked external assets.
    • GIF: Graphics Interchange Format – an older pixel based image format which is limited to 8 bit color rendering, but in return can be used to render simple animations in a web browser, the creation of which requires specific software. GIFs can be rendered with one color as transparent, which means transparent GIFs often look jagged (due to the lack of anti-aliasing).
    • 8-bit, 16-bit, 24-bit, 32-bit: this indicates the color depth of an image, meaning, how many colors are used to define the image. 8-bit means the image consists of 256 colors. 16-bit means the image consists of in excess of 16,000 colors, and 24- and 32-bit means an excess of 16M colors.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s