Optimizing images for speed and SEO is a great place to start if you’re looking to improve the speed and visibility of your website. Images are an essential part of any website but can also be a major source of slow load times. In this post, I’ll show you a few ways you can optimize your images so not only will your website load faster, but it will be easier to find.
Importance of Image Optimization
Over the years, I have audited many websites. When it comes to images on those websites, I often find that many are massive in terms of dimensions and file size. Massive images lead to slow download times, which can lead to a bad user experience. Who wants to spend a couple of minutes waiting for a website to load? Nobody I know! In fact, many users will only spend a few seconds waiting for your website to load before they hit the back button. That’s why you need to optimize those images before you add them to your website.
Image optimization is also important for SEO ranking factors. You need to make your website as easy as possible for search engines to index, and you can add things like alternative (alt) text to images to do just that. And since you’re going to optimize your images after you read this post (right?!?!) you might as well do some SEO while you’re at it.
Choosing the Right Image Format
When it comes to optimizing images for both speed and SEO, choosing the right image format is crucial. Here are some of the most common image formats to consider:
- JPEG, or JPG, is the most popular image format, and it is best used for photos or images with a lot of color variations or gradients. JPEG files are compressed, which means they can be smaller in size, but this can also result in a loss of quality.
- PNG is another popular image format, and it is best used for images with transparency or simple graphics. PNG files are not compressed, which means they can be larger, but they do not lose quality. PNG files are also great for logos and icons.
- GIF is a popular image format for animations and simple graphics. GIF files are limited in color and can be small in size, but they can also be larger if the animation is too long.
- WebP is a newer image format that was developed by Google. It is a compressed image format that is smaller in size than JPEG and PNG files, but it still maintains high quality. WebP files are not yet supported by all browsers, so it’s important to check browser compatibility before using this format.
The image below illustrates how different formats will give you different file sizes. The image on the left is the original, and it’s a 3.27 MB PNG file. The version of the image on the right is optimized as a JPG with medium quality (30%). Using that optimization, the file size would only be 54.73 KB. That’s a huge saving in file size, and while it might be hard to tell in the image below, the image still looks pretty close to the original. When I changed the quality to 60%, it looked even closer to the original, and the file size was still only 149.8 KB.
Image Compression Types
When it comes to optimizing images for speed and SEO, you need to choose the right compression type. There are two main types of compression techniques: lossless and lossy.
Lossless compression reduces the file size of an image without losing any of its quality. This is achieved by removing unnecessary data from the image file. Lossless compression is ideal for images that contain text, graphics, or other elements that require high-quality images. Both PNG and GIF use lossless compression.
Lossy compression reduces the file size of an image by removing some of its data, resulting in a slight loss of quality. This technique is ideal for images that don’t require high levels of detail or clarity. JPEG uses lossy compression. Many image editing tools will allow you to adjust the quality of a JPG to lose more or less data during compression. With a lower quality, you’ll lose more data, but you’ll get a much smaller file.
When deciding which compression technique to use, it’s important to consider the purpose of the image and the level of quality required. Lossless compression is the best option for images requiring high levels of detail and clarity. For images that don’t require high levels of detail, lossy compression can be used to significantly reduce the file size while maintaining a good level of quality.
Image Resizing and Cropping
When it comes to optimizing an image, you should start with resizing and cropping the original image. If your website needs an 800×400 image that includes only part of the original image, there’s usually no reason to upload the entire image at 8000×4000. While some website builders allow you to resize and crop images in them, that is often done by simply changing the width and height settings of the image or masking to show only part of it, neither of which changes the image’s file size. So make sure you use a tool like Adobe Photoshop or GIMP to crop and resize an image before you upload it.
The aspect ratio is one thing to remember when resizing an image. Aspect ratio refers to the relationship between the width and height of an image. If you want to maintain the aspect ratio of your images when resizing them, you’ll need to make sure that you’re resizing them proportionally. Otherwise, you’ll end up with an image that looks squished or stretched.
Using Image Attributes
When it comes to optimizing images for SEO, there are two important things that you should consider: the alternative (alt) text and the image’s filename. You might have heard the alt text referred to as the “alt tag,” but it’s actually an attribute of the image (img) HTML tag, as you can see in the code below.
<img src="child-beach.png" alt="Three-year old child standing at the edge of the water at the beach. The child is wearing a red bathing suit and holding a yellow plastic shovel." />The alt text is a short description of the image that appears when the image cannot be displayed. This text is important for accessibility, as it allows visually impaired users to understand what the image is about. But it’s also important for SEO, as search engines use the alt text to understand what the image is about and how it relates to the content on the page. When writing alt text, be sure to keep it short and descriptive. Use relevant keywords if possible, but don’t stuff the text with too many keywords.
As for the file name, try to make it descriptive and relevant. Instead of “IMG001.JPG,” use a filename like “child-beach.jpg.” The file name should also be descriptive and relevant but kept short and free of special characters or spaces. Use hyphens to separate words instead.
Using Optimization Tools
Even after you use the right file format, compression, and file size for an image, you might be able to optimize it further using an image optimization tool. I’ve been using TinyPNG to do this for years. You can upload up to 20 JPG, PNG, and/or WebP files that are up to 5 MB each, and it will try to optimize them. Sometimes, there’s not much the tool can do, but it’s worth trying to see if you can reduce the file size for your image.
If you’re using WordPress for your website, several plugins can optimize your images as you upload them. In fact, TinyPNG has a plugin that does that. I use Imagify for my websites.
Leveraging Browser Caching for Images
One effective technique for optimizing images for speed is leveraging browser caching. This technique involves instructing the user’s browser to store a version of your site’s images in their cache so they don’t have to be downloaded every time the user visits your site. This can significantly reduce page load times, especially for repeat visitors.
To leverage browser caching for images, you need to add some code to your site’s .htaccess file. Here’s an example of what that code might look like:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
This code tells the user’s browser to cache certain types of files (images, CSS, HTML, JavaScript, etc.) for a specific period of time (one year for images and one month for other file types). This means that the browser will only need to download these files once, and then it can load them from the cache on subsequent visits.
It’s important to note that leveraging browser caching is not a silver bullet for improving page load times. It only works for repeat visitors, and it won’t help if the user’s cache is cleared or if they’re visiting your site for the first time. However, it’s still a valuable technique to use in combination with other optimization strategies, like optimizing image file sizes and using lazy loading.
Implementing Lazy Loading
Lazy loading is another effective technique to optimize your website’s images. It works by loading the images only when the user scrolls down to the part of the page where the image is located. This means that the images that are not visible to the user initially won’t be loaded, resulting in faster page load times.
To implement lazy loading on your website, you can use various tools and plugins, depending on your platform. For instance, if you are using WordPress, you can use plugins like WP Rocket or perfmatters to enable lazy loading on your website.
Another way to implement lazy loading is by using JavaScript. You can write a custom JavaScript code that detects when the user scrolls down to the image and then loads the image dynamically.
Using a Content Delivery Network (CDN)
Another way to optimize images is by putting them on a Content Delivery Network (CDN). A CDN is a network of servers that are distributed across the globe. When a user visits your website, the CDN will serve the images from the server closest to the user, reducing the time it takes for the images to load.
When choosing a CDN, it is important to consider factors such as server locations, pricing, and features. Some popular CDNs include Cloudflare, Amazon CloudFront, and Akamai. Many web hosting providers offer a CDN in their hosting plans, so start there if you’re considering using a CDN.
Resources
As you consider optimizing your images for speed and SEO, make sure you check out these resources: