8 Tips for Website Image Optimization
If you're running an ecommerce store or photo gallery site, image optimization is a MUST. Either to attract user eyeballs or increase your picture search traffic or improve your website loading speed, image optimization is playing an important role. We're not talking about the traditional SEO tactics for picture optimization on ALT description or image compression etc, that's not all enough, this article provides us an in-depth review for picture optimization.
Use Structure Data for Product image ALT
Most of the time we use default image number for picture names, especially when we have lots of pictures to upload. This is absolutely bad because search engine can not recognize the picture content so we lost the traffic from picture search. Instead, we need to provide structured description to it. For example if you're selling black iPhone 5S. How might people search? They might just search iphone 5s or black iphone directly. You can take a look at the google analysis suggestions for different keywords search data. Basically, people prefer to search "brand + product + series", so your picture ALT tag can be this format: alt="{brand name}-{product series}-{product number}". But please keep in mind, you just need to give rich description to the picture, you should not do keywords stuffing.
Different Angle Pictures
What about if I have taken several pictures to the same product? Should I use the same description? Yes and no, you just need to add direction in the end for example:
- black iphone 5s-front view
- black iphone 5s-side view
- black iphone 5s-back view
About picture large view
If you would like to provide large picture view for users, you must be careful. It's not suggested to put the large picture on your page and resize it via css. Although the picture is small, the actural size is still there and it will affect website loading speed. On the other hand, you can put a small picture directly then hyperlink to the large one. If you have too many pictures with big size, it's highly suggested use dedicated picture hosting service for guaranteed performance.
Compress your pictures
Look the following analysis first:
Most desktop computer or laptop users do not wait more than 3 seconds to load a website
No more 5 seconds waiting on mobile devices
Amazon will lose 1.6 billion if their website response speed slowed for 1 second
Search engines take website response speed into algorithm
But how much size is good for picture file? many professionals said under 70kb. No matter if it's a real standard, we should compress our picture when it does affect your website speed.
Use right picture format
There're 3 popular picture format: jpeg, gif and png. Let's see their difference
- JPEG(or jpg) is the most common format for high quality picture compression. If you have high requirement to picture on site, JPEG is much better than gif or png.
- GIF picture has less displaying quality comparing to jpeg. It's always used for simple display such as decorative pictures and cartoon pictures. gif is not suitable for high quality image compression.
- PNG is better than gif because the amount of supported colors. Especially for small images, png will not loose color but be able to deeply compress the file size.
So the basic conclusion is, jpeg has the best image quality, png less and gif the lest. So some tips for your website:
If you would like to show high quality product view, jpeg is perfect choice, you should never use gif picture for large view because when you do compression, colors will lost. gif is best for small cartoons. PNG can be alternative choice of jpeg and gif, especially you like to use small size, png is the best.
About Thumbnail
Most websites have thumbnails so visitors can view as more products as possible without navigating different pages. It's great solution, but it might affect your website loading, especially when its an online store. Two tips for thumbnail. a, compress it as much as you can because you don't need high quality view for it. b, no alt description for thumbnails because we only like to show the high quality product pictures to search engine.
Submit Image Map
Sometimes you need to use js functions for image display, but it's absolutely not friendly to search engine. To avoid such problem, you can submit an image map from webmaster tools center. Just make a little search on google and there're lots of great guidance for example this google guideline.
Pay attention to democrative images
Some non product related images like background, button and border images should be considered for optimization. You need to check if they have big size that already affected the website loading. Some tips for optimization such images
Use png or gif for simple decorative images like borders.
Use css as much as you can instead images.
It's not recommended to set background image. If it's a must, compress it for as small size as you can.