Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.
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.
Think about how your customers search for products on your website. What naming patterns do they use when they search?
Check out this Q&A from Moz to understand the importance of strategically naming the image files on your site. It can definitely improve your on-page SEO, but it can also help your pages and images rank higher on search engine results pages (SERPs).
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.
The number one priority when it comes to image optimization is to fill out each alt attribute for each product image on your site.
Here are some simple rules for alt attributes:
When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load.
If you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away.
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 out for image quality.
You can also opt to use "Export As".
Not using Photoshop? Try using TinyPNG:
There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.
JPEG (or .jpg) images are somewhat of an old file type. JPEG has become the de facto standard image of the Internet. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
GIF (.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, as I'm sure you know.
Regarding image optimization, GIFs are great for those plain, simple images on a webpage (which include just a few colors). But for complex images and photos, GIFs are not always as attractive. This is especially true for large images.
PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs and they don't degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images.
Here are some tips to remember when choosing file types:
Most image editing software can save images to any of the file formats discussed above.
Thumbnails are great, but be careful; they can be a silent killer. The victim? Your page load speeds. Thumbnails are usually presented at critical points during the shopping process. If they are preventing your category pages from loading quickly, you could lose a potential customer.
So, what can you do?
In general, Ringo is utilizing a 2:1 ratio orientation for all major modules.
Icons are all typically 40 x 40