Best Practices for Images on a Website

When looking to highlight your content’s visibility, it’s critical to consider the importance of the images on your website. Under-optimized images that are larger in size will slow down your website speed and cause people to steer away. Multiple research studies show that if an e-commerce site loads slowly, as many as 45% of visitors admit that they are unlikely to complete a purchase. Therefore, it's clear that image optimization is an important piece of the puzzle that requires mastering in order to optimize your ranking. From attracting customers and clients to reducing image and website loading times, image optimization is essential as part of building a successful Internet footprint. 

Why is it Important to Optimize Images on a Website?

Images are the largest contributors to overall webpage sizes. Gathered data from HTTP Archive shows that unoptimized images comprise 75% of a webpage’s weight on average. Image optimization is a core principle of good web design that delivers benefits such as: 

1) Improved Website Speed

Image optimization for both web and mobile exists to make pages load quicker. They also create a better browsing environment for clients. For every two-second delay in your page speed, your bounce rate can increase by as much as 103%. Page speed is simply how fast content on a computer is loaded. It's often described as page load time or time to the first byte. Page load time is the time it takes to display the relevant content on a page, while time to the first byte is the number of milliseconds required for a browser to receive the first byte of information from a web server. 

2) Better Browsing Experience 

Page speed significantly shapes the experience of any visitor to your website. The average person can detect delays as short as one-tenth of a second, meaning that anything longer than that won't feel “instant” in their mind. A pioneering study done by the BBC found that for every extra second of loading time a webpage has, an additional 10% of visitors will navigate away from it. By optimizing images for your website, you’ll improve the browning environment and increase conversions, customer retention, and improve your SEO rankings. 

3) Improved Search Performance

Optimized images will help both search engines and readers alike to understand your website more and to get your content in front of more eyeballs. Recent data shows that up to one-third of all search queries return images through Google. Image optimization will help to rank your images in Google Image Search higher than others, which will inevitably deliver more traffic to your website. Visual search is becoming ever more important with the addition of a Google function that combines text and images into a single query. As much as two-thirds of Generation Z and millennial consumers desire visual search more than any other search engine technology.

How to Optimize Images for a Website

So then, how does the magic happen? Legnd relies on both time-tested practices and the results of the latest studies as to what optimizes images for the web: 

1) Use Direct and Concise Image Names

Although it's easy to go through countless product shots and just use the default file names the camera assigns, resist the temptation. Search engine optimization relies on relevant keywords to help your webpage rank highly on search engines. By creating keyword-rich and descriptive file names, your images will be optimized for their crawlers. Remember, crawlers will catalog all they can, so give them image names to rank you higher with. 

2) Carefully Optimize Alt Attributes

Alt attributes are the text-based alternatives to images whenever a browser can't properly render any. Primarily used for website accessibility, you'll be able to notice them yourself by hovering over images on a website with your mouse cursor to see the alt attribute text, although this can vary depending on your browser’s settings. This text adds additional SEO value to your website by including relevant keywords to the images, which can help you rank better in search engines. Engines like Google carefully look at them with their crawlers. Legnd finds that alt attributes and accessibility functions are frequently some of the most overlooked ways that businesses and organizations can use to increase their Internet visibility. 

3) Select Product Angles and Image Dimensions Wisely 

It's typical to want to show multiple angles of a product, especially one that's expensive or has a lot of details and features. The best way to make the most of any extra photographs is to always fill out alt attributes. Providing larger-scale images exclusively might seem like a way to improve user experience, but it can frequently backfire. Do not place the largest images of products from every angle on your webpage and just shrink the dimensions with the source code. Your website's page load time will increase due to the larger file size that's associated with said image. What you want to do instead is to make the image smaller and allow the viewer the opportunity to see a larger version of the same image on a pop-up with the cursor or on a separate web page. Making your images zoomable not only improves the shopping experience but will allow your websites to load faster. 

4) Choose the Right Image Format

The most common file types used for website images are:

  • JPEG: the gold standard for image files on the web, these images are able to be compressed significantly as needed. This results in smaller file sizes and faster loading times without compromising quality. 
  • GIF: typically lower-resolution than a JPEG, these are best for simpler images like icons that don’t have much detail. This format also supports animations. 
  • PNG: slowly overtaking GIFs as the most popular simple-image format, these images won’t degrade over time with re-saves like JPEGs. Their file sizes can also be much larger than a JPEG, which is why one must be tactical when using them on a website.

5) Optimize Thumbnail Images

Several websites, especially those focused on e-commerce, will make use of thumbnail images to show multiple products without taking up too much space. Thumbnails are great, but if improperly used, they will kill your website’s speed. Generally, it’s better to have a smaller thumbnail size (hence the name) for the sake of loading speed with higher-quality images available when the product is clicked for further information. Making sure to vary any alt attribute text will also index the images properly; you don’t want to have the small thumbnail image ranking higher than the full-sized one on a different page. 

Legnd Optimizes Your Website's Images 

Don’t keep tossing and turning over whether or not your website will have what it takes to speedily load and keep potential customers engaged. Our design team knows the best image optimization strategies to get your photos into the top Google search results by leveraging alt attributes, using the correct sizing, selecting the ideal file types, and more. If you’re tired of being buried under layers of competitors on the most popular search engines, reach out to Legnd today to learn more about how you can make it to page 1.

Get In Touch

Let's bring your
project to life

Submit this form to get a call back from one of our project strategists: Morgan, Rob, or Karrie. Or use this link to schedule a call at your convenience!