WordPress Image Optimization Tips

I know what you're thinking: to optimize an image for web, you need to reduce its size as much as possible, while making sure that it continues to look as good as possible. There is much more to it, though.

If you own a site or plan to create a new one, you already know that images are essential. However, unlike text, images can cause some problems. They may be too small for mobile devices, for example. Or, they may take too much time to load. Here's what you should know about WP image optimization.

Give your images descriptive names. It is very easy to rename images, and yet few people take care of this useful task. Click the desired image in WordPress' media gallery, and then change the name, alt tag and description in the panel that shows up at the right side of the screen.

Here's a real-life example: if you run an Ecommerce store which sells candles online, give your images names such as lilac-blossoms-jar-candle.jpg, instead of choosing candle1.jpg or (even worse!) keeping the default dscf00312.jpg name which was automatically assigned to that image by the camera. Ensure that there aren't any duplicate image names, or you'll hurt your SEO score.

Search engines love sites which provide as much useful information as possible; if you name your images properly, some of them will be discovered by people who are using Google's Image Search feature, so you'll get even more visitors to the site.

Alt tags are displayed by browsers when images are not available, as well as for web accessibility purposes. To set them properly, utilize the same words which have been used for the image name; don't use dashes to separate words this time, though.

The dimensions of your images count a lot. I know that you want to provide the best experience for your visitors, but it is much better to use small-sized images on your site, and then open larger versions of them when people click those thumbnails.

Adobe Photoshop has a killer "Save for Web" feature, which will allow you to get the best size for your images, while preserving their quality. From my experience, the "Optimized" mode works best, and a "Quality" value of about 70 will not degrade image quality that much. You don't need to use Adobe Photoshop, of course; there are lots of inexpensive graphics editing applications out there. In fact, Adobe itself sells a less-featured version of Photoshop ("Photoshop Elements") for less than $100.

Choose the proper image format. There are three main image types that can be used for any website: JPEG, PNG and GIF. Most Ecommerce stores use JPEG (.jpg) images because they can be compressed significantly. If you prefer to have sharper edges, or if you've got images with many uniform color zones, PNG will be an even better solution, because it doesn't use a lossy compression algorithm by default. You should be aware of the fact that there are several compression mechanisms for PNG files; a PNG-8 image will often have a much smaller size in comparison with a PNG-24. You will want to examine the output before taking a decision, though, because it may not include all the desired colors.

Finally, use GIF files for small images that need to be animated - an arrow that draws the visitors' attention to a coupon code, for example. Some people have successfully used GIF files for their product images, but their size if often larger than what you can achieve using a JPEG or PNG file.

Here's a final tip: use lazy loading for images below the fold. By making use of this coding technique, the images will only be loaded when the visitor scrolls down the page, and this will make your website open much faster.