Images are all over the web. They can be easy to take for granted, but without images the internet would be no different from an Encyclopedia. Images can be an amazing tool for any website – as long as they’re properly optimized and implemented. With this in mind, let’s walk through 5 of the most important aspects of optimizing your images for the web.
1. Image Sizing
Images can be sized with code, but this can create problems. For instance, an image may become pixelated or warped if dimensions are not properly translated in the code. Even the best images can lose their luster if they are not shown at the exact size that they are intended to be viewed at. Another problem is that browsers download entire images before any coding is able to go into effect. That means that visitors may not be seeing the image as you want them to. This can also give your site the appearance of being slow to load. Your visitors hate that – trust me! Of course, you should continue using width and height tags in your code to dictate the proper dimensions to your browser, but this should not be the full extent of your image sizing. Images must be properly adjusted in tools like Photoshop or Gimp to ensure that your site visitors see them at their best.
2. File Size
As we mentioned above, the file size can have a negative impact on user experience (UX) by making your site seem slow. That’s because file size directly relates to the load time of an image. This, in turn, impacts the load time of your website. As a general rule of thumb, an image should be compressed as much as possible without reducing its quality. As an example, the image we used in this article started off weighing in at around 4 megabytes. Now 4 megabytes is not large in terms of hard drive space, but a site with 20 images at 4 megabytes each will take a while to load.
And in case you were wondering, our image was compressed from 4mb to about 258 kb. That’s around 15 times smaller than the original! This was also accomplished with no noticeable degradation in the image itself.
3. Image File Title
You should always name your images something relevant. Generally, it’s best to describe the photo you’re working with. Since the photo above is a photo of the Chrysalis Inn in Bellingham, WA, I named the file “chrysalis-inn-washington.” Title tags are mainly for user benefit. In many browsers, the image title appears to your visitors when they hover over your image. Your title should be concise, yet descriptive. This is not a place for keyword stuffing, but if your image is relevant to your post, then your image title should be consistent with your overall SEO strategy.
4. Alt Tags
Alt Text, or “alt tags” may be the most important item on this list. Alt, short for “alternative,” tags are used in case the image fails to load in a browser. In the event that your image does not appear, your site visitors can see your alt text instead. With that in mind, you should always be using your alt tags to offer a brief description of your image. For those of you interested in SEO, alt tags can actually be a major factor in helping you rank in “Image” searches. While search engines may not necessarily be able to crawling your images (yet!) they can certainly interpret your alt tags. Keep in mind, that doesn’t mean you should be stuffing keywords, but a concise description may legitimately boost your site’s SEO.
5. Image Captions
Captions are a great way to keep users on your site longer. They can be used to explain what an image means to your content, or maybe to describe the image in certain situations. This creates a familiarity that many users find more difficult to click away from. Captions, of course, are not absolutely necessary, but they can be good for UX.
Final Overview
Images are very powerful. By using them properly you can make a great statement, emphasize a point, enhance an experience and even improve organic search results. Try each of these steps out for yourself. Your site will be better for it.
