Image Optimization Tutorial
Why we optimize images
You've probably clicked on the link for a website -- and then waited – and waited – and waited while the little spinning circle spun away in the middle of the screen.
The website probably has lots of beautiful images on it – but by the time you can actually see them, you're lucky if you have the patience to look.
We're going to talk about what image optimization is, why it is essential, what you need to consider before you optimize your images, and then I'll show you a couple of ways to optimize them.
The TL;DR:
Image file size affects page speed. Page speed affects SEO. Files can be optimized by reducing the dimensions or compressing the photo, which decreases the quality.
Images for websites need to balance good quality with small file size so they don't slow the website down too much.
I'll show you how I resize and compress the image in Affinity Photo - you can skip to that part here.
I'll show you how to optimize images using the ShortPixel website - you can skip it here.
Ok, back to the article.
What is image optimization?
Image optimization is one of the ways you can speed up your website. Page speed is important both for your website visitors and for your SEO.
Let's start with a question - what is image optimization?
Images have two ways that you can measure how large they are. Optimizing images means addressing both of these to make them the correct size for the website.
Image file size
First is the file size itself. Checking the file size will give you a number, like 2 MB or 140 KB - that's how much space the file uses. A megabyte, or MB, is 1000 times as big as a kilobyte, or KB. For posting general supporting graphics on your website, a file size under 500 KB, or 0.5 MB, is preferable, and smaller is better.
The larger the file, the more seconds tick by as it loads.
You can decrease your file size by compressing your image or decreasing the quality when you save it.
Image dimensions
Second is the dimension of the image. Images can be any size, but our cameras now usually take photos that are over 4000x3000 pixels.
There are many opinions about how large an image needs to be on the web, but for the most part, 2000 or 2500 pixels wide is plenty, even for large monitors.
Photos for sale don't follow these rules
If you are selling your images, focus on high-quality images instead of photo size rules. In that case, pixel-perfect images are better even if they are larger and require more time to load.
If you are selling your photos or have another reason to have large photos regardless of the cost to your site load time, this is not your tutorial!
Questions to consider
Before you begin optimizing your image, consider these three questions about the photo and your website.
- How will the photo be used?
- What size image fits in the design?
- What website or social media platform will your image be used on?
How will you use the photo on your site?
The first question to answer about your image is what role it will fill on your website.
If you plan to sell the photo, for example, then optimizing it is not as important as making sure your customers can see the image with perfect clarity and detail.
Images that should be optimized include:
- background images
- product images
- about page photos
- design images
- logo, if possible
What size image fits in the design?
The next question is - where will the photo be used on your website? If you don't know right away when you upload it, you can optimize it to a general standard.
However, maybe you know the photo needs to be square to fit on the page where it belongs. You can crop it to the shape you want as you optimize the image. If you know the image ratio, or even the exact dimensions of the spot where the photo belongs, you can optimize it by changing the shape and the size.
If your image is blurry, the usual reason is that the graphic doesn't quite fit the space.
You can use your web browser's developer's tools to inspect the place where the photo will go. Or you can crop it to a general shape – portrait, landscape, square, or widescreen.
What platform are you uploading the photo to?
The final question when it comes to image optimization is which platform your website is on.
Wix, for example, will optimize images automatically when users visit the website. However, they recommend images be in .jpg format rather than .png when possible because of the size difference. Note that Wix has a limited image editor as well.
WordPress has a range of tools available. There are automatic plugins available that handle compressing or even resizing your photos for you. Some plugins even resize images based on the user viewing the site without editing the image files on the website itself.
Squarespace has an image editor with basic functions.
The templates on some website platforms have recommended sizes for images. So do some social media platforms. It's worth checking to see what those sizes are to make sure your photo looks its best.
It might be worth checking your platform to see what tools are available to you, too, so that you know what you can do with the photo after it is uploaded.
How to resize an image
You can manually resize and compress images for any platform before uploading them to your site.
First, check the size and dimensions of your graphic. Then you'll know how much you need to resize or compress your image, or maybe both.
Here's an example of a very large photo.
Also, check the photo's dimensions to see if it needs to be resized.
This image I've selected is large enough to do both resizing and compression.
We're going to try ShortPixel compression first, though, just to see what happens.
Next, we'll go back and resize the original large photo in Affinity Photo.
We'll compress the resized image, saved at 85% quality, using ShortPixel.
And now you have a resized and compressed image to use for a website.
Plugin options for WordPress
WordPress users can upload photos before optimizing, then use a plugin to resize or compress images.
ShortPixel has two plugin options for WordPress websites.
First is the ShortPixel plugin that optimizes your images as you upload them. It can also batch process all the photos already on your site.
The second option is called the ShortPixel Adaptive Images Plugin. It does not resize or compress the images – it uses a Content Delivery Network to show your visitors images that are scaled to fit their screen. It seems like the best of all worlds, but this plugin can have compatibility issues that make it difficult to use. Check out ShortPixel's website for more information.
I hope this tutorial has helped you with image optimization! If you still have questions, please let me know!