The Benefits of Optimizing Images for Web
What is image optimization?
Image optimization is about reducing the file size of your images as much as possible, without sacrificing quality. This allows for faster page load times and increases your SEO score. To optimize your images is to ensure the images look flawless at any screen size and making sure they don’t hinder the website performance.
Large images slow down your web pages which creates a less than optimal user experience. Optimizing images is the process of decreasing their file size, using either an application like Photoshop or a web app built to easily optimize images, which in turn speeds up the load time of the page.
The benefits of formatting your images
- Improves page speed load time
- It improves SEO Improved SEO increases website rank
- Results in higher conversions
- Creating backups will be easier and faster
- Smaller image file sizes use less bandwidth
- Requires less storage space on the server
Supporting statistics
- 86% of businesses predicted that visuals will be an important part of their 2022-2023 marketing strategy
- 39% of users will stop engaging with content when the images won’t load or the loading time takes too long
- 46% of users do not revisit poorly performing websites
- Content with relevant images gets 94% more views and engagement than content without relevant images
- 92% of people say that visual input is the leading factor affecting their purchase decision
- 52% of online consumers in the U.S. say that on-model photography is important
- 51% of online shoppers in the U.S. want to see a minimum of three product photos showing the different angles of the item before making a decision
- 67% of online shoppers have described high-quality images as “very important” to their purchase decision
How to optimize images for the web
Use concise and direct image names
It's really easy to blow through hundreds of product shots and keep the default file names your camera assigns.
When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
Optimize your alt attributes carefully
Alt attributes are the text alternative to images when a browser can't properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your ecommerce products to show up in Google image and web search.
Here are some simple rules for alt attributes:
- Describe your images in plain language, just like you did for your image file names.
- If you sell products that have model numbers or serial numbers, use them in your alt attributes.
- Don’t stuff your alt attributes full of keywords (e.g. alt="ford mustang muscle car buy now cheap best price on sale").
- Don't use alt attributes for decorative images. Search engines may penalize you for over optimization.
Resize your images
Consider this:
- Nearly 50% of consumers won’t wait even three seconds for an ecommerce site to load.
- Globally, the average page load time is actually increasing.
- Amazon found that if its pages were to slow down by just one second, it would lose $1.6 billion a year.
- Google uses page load time as a ranking factor in its algorithm.
One way you can reduce image file size is by using the Save for Web command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye on image quality.
For ecommerce images, a good rule of thumb is to try to keep your image file size below 70 kilobytes. That can be difficult at times, especially for larger images.
Choose the right format
There are a ton of different image file formats, but for our purposes, the most popular – and important – are:
- JPG: This format is best for photographic images, like headshots and product photos. JPG images have small file sizes, which allows you to store more of them at once and improves page load times.
- PNG: This format is higher quality than JPG images, so it’s usually used for graphic-type images with more intricate designs. PNGs can also provide transparent image backgrounds that can be overlaid on colored backgrounds. The tradeoff is that PNG images are larger than JPG images, so using them will have a worse impact on load time.
- SVG: This format is often used for vector art or solid colored graphics, like logos or line art. SVG images are responsive across devices, which means icons and graphs will display correctly no matter how they’re viewed.
- GIF: images are lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation. Regarding image optimization, GIFs are great for those plain, simple images on a webpage that include just a few colors.
Make use of sitemaps
An XML sitemap is basically a list of all of the URLs on your website. It works like a roadmap for Google to identify which pages are available for crawling. Adding images to your sitemap helps Google index your images and better recognize the content on each page.
Use responsive images
Responsive images are images that display correctly on devices with varying screen sizes (e.g. desktops, smartphones, and tablets), and they’re important for SEO because they lead to better user experience. We all know that positive user experience is important to search engine crawlers, and Google itself has even named responsive images as an important best practice technique.
REFERENCE LINKS