Improving website performance with image optimization.
Images are powerful tools for your website.
They help tell stories, elicit emotion from your audience, and increase
conversions. It would be difficult to create an effective website without
However, using images requires a balance between the size of your images and website performance. The purpose of imagery on a website should be to enhance your content and improve the user experience. If images are negatively impacting the performance of your website, they begin to do the opposite.
As per Gomez and akamai.com, half of the users love sites which load in less than 2 seconds. If the page takes more than 3 seconds to load almost 40% of visitors tend to leave that site, thus increasing the bounce rate. Image optimization is the only solution for this problem.
Why is image optimization important?
Here are the answers - Image optimization helps in improving page load speed, boosts websites' SEO ranking, and improves user experience.
Let’s study the importance of optimizing web images
- Improved Page Speed
The amount of time taken by any Web page to load should be as minimal as possible. Keeping users waiting just because you have a media-loaded Web page can drive them away. Hence, image optimization plays a crucial role in minimizing the page-load speed. Usually, the most weight of a website or Web page is carried by the images and optimizing them can significantly reduce page loading time.
Image Optimization is a technique that delivers high-quality images on Web pages in the correct format while keeping the image in the smallest possible size.
High-quality images are imperative to maintain the quality of your website. Hence, choosing the right dimensions, sizes, and format of images to upload on your Web page is crucial. For instance, the JPEG format is more SEO friendly than the PNG format.
- Improved SEO Rankings
It is a proven fact that page-load speed is a crucial factor in determining search engine rankings for websites. Google also started considering page load speed as an essential element in determining the rankings of the pages. This development became a hassle to navigate around for many websites, and they had to step their image optimization game up to ensure that their page load speed was as low as possible.
This proves that it is imperative that image optimization is performed in its full potential before or after launching a website so that the search engine rankings are intact. Any digital marketer in 2020 knows the importance that a good search engine ranking carries for any website. With high SEO rankings, your website does not just have a better chance of being clicked on but also has a chance to make a positive impact on users by offering a holistic user experience, which has its own significance. The next point explores this deeper.
- Boost Conversions
So, if your search ranking improves, it means you can capture more users and possibly get more conversions. Page load speed is directly related to SEO ranking and conversions.
There has been a lot of research by marketing leaders, including Kissmetrics, Moz, etc, about the relationship between conversions and page load speed. According to Kissmetrics, 79% of shoppers who are not satisfied with the web page speed or performance do not buy from the same site again.
- Enhanced User Experience
As mentioned previously, visitors are prone to leave the website if the page takes too long to load. Now that you already know what image optimization is, you can holistically implement it to enhance user experience. A Web page should ideally load and display in 2-3 seconds. Typically, if your website has proper image optimization implemented, it means that the loading time of the website will be almost the same across all types of devices using the same internet connection. This is the first pillar in enhancing your website’s user experience.
It is essential to ensure that your website loads fast not only on computers but also on devices like smartphones and tablets. This would not only urge the user to stay longer on your website, but also to explore the services/products offered.
How to optimize the images on your website
#1. Choose the right image file type
When you’ve created an image, you have to choose a file type to save it as. There are many different options to choose from; here are a few of the most common:
- JPEG - JPEGs will work for most of the images on your site, with the exception of any images that have a transparent background. JPEGs are ideal because they allow for higher quality images and smaller file sizes, but fall short when it comes to things like logos or line drawings. With JPEGs, some file data may be lost in compression; although, the loss is not typically noticeable.
- PNG - When images don’t have a lot of color, are transparent or have a lot of text, PNGs are ideal. PNGs, however, will require larger file sizes.
- GIF - GIFs can compress images into smaller file sizes, much like JPEGs, but the color range on GIFs is limited, making it a poor choice for most photography. However, GIFs can be great for animation.
- TIFF - In terms of quality, TIFFs are king. However, it comes at the cost of size, as they are uncompressed and therefore much, much larger.
#2. Use a keyword to name your images
Most people don’t give a second thought to what the file names for their images are, but it turns out that it matters a lot more than you might think.
Did you know that Google will actually crawl the file names of your images? Make the names of your images descriptive and keyword-rich (but not spammy!).
If you leave the default image name — dsc1938473.jpg, for example — it’s a missed SEO opportunity. Instead, if the image is of a pair of women’s shoes, for example, choose something like pink-platform-shoes.jpg.
#3. Resize your images
Large images can slow your website down like crazy, and what’s more is that it's entirely unnecessary to have an image that’s larger than the maximum size your site will allow for. And, since most people won’t wait longer than three seconds for a website to load, site speed is of the utmost importance.
Resizing and compressing — which reduces the file size while preserving the quality of the image — your images will prevent them from slowing your site down.
#4. Optimize the alt image tags
The alt image tags, also called the alt attributes, are the text alternative to images when they fail to load on your website, but otherwise, they do not appear on your website.
Alt image tags used to tell people who have visual impairments what your images are, and they’re used by search engines to determine ranking in image searches, as well as a website’s organic ranking as a whole.
Suffice it to say, optimizing alt image tags is important. Here are a few rules to keep in mind to help you get it right:
- Use plain, descriptive language in your alt image tags, much like when you renamed the image file
- If the image is of a product with a serial number or model number, include it in the alt image tag
- If you can do so naturally, include a relevant keyword in your alt image tag. But, don’t force or overly stuff keywords into your tags
#5. Use decorative images wisely
Decorative images are images that are solely used for aesthetics and don’t add any understanding of the page or the content; think background images, borders, spacers, etc.
Although these images can make your website look a whole lot better looking, they can also make it a whole lot slower if you’re not careful.
Make sure that you always check and minimize the file size for all of the decorative images on your website. Background images, especially, look great but can have large file sizes.
Compress these images as much as possible without sacrificing quality. You could also minimize the size of a background image by cutting out the middle and making it transparent or a flat color.
Never add alt attributes to the decorative images on your website. Believe it or not, there is such a thing as over-optimization, and search engines could penalize you for it.
Integrating unique and responsive images
Avoid using stock images to stand out and provide a better user experience. The more unique and good quality images that you have on your website, the better are the chances for ranking. Do not forget to test whether your images are responsive to different devices or not. Check how do these images get displayed on mobile, desktop as well as a tablet to ensure good user experience.
The image optimization techniques ensure that the image name, path, alt, and title tag provide the right context about the image to the search engines. Also, select the image file type based on what you want to achieve with the image and do keep a check on the file size.