Optimizing your images: Make your website load faster

Matt Shull | Frontend and AngularJS Thinkful Mentor

It’s said that a picture is worth a thousand words but in web development a picture can be worth a thousand kilobytes or more, which can drastically affect page load speeds.  As studies have shown if a page hasn’t loaded within 3 seconds, up to 40% of the users will abandon the site.  That traffic is detrimental to online businesses and as responsible web developers it’s our job to make sure that a website isn’t just loading but adding speed as a feature to the website.

If you do an analysis of any website on webpagetest.org you will quickly notice that most HTTP requests are for images and are the heaviest assets downloaded.

If a developer isn’t careful about optimizing images correctly then they could easily add megabytes of data to their webpage.  There are many things developers can do on the front end of designing and exporting images to optimize the size and load time.  Next we’ll explore the different image file types developers can use in their projects.

Choosing the Right Image Format

Choosing the right image format plays a huge role in image optimization.  There are 3 common formats that are supported across the web: PNG, GIF, and JPEG.  Here are some quick facts on how and when to export images as each format.

PNG

image

GIF

image

JPEG

SVG


See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.

Using Sprites

If you have icons or images that are made multiple times in your website then you might consider grouping those images into one image, or a sprite.  By putting multiple reusable images into one image you may notice that the page weight may increase slightly but that load time decreases.  This happens because we aren’t making several requests for the images but rather one request for the sprite.  Using CSS we can move around the image and only show the part of the sprite we want to display in a particular element.  You can read more about sprites in an article written by Chris Coyier titled CSS Sprites.

 

CSS Alternatives for Animations

Since CSS has matured over the years designers and developers can use it to create gradients, animations, and even 3D objects.  While this may beef up our CSS files a bit this technique will usually cut down on overall load time because there are fewer image requests being made.  Using CSS animations would be a great alternative to using a gif because you have more control of animations created in CSS.  Takes a look at this CSS animation vs a gif version.  Instead of using the following gif we could use the CSS example below:

image

See the Pen CSS Animation Example by Matt Shull (@derekshull) on CodePen.

Optimizing Existing Images

If you aren’t able to export optimized images because they’re existing images and you don’t have the original design files, don’t fret.  There are plenty of services you can use to optimize existing images.  Here are a few of my favorite ones.

Kraken.io

Kraken.io is a personal favorite of mine.  It’s free to use but has a paid service with better options.  The free version will allow you to upload 1MB images and will compress them as lossless or lossy.  For $5/month you can upload 16MB images, compress images through uploading them, pasting a URL, or pasting a page URL and letting it crunch all the images on the page.  The paid service also allows you to resize the image.

Smushit.com

Smush It is a service provided by Yahoo.  It allows you to upload images or pull the images from a URL to optimize them.  It will compress your images and allow you to download them in a zip file.  They convert your JPEG images into progressive JPEGs once optimized.  Only 1MB file sizes are allowed per image.

Compressnow.com

Compress Now allows you to upload 3MB images to their website.  They support JPEG, PNG, and GIF files.  It’s free to use and you can also drag and drop multiple files into the website to optimize.

Moving Forward

In the years to come there will be many breakthroughs in optimization such as HTTP/2, new extensions like webp, etc.  There are even javascript tools, such as lazy loading, that will only allow the images above the fold to be loaded first and loading below the fold images as the user scrolls.  Lazy loading helps you drop page load time significantly for pages containing many images.  The picture element is also a game changer for developers.  Instead of serving one size for every device we can serve smaller sized images for smaller devices and larger images for larger devices.  Image optimization is just the tip of the iceberg when it comes to web performance, but it’s a significant place to start.

Written by Matt Shull. You can follow him on Twitter here.