22 Jul

Brian Gilbert

Two of the services Realityloop provide are Drupal Site Audits and Drupal Performance Audits. We almost always see that images used in a site haven’t been optimised, something I find surprising given images are often the weightiest parts of a webpage.

There are really 2 separate places where images can be optimised, in the theme, and in site content, I personally think that optimising theme images is a no brainer as you can usually just do it before the site goes live. Content images are something that aren’t something you can really expect your content creators to optimise, luckily we’ve implemented something to deal with that which I will outline in my next post.

Image Types

There are essentially 2 types of images. Raster images define the position of each of the pixels each a different colour arranged to display an image. Vector images are made of paths each mathematically defined that tell it’s shape and what colour it is bordered or filled with.

Raster images can display nuances in light and shading at their created resolution but cannot be made larger without sacrificing quality. Vector images are scalable, allowing the same images to be designed once and resized for any application.

Here are my key tips for optimising the graphics in your theme.

What filetype.. GIF, PNG, JPEG or SVG?

For raster images you’ll usually want to use either PNG or JPEG. SVG’s are your go to web friendly vector format.

Basically GIF’s are almost always larger than a well optimised PNG. JPEGs are usually better than PNG’s when there aren’t any sharp edges, text, or transparency.

If you’re not sure whether you should use a raster or vector file, follow this simple rule of thumb: If you’re drawing something from scratch with only a few colors, go with vector. If you’re editing a photo with multiple colors and gradients, go with raster.
 

Work with the grid (JPEG)

Nearly everyone has seen a heavily compressed jpeg image that show lots of artifacts,  this is because JPEG’s are made up of a series of 8x8 pixel blocks. We can use these blocks to our advantage in 2 key ways:

Align rectangular objects to this 8x8 grid:

The above image is not aligned to the 8 pixel grid it's file size is 2.53KB

The above image is aligned to the 8 pixel grid it's file size is only 1.84KB using the exact same save settings in Photoshop.

If jpeg images are allowed for upload I try to make the dimensions of any related image styles a multiple of 8 to work with the 8x8 compression system of jpeg.

Use Image Sprites in your theme

Image sprites allow you to reduce the http requests required to load your webpages, you create them by making a single image that contains all of the required images in a grid and then using CSS to manage the display of the correct part of the image.

The simplest way I’m aware of to create image sprites is to use compass sprites, this only works with PNG’s though.

I personally prefer to use SVG’s so that a single asset can be used for all breakpoints within the site, unfortunately the only way I know of to do this is manually create the sprite using an SVG editor (Inkscape or Illustrator for example).

Compress your images

Photoshop has “Save for web” but you can get much better compression using other applications.  If you do use a lossy compression I also recommend using a lossless optimiser straight afterwards to get further filesize savings if it is possible for the filetype you are compressing.

Lossy Compressors

• ImageAlpha  (PNG & OSX only)
• pngquant
• TinyPNG
• JPEGMini

Lossless Compressors

• ImageOptim (OSX only)
  • Integrates the following tools
  • PNGOUT​
  • Zopfli​
  • Pngcrush​
  • AdvPNG​
  • OptiPNG​
  • MozJPEG
  • jpegrescan
  • jpegtran
  • Gifsicle
• SVG Editor

Learn to use Pixel Fitting when shrinking images with hard lines

For a vector graphic to be displayed, the computer has to perform a translation from the mathematical vectors into something that can be displayed with pixels.

This translation process is relatively simple: the computer takes vector lines, lays them on top of a pixel canvas, and then fills in each pixel that the lines enclose. So, for important icons and logos– really, for all rasterised vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.

An excellent description of this can be found at http://dcurt.is/pixel-fitting

For the greatest reduction in filesize optimise files manually

To gain the greatest saving in file size you will need to choose a lossy compression method, for this reason you will pretty much need to play with settings to adjust the image quality versus file size tradeoff.

Stay tuned for my upcoming post about how to implement on-the-fly lossless compression to image uploads on all image fields in your Drupal site

drupal planet