We’ve all heard the phrase “a picture is worth a thousand words.” Well, a picture tag means the same thing for your search engine optimization. Modern HTML has a number of ways to embed images on your page in an optimized fashion. However, many webmasters do not take advantage of these opportunities. As a result, they lose search ranking, visibility and ultimately, conversions.
Let’s take a look at just exactly how important picture tags can be for your site optimization.
Responsive Websites and Picture Tags
Having a responsive website is becoming more important than ever. You never know how your user will view your web screen, and more users than ever are viewing websites through mobile devices. These devices do not always have connections to high-speed Wi-Fi, and there is also less screen space. The images that you use must be poignant and optimized.
The img tag is not enough anymore. This tag is the older brother of the picture tag, and it is rooted in the core of HTML. However, the mobile era has brought methods of optimization to us that must be considered. Responsive pictures must be able to switch resolutions and load quickly while they are doing so. The old school img tag gives the browser only one image to utilize.
Art Direction
The img tag does not allow for the details that you might see in a larger picture to show up on a smaller screen. If that tag is used, webmasters must become infinitely more creative in cropping the image and using CSS to keep the visuals for a website looking good. The picture tag takes care of this problem automatically, allowing the webmaster to utilize the same image at different size points. The picture tag is even easier than using the sizes or srcset attributes of the img tag.
Implementation
If your image has a singular focal point that becomes more difficult to see as the picture gets smaller, then your picture tag is essential for your art direction. The picture tag allows you to highlight the most important aspects of your photos. Furthermore, you can still use img tags as backup so that your website will stay compatible with browsers that do not yet support picture tags.
When Not to Use Picture Tags
Just because the picture tag is an updated version of the img tag does not mean that you always need to use it. The img srcset and sizes tags may actually work better for your website, because not all browsers have caught up to the picture tag. You may actually be limiting the options that your browser utilizes with too many picture tags.
Also, your source elements srcset tags may not require any more than a single URL. Because of the versatility of the picture tag, you may be tempted to use dozens of URLs for every source tag that you have on your website. Not only will this not accomplish a great deal in some cases, but it may actually slowdown performance on a website with a lot of pictures and other data.
In short, make sure that you understand the picture tag, but you don’t have to use it for everything on your website. When it is utilized correctly, however, you gain a great deal of leverage and huge optimization points with Google and your human visitors. Take the best practices above as timely tips that you can use to upgrade your site optimization immediately.
