Images are web’s most precious resource. They simply dominate the internet in terms of info and aesthetics, and are simply invaluble to web based business, or any website on that matter. That’s why the deliverence of high performance images must be one of your top priorities when it comes to building your own site and website maintenance.
As of June 2015, images account for 63% of the average web page’s size. This directly means that your site is only as good as the images on it. By “as good” we’re not just talking about the aesthetics, we’re talking about image optimization and what you can do to make the images as light as possible, in order to keep your page load speed as fast as possible. Despite the importance of images, many websites tend to poorly optimize their images.
How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%
Image optimization is important for two key reasons:
- It reduces the size and complexity of a web page
- It can highly improve the way users experience a website. Better user experience always equals better conversion rates, which is basic Internet 101.
Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format.
There are several sections we need to explore, so lets get on it.
Image Formats
Image compression makes a huge difference when correctly applied to images, making your web page megabites lighter, which is a big deal. The compression process varies on the format you chose for your images. JPEG is by far the most popular image format, almost half of all photos on the web are JPEG, 45% to be exact. JPEG can deliver high quaility files that are small in size, which is ideal for web develpoment. It’s not the only format though, so let’s name a few.
- PNG – the most simple format available, best suited for not complex, transparent images, such as logos
- GIF – the format that’s best for animations, which are basically a number of low resolution images that are all “played” one after another, creating an animation perspective
- JPEG – as we’ve mentioned before, it’s the most commonly used format which is best for delivering complex images, like photos, etc.
Image loading
Images require memory and processing power; if the image is unoptimized, it could strain your users’ device. The browser is your next focus. Responsive web design means you that your images should be able to adapt to your users, their browsers ande devices. It’s a smart call to store copies of the image in different sizes, then deliver the most suitable copy based on the browser. You can also use the picture element to explicitly tell the browser when to use one image over another.
High-priority images should go in the area of the web page that your users see before scrolling, this is very important, as it leaves the rest of the images abelow the fold, or outside the visable area. This is where lazy loading steps in. It allows images to load when they’re needed, rather than all at once. There is a downside though, it can negatively impact your website’s ranking in search engines.
Deferred loading steps in as an alternative, which uses tags to load critical images and JavaScript to load non critical images. In other words, non-critical images load after the main page has already finished loading. Determine the size of imagery on your site and its effect on performance with a page load test. This will allow you to determine the load times of every element on a given page, including images.
Use an Image Proxy
An alternative to encoding images in advance is to use an image proxy. Image proxies provide real-time transcoding based on the user’s device, available bandwidth, and other parameters. You can either use hosted solutions (such as CloudFlare Mirage or Embedly Display) or self-hosted solutions (like OpenRoss or Photon for WordPress).
The tools
- jpegtran or MozJPEG – a great pick for JPEGs
- gifsicle – scales GIF images really well
- pngcrush or optipng or pngquant – one of the best tools available for PNGs
- ImageOptim – a really good overall tool that can be used for all image formats
Do not put the largest image on your landing page. You should also use thumbnails and image site maps, but not without being careful. Your thumbnail sizes should be as small as possible, and on image maps it is important that you add tags to specific images.
The checklist
After the process is done, you still need to run through the fundementals in case you’ve missed something.
Serve scaled images – resize images on the server and ensure that the “display” size is as close as possible to the “natural” size size of the image.
Remove unnecessary image metadata – mages contain unnecessary metadata about the asset: geo information, camera information, etc. Use tools to remove it and lighten the image
Prefer vector formats – vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
Pick best raster image format – determine your functional requirements and select the one that suits each particular asset.
Automate – invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.
