Table of Contents
Images make your content come to life. They say a picture is worth a 1,000 words, and this absolutely applies to your blog and other digital content. But, if you don’t know how to optimize images for the web, they may be working against you.
In this post, we are going to look at how to best optimize images for your website. We’ll take a look at why we need to optimize, the benefits it will provide, and the tools to get it done. Let’s go!
Optimizing Images For the Web
Speed. The Internet is a very large place and its users are impatient. The biggest downside to unoptimized images on your website is speed and performance, and in this department, every millisecond counts. You want your users to have a good experience when they visit your website or blog. Quickly delivering them the content is a big part of that. If your website takes over three seconds to load, it’s likely that you’ll lose upwards of 53% of your mobile users.
Just like you wouldn’t publish a first draft of a blog post or upload a video without editing it, including just any image to your website is a recipe for trouble. A typical high-quality picture from a DSLR, for example, will be in the range of 12 to 15 Megabytes (MBs). If you were to upload even a couple of these high quality images without any sort of compression to a webpage, your users, the browser, and even your server would hate you. Let’s avoid that.
A web page is made up of HTML, CSS, JS, images, videos, fonts, and potentially other files and plug-ins. You should try to make your webpages as small as possible, but as a general rule of thumb, keeping a page between 700kb to 1mb should be okay. Let’s assume all other components of our hypothetical web page make up 35% or 350KB. That’s a fairly reasonable estimate. We now have a budget of 650kb for images per page. Before we get into how to optimize images images, let’s learn a bit more about the types of images you’ll typically see on the web.
Format, Compression, and Optimization
The modern browser supports various types of images. We’ll focus on three types of images that you’re likely to come across: JPEGs, PNGs, and SVGs. There are other types such as GIFs and WebP, but for brevity, we won’t go too much into their details in this post.
Rather than give you an in-depth history of these file formats, because you can find much better sources elsewhere, I’ll just share advice on what format you should generally use and when.
- Use JPEGs (or JPGs) when you are sharing photographs and images with lots of details.
- Use PNGs when you’re sharing digitally created assets.
- Use SVGs when you want to be able to control the size of the image. (Tip: You’ll seldom use SVGs in blog posts.)
That’s really all you need to know about the basics of what type of format to use for best results. The next section we’ll touch on is compression and optimization. Compression essentially takes something and makes it smaller. In the case of images, we might start with a 2000x2000 pixel image and compress it down to a 500x500 pixel image, making the image and file size by association much smaller.
The type of optimization that occurs will depend on the file format and will have a direct impact on the quality of the final image. Again, simplifying it to the max, we have lossy and lossless compression. With lossy compression, such as when dealing with JPG images, we get the smallest file size, but the lowest quality image. With lossless compression, PNGs for example, our image quality is maintained, but file size may not be reduced to where we need it to be.
Optimization in Action
Enough talk. Let’s see some examples. Below is a picture of my dog, Klaus, taken on a DSLR and exported as a JPG at max quality. It’s an astounding 16.8MB and 6000x4000 pixels in size. I won’t load the raw image because quite frankly it’s too big, but if you’d like to see it for reference, you can find it here. But let’s take a look at the compressed version.
The compressed version of our image is still a JPG, but the dimensions have been reduced from 6000x4000 pixels to 1200x800 pixels. Additionally, the above image has been rendered at 50% of the original quality. This is where that lossy compression will reduce the quality of the image but greatly reduce the file size. The total file size for this image: 94.9kb.
If we go by our guidelines above of having a 650kb budget for images per page, this means that we can have around six images of this quality on the page. We’ve gone from a 16.8mb (16,800kb) file to a 94.9kb file, a file size reduction of almost 99%. And if we look at the two images side by size, the quality, especially when viewed on a computer monitor, is not bad at all, but the bandwidth and file size savings are tremendous.
As I mentioned above, when dealing with photographs, such as the one above, it’s preferable to use the JPG file format as it’ll allow us to have the smallest file size while retaining pretty good image quality. If we export the original 16.8mb file as a PNG — and remember, since PNG is lossless, we can’t adjust the quality — we’ll get a file size of around 543kb. This is 5x as large as our JPG, and as you can see in the image below, the quality is not drastic enough to justify the change.
Optimizing Images With Photoshop
The images above were both optimized using Photoshop. This is my preferred way of editing and optimizing images for the web, but it does require some technical know-how. The Export As functionality in Photoshop will give you plenty of options to play with, and this article could go on for days discussing what each and every knob and dropdown menu will do, so we’ll avoid that.
Instead of focusing on the in-depth discussion and ramifications of each setting, I’ll share my general workflow. When exporting JPGs, the first thing I will adjust is the scale. For most images on the web, I find that a width of around 1200-1500 pixels is ideal. After that, I will adjust the quality slider. Typically, I’ll drop it to around 20%, and then slowly increase it in increments of five, until I hit the desired quality versus file size ratio. I aim for JPGs to be rendered out at a final size of 80kb to 150kb.
When it comes to dealing with PNGs, you have even fewer options to deal with. With PNGs, I will typically go for the size first as well, but the interesting thing about PNGs is that if an image is suitable for a PNG, having it rendered at a higher resolution will not necessarily increase file size too much. The more layers, colors, and complexity in a PNG, the bigger the file will be, so if you have a fairly simple digital creation, it’s likely that you can render it in very high resolution while keeping the file size down.
The one setting that I do always check is the Smaller File (8-bit). This uses a different compression algorithm that will make your PNG between 10% to 70% smaller, with almost no impact to the quality of your image. I would still look at the image before exporting to ensure that no negative side effects were introduced though.
Tools for Optimizing Images
We’ve talked about why and showed real world benefits of optimizing images. Next, I’d like to introduce you to some tools that can help optimize images for your website.
In the example above, I used Photshop and showed some of the settings available to you with it. Photoshop is a very advanced and somewhat expensive tool though. If you see yourself working with images often, editing them, and need the advanced features, this is a great option, but if you’re just trying to optimize a few images here and there, it’s probably overkill.
If you are working with mainly PNGs, TinyPNG.com is an invaluable resource that will compress your PNG images to 8-bit format for free. It can also compress JPG images and optimize them a little bit, but you as the end user have no control over the quality. From my experience, the results aren’t always worth it. I’d mainly recommend this resource for making PNGs smaller.
If you just want a simple tool to make your JPEG images smaller, CompressJPEG is a good option. It allows you to manage the quality of the compression and does a pretty good job. I wish it also had the ability to scale image sizes like in Photoshop, but being able to preview the quality is a nice bonus feature.
Go Even Further By Lazy Loading Images
Before I close out this article, I want to share a technical tip that can help optimize your web page loading time. As we discussed throughout this article, images are some of the heaviest things that your web page will load. What if we didn’t have to load them until the user needed them?
If you inspect the Code and Content blog, you’ll see all of our images, as well as the images within this blog post, all have a loading=”lazy” attribute attached to them. This is a Chrome, and hopefully other browsers soon, feature that ensures that by default, when a user lands on a page, we only load the images that are within their viewport or close to it. As the user scrolls down the page and begins reading the article, subsequent images will load.
When the user first lands on the page, only the first three cats are loaded. Then, as the user starts scrolling, subsequent cats get pulled from the server. If the user never gets to the bottom of the page, then we don’t load all the images.
This has two benefits. One, it gives your user a good experience by quickly loading what they can see and allowing them to dig into your content. Two, it saves your server bandwidth and resources from needlessly loading images that won’t even be seen. Win-win!
Putting it All Together
Images can greatly enhance your content and presentation. You need them, but you also need to know how to optimize images for your website. Uploading images without editing them or compressing them is a recipe for slow loading pages, and that means fewer users, fewer eyeballs, fewer conversions, email sign-ups, and sales. Don’t let unoptimized images hurt your bottom line when the issue can easily be addressed with just a little extra effort.