Optimizing images on your website is about displaying graphics in the right format, dimension, and resolution while keeping the file size as small as possible. These are important requirements for successful search engine optimization (SEO).
Why is image optimization important for SEO?
There’s a reason they say a picture is worth a thousand words. If your website takes too long to load, your brand’s story will never be told. After all, higher bounce rates mean lost conversions, and lost conversions mean missed revenue.
One of the biggest hurdles to website loading speed is improperly optimized images. If you know how to handle the images on your site, you can improve load speeds, increase SEO ranking, and overall improve the UX of your site. If a potential customer enjoys looking at your page and spending time on it, they are more likely to convert. Optimized images will help them on their way to the conversion you’re aiming for.
Choose the right file type
Different file types have different features, strengths, and weaknesses. Ideally, you should use JPEG for larger, complex images and PNG for simpler images. PNGs have a higher quality, but also a larger file size. That means if you use only PNGs, you’ll have a nice page, but it might not load as fast as you’d like. JPEG gives you color and clarity at a smaller file size. There are a few other things to consider when deciding which file format to use:
- PNG is the only file format that easily preserves background transparency.If this is a priority, you should consider this when choosing a file type.
- If you’re using vectors for logos, icons, or line art, it’s a good idea to use SVGs.They’re automatically scalable and indexed by Google just like PNGs and JPEGs, so using them won’t affect your SEO ranking. Added bonus: they have smaller file sizes, which can improve load times.
- WebP is an excellent alternative to JPEG and PNG, but it requires a little more effort to use. Developed and released by Google in 2010, this file format provides high-quality images with relatively small file sizes. Since Google is the most widely used search engine, using a file format they have developed can only help your ranking. One downside is that it’s not supported by all browsers, which means you’ll need to set up backups to make sure people using unsupported browsers can still see your graphics. That being said, you can use WordPress plugins like Webp Express or ShortPixel to convert images to WebP. See below for server configurations.
Compress your images
Image compression, simply put, is a process where you fold the data of an image to reduce the time it takes to store or transfer the image. Long story short, compressed images load faster, and faster load times are always good for B2C and B2B websites. There are three different levels of compression:
- Lossy compression – Lossy is the best option for most users. Images processed with Lossy algorithms are the smallest optimized images available. If the speed of your site is a priority and you want the best balance between optimization and image quality, we recommend sticking with Lossy optimization.
- Glossy Compression – Glossy is the best choice if you still care about Google Insights, but believe that a slight loss in page speed is an acceptable tradeoff for top-notch image quality.
- Lossless Compression – Lossless optimized images are pixel-for-pixel identical to the originals, but they offer less size reduction compared to either Lossy or Glossy processed files. If you want your images to remain untouched, this is the option for you. Translated with www.DeepL.com/Translator (free version)
If you are interested in image compression, there are a few important things you should know: save all images for the web, 72-150 DPI or use an image optimizer. We recommend using tools like ImageOptim or websites like ShortPixel, TinyPNG and JPEGmini before uploading your images to your website.
For WordPress sites, we recommend using ShortPixel or Smush. One more important note: You can still reduce the file size of these images by removing their EXIF data. Most image optimization tools can do this for you, although you may need to adjust settings.
Use Responsive Images
A responsive image is one that automatically adjusts to the size of the screen. This adaptability is crucial for any business that wants to make their website mobile device friendly. With more than half of daily web traffic coming from mobile devices, this is a pretty essential feature to have.
Here’s some good news: if you’re using WordPress, your images are already responsive. This feature was added as a default in version 4.4. Images should have the srcset attribute, which makes it possible to deliver a different image per screen width. Here is an example of a responsive image tag:
<img src="really-cute-cat-200.jpg" sizes="50vw"
srcset="really-cute-cat-100.jpg 100w, really-cute-cat-200.jpg 200w,
really-cute-cat-400.jpg 400w, really-cute-cat-800.jpg 800w,
really-cute-cat-1000.jpg 1000w, really-cute-cat-1400.jpg 1400w,
really-cute-cat-1800.jpg 1800w" alt="really-cute-cat">
Create unique file names for each image
If you are writing an article about really cute cats and you use an image that shows a really cute cat, the file name should not be DSC2544.jpg. A proper file name would be really-cute-cat.jpg, with the main theme of the photo (and your article) included in the file name. Unique, descriptive file names make it easier to organize and find images on your site. While this isn’t necessarily a benefit to the end user, it makes your life a whole lot easier. Wasting less time searching for mislabeled image files means more time that can be spent on productive, revenue-generating efforts.
Insert SEO-friendly alt tags
The alt tag is a necessary addition to all HTML image tags. Google is smart, but it still needs your help to determine the value of your website. Tagging your images helps their algorithms, improves your ranking, and makes it more likely that your images will show up in image searches. Alt tags aren’t just important for SEO purposes, either. They also provide valuable information for screen readers that help disabled users fully experience your website’s content. Here’s an example: <img src="really-cute-cat.jpg" alt="side-view-of-really-cute-cat">
Learn about next-generation images and deploy them when possible
The recommended next-generation image format is WebP. WebP was developed by Google and uses predictive coding for superior online lossless and lossy compression. It is natively supported in Google Chrome, Firefox, Edge, and Opera. WebP images are typically 25-35% smaller in file size than JPEG and PNGs. This reduces page size and improves performance. Other next-generation image formats include JPEG 200 and JPEG XR, although neither have widespread browser support. As mentioned earlier, you can use WordPress plugins like Webp Express or ShortPixel to convert your existing image to WebP. Then you’ll need to contact your server’s support team to make sure there are rules in place to server-side WebP images with compatible browsers. Most modern browsers support the WebP image format.
Supply images via a CDN
Image content delivery networks (CDNs) are great for image optimization. In fact, they are one of the most popular optimizations for website speed. Switching to an image CDN can save 40-80% savings. They also help reduce bandwidth costs, improve security through DDOS defense, and can help you avoid traffic loss due to hardware failures. Many host providers offer free CDNs, so check with your hosting solution to see what’s available. The way CDNs work is pretty simple: they optimize your images and get them to your user as quickly as possible. The CDN creates new versions of the images as they are needed, and delivers your images from an offsite URL with caching enabled that loads quickly, usually before the page can render. Using a CDN can increase the delivery speed of images many times over.
Load your images with delay
Typically, when someone opens a web page, all of the content on the page is downloaded immediately and rendered in one fell swoop. This makes caching pages easy, but it can also lead to slower load times and wasted bandwidth. That’s where lazy loading comes in. Lazy loading below-the-fold images (especially larger ones) can significantly improve performance. The lazy loading technique allows the page to stop loading, although many off-screen images don’t start loading until a visitor scrolls down the page. The only things that load are the things the user actually looks at, which saves memory and improves the UX of your page.
Popular tools for image optimization
- Imageoptim (mac only app)
- ShortPixel (website)
- TinyPNG (website)
- JPEGmini(website)
- ShortPixel (WordPress plugin)
- WebP Express (WordPress plugin)
- Smush (WordPress plugin)
Summary and checklist for a faster website
Set up your website/server for success.
-
- Add CDN to your website
- Serve next generation images
- Lazy load your images
- Set up your website/images for success
Choose the right file type.
- Compress images
- Use responsive images
- User-defined file name
- Insert SEO-friendly alt tags
Optimizing the images on your website may seem like a big task at first, but once best practices are in place, you’ll be thankful for the increased traffic, conversions, and organic rankings. If you need help tackling a project like organizing and optimizing images on your website, contact the team at Windmill Strategy.
