How to format images for the web ( blog posts and galleries )
By Darren Carlin in Hints and Tips on September 4th, 2019
In this post we’ll be doing a deep dive into images on the web: where to find imagery online for your website or blog, how to best format your images for maximum speed and efficiency, how we at dazzle works handle images and the benefits of getting a custom content managed website with us when it comes to images. We’ll try not to get too technical.
Having “good” images on your website is a vital part of UX (User Experience) and design. “Good” in this case doesn’t just refer to images that are nice to look at, but also includes images that compliment your message and help your user digest content as a whole more easily. If you’re browsing a website that uses images, illustrations, and graphics effectively you’re more likely to spend longer on that website vs others.
Where to find FREE images online
Gone are the days where stock imagery was cringe-worthy and corporate (not to mention cost a small fortune). There are now a variety of online resources you can use to get FREE, beautiful, high-resolution stock images. We use some of the following websites below for our blog posts.
Remember, the best use case for these images is to compliment your content. You should refrain from using stock images as sources of truth for your business services.
Optimising your images
Take the featured image of a camera for this post for example. When we originally downloaded it from Unsplash, its dimensions and size were as follows:
Size: 1.9mb ( 1900kb )
It’s a pretty large image, too large for our use, so let’s see how we can fix that.
First, we can resize the image. Depending on your use case we can resize several different ways.
Images that you plan to display full screen (the entire width of the browser window) can be resized to 2560px on the longest side of the image. This size will handle up to 4k resolution displays nicely.
Inner Content Images
Images that you plan to display along with the inner content, including galleries, slideshows, or blog posts, can be resized to 960px on the longest side of the image. This size will cover all other use cases.
If you don’t have access to tools like photoshop, there are a plethora of online tools available which make the process pretty simple for you. Here is our favourite:
If using this tool, drag and drop the image and leave steps 1, 3, 4 as default. At step 2, set image size to custom and change either the width or height to 2560px depending on which is the longest size. Download the image. Here are the new dimensions and size.
Already a great saving, but we can still do a little better… Images come with a lot of metadata that we don’t need. We can compress the image to remove this data and save on file space.
Again, if you don’t have access to tools like photoshop, there are plenty of online tools you can use. Here is one of them:
Both of these websites do the same thing for both image types .jpg and .png.
If using tool, drag and drop the image and let the tool do all the work. Simply click download after the process has completed.
Here is the new size:
That’s a saving of 161% if you compare the original file to the resized and compressed file, with hardly any noticeable difference in image quality.
How much of a difference in a real-world web scenario does this make? Let's see...
All these tests are performed at a 2560 x 1440 resolution to mimic a full-screen image like the one for this post.
On a wifi connection, things aren’t so bad at all.
As you can see from the above chart, the full-size image takes 336ms ( 0.336 seconds ) vs 228ms ( 0.228s seconds ) to load. Even with a gallery with 10+ images its roughly 4 seconds vs almost 1 second, that’s not bad. However, on a 4G mobile connection, things get a little worse...
Now the full-size image takes a whopping 4.70s to load vs 1.36s for the optimised image. In a gallery situation with 10+ images, you’re for sure going to lose some potential customers due to unnecessarily long load times with images that aren’t optimised!
So you can see, resizing and optimising your images has some measurable benefits. If you had an e-commerce store with potentially hundreds of images, you could be losing a lot in potential sales and frustrated users.
How we handle things
At dazzle works, we do things differently. The way we handled the images in the above example was implemented in a more traditional way when it comes to web development.
If we switch over to the way we display images, we do a variety of different things.
First of all, we supply your images in .webp format with a graceful fall back to .png, meaning that depending on which browser you use, you’ll either get the best, most modern format or the second best. As of the date of this post, Safari is the only browser that, on both desktop and mobile, doesn’t support the .webp format.
Secondly, if you are using one of our content managed websites, we only supply images in a resolution to fit your current browser window size. So if you view on a mobile resolution, we supply the smallest possible resolution so the images still load quickly and efficiently. If you view on a 4k screen, we supply the largest possible resolution.
Thirdly, our websites are built using static site generators which are a modern web technology built for speed. This enables lots of extra benefits for our images, some of which include lazy loading and caching. We have built a custom “component” (you can think of this as a plugin or widget) that handles our images to get these benefits.
Let’s see how things have improved with our implementation.
First, on a WIFI connection:
Then, on a 4G mobile connection:
These are some great savings. This data is much easier broken down when you combine all the data. Wifi: Original vs Optimised Image
Mobile: Original vs Optimised Image
As you can see both the file size and speed have greatly improved and if you look below you can see there is very little difference in image quality.
If you run a website that uses a lot of imagery, you should run a self-audit and see how your performance looks. We wrote a detailed post over here about how you can check that in Google Chrome.
We can also perform a free audit for you and let you know if there's any room for improvement.