Image Optimisation

View loading time for images

The developer console shows a timeline
of how long your images take to load.

Try throttling to 3G to see the result for mobile.

Gotta keep ‘em small

• Small images load faster
• Data costs real money
• Users give up on slow sites

Always keep your originals

Create a new folder called “originals”
and copy in all your images.

You should now have two copies of every image.

Downsizing image dimensions

Using Photoshop or Pixlr, scale your background image
down to 1280 pixels wide and 1024 pixels high.

Your header image should now be 1280 x 1024 pixels.

Downsizing image quality

Using Photoshop or Pixlr, save your
image as a JPG at 60% quality.

Your header image should now be lower quality.

Only load what you need

.header {
  background: url(images/background-small.jpg);
}

@media (min-width: 800px) {
  .header {
    background: url(images/background-large.jpg);
  }
}

Use media queries to only load big images when needed.

Your mobile site should be smaller than on desktop.

Cropping images to size

Using Photoshop or Pixlr, crop the three panel
images into square shapes of 400 x 400 pixels.

Your panel images should now be square.

What we learned

• Looking at file sizes and loading times
• Downscaling image dimensions
• Downscaling image quality
• Cropping images to the correct shape