Image optimization is something that’s often overlooked by webmasters and bloggers. Just because your images “look” right, though, doesn’t necessarily mean they are optimized. Investing a couple extra minutes into adding the right elements can make a world of difference.
Resize Before Uploading
Most content management systems (CMS), including WordPress, have a built-in image editing tool that allows users to resize their images on the fly. The problem with this tool, however, is that visitors are still forced to download the original image before the new one, which subsequently results in longer load times. A smarter approach is to resize your images manually in a graphic editing program of your choosing.
Save For Web & Devices
If you have Adobe Photoshop installed on your computer, take advantage of its “Save For Web & Devices” option. Doing so shrinks the image file size while allowing for greater customization of its options. Just click File > Save For Web & Devices > and choose the preferred file type and image quality. It’s recommended that you stick with either Portable Network Graphics (PNG) or Graphics Interchange Format (GIF) file formats for most of your website’s images since they are significantly smaller than JPEG.
File Name
One all-too-common mistake webmasters make when uploading new images to their website is using some generic, nondescript file name. Ask yourself, which file name is more appealing for an image of a dog jumping into the air: canon153s2.gif, or dog-jumping-into-air.gif? If you chose the latter, you are correct. Both search engines and visitors will take notice of the file name, and choosing a relevant name will boost your website’s credibility.
Of course, another reason why you should use relevant image file names is because it helps search engines rank the images. Search engine technology has come a long ways over the years, but they are still unable to read the objects depicted within images; therefore, they use other signals, such as file name, to determine where it should rank.
Alt Text
Don’t underestimate the importance of using relevant alt text with your website’s images. If a visitor is unable to render an image in their web browser, they will see the alt text instead. And much like the file name, relevant alt text helps search engines rank images.
Here’s an example of how to give an image the alt text attribute:
<img src=”dog-jumping-into-air.gif” alt=”Dog Jumping Into Air” />
