10th August, 2015 4 Min read
Book a Demo
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.
Image optimization is important for two key reasons:
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 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.
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.
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).
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.
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.
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.
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.
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.
Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.