images
figures
Blog

Quick Tips for High Performance Images

Admin Globaldots
10.08.2015
image 4 Min read
Image Optimization

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.

the-science-website-performance

image source

Image optimization is important for two key reasons:

  1. It reduces the size and complexity of a web page
  2. 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.
page-load-times-diagram

image source

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.

Comments

0 comments

There’s more to see

slider item
Image Optimization

Why Image Optimization Matters – Infographic

Francesco Altomare 08.04.21

Learn the latest stats regarding web & mobile image performance, and the benefits of cloud-based image optimization to cater for the mobile surge challenges. Fill out the form to get your free infographic.

Read more
slider item
Image Optimization

8 Considerations for Cloud Image Management

Francesco Altomare

Learn how to choose a DAM / image optimization solution which meets users’ expectations for both superb quality and instant loading. Fill out the form to download this short, effective guide.

Read more
slider item
Image Optimization

Managing Image Content to Optimize User Experience

Admin Globaldots 21.11.19

Images, animations, and videos are an important part of the web experience. In this article we will discuss the importance of media content, and how you can manage and optimize your images to improve user experience.

Read more

Unlock Your Cloud Potential

Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.
Contact us
figure figure figure figure figure