Design

10 Ways To Optimize Images For Web

0
Min Read Time
10 Ways To Optimize Images For Web

Image Optimization Defined

The premise of image optimation is around reducing the file sizes of your website’s pictures to keep your website fast, all while maintaining image quality for your visitors. 

This is done for several reasons by website owners and web agencies. The idea is the keep the overall “image weight” of your website low to optimize the experience for customers. It’s studied that even a 2-second delay in page load speed can double your bounce rate.

Below, we’ll share 10 methods you can use to optimize images for websites. 

  • Image Names: Short & Sweet
  • AssignImage Alt Attributes & Tags
  • Image Dimensions & Product Angles
  • Downsizing High-Quality Images 
  • Choose Correct Image File Formats
  • Thumbnail Images 
  • Use Image Sitemaps For Web Crawlers
  • Don’t Use an Abundance of Decorative Images 
  • Content Delivery Networks (CDNs) May Harm SEO
  • A-B Image Testing On Your Website

Image Names: Short & Sweet

When you use a camera, it randomly assigns an image name to it. A common, novice mistake is not to change the image’s name. Search engine optimization (SEO) cannot read your images properly, rendering them nearly useless in supporting your website text.

Let’s consider you’re posting an image of an indoor office plant, such as a snake plant. 

Instead of sticking with the default image name (IMG40556789.jpg), it’d be better to assign the image based on a product customers may search for (home-office-indoor-snake-plant). 

Assign Image Alt Attributes & Tags

Alt tags and attributes contribute to your website’s SEO. They are the text alternative to images (since browsers cannot properly read them). Again, adding proper keywords to what visitors search for is the bread and butter for alt tags. This is one of the best ways for eCommerce or blog images to show up on Google image search when you optimize images for websites. 

Here are some go-to rules for alt tags: 

  • Use simple language 
  • Use serial numbers/model numbers (if applicable)
  • Do not keyword stuff alt tags (ie: office-plant-plant-office-snake-plant-snake)
  • Don’t use alt tags for every image, such as decorative images

Image Dimensions & Product Angles

Ask yourself, when did you buy an online product you’ve never seen before with only a single image?

It’s best to use multiple product or service angles to optimize images for web results. If we consider snake plants as an example, showing them in different sizes, next to other plants, and depicted in different locations will help sell the product. 

You can then modify your image alt tags for each separate picture (targeting different keywords for SEO). 

Downsizing High-Quality Images 

If you have images with slow load times your website is losing prospective customers. Did you know that Google considers page load time as a website ranking factor

To optimize images for websites, a rule of thumb is to decrease your image file size. This can be done with tools such as Adobe PhotoShop, PicMonky, PIXLR, Canva and other image editing software. 

While using image software, make sure to pay attention to image settings such as:

  • File Format
  • Quality
  • Colour
  • Optimization
  • File Size

Choose Correct Image File Formats

Poor loading times are usually a symptom of file size and format type. When you optimize images for websites, there are 3 common file types to use, all with their benefits and drawbacks. 

  • PNG: These offer much higher quality than GIF or JPEG files. The only problem is they’re often too large for websites. They excel at more detailed images such as complex designs or infographics. If your visitors want to zoom in on particular images, PNGs are your best bet. 
  • GIF: These are excellent for animated images. GIFs are spectacular for social media, small thumbnails, and animated pictures but are poor for your high-quality product or website images. 
  • JPEG: In the majority of cases, JPEGs will be the best choice. Like the image file cousin to the MP3 audio file, they provide the best quality for smaller file sizes. They offer a great balance of quality and size and are great for eCommerce products.  

Make sure to see our other Choquer Blog on image optimization for more information. 

Thumbnail Images 

Thumbnails are useful to show plenty of products at once. Placed without care, however, they are detrimental to page loading speeds. 

Ensure that your thumbnail image file sizes are small. It’s okay to sacrifice a bit of image quality for a better page load speed here. You don’t want to confuse Google with too much alt text on one page or by making duplicated alt text on these small photos (it may be okay to skip alt text). 

Use Image Sitemaps For Web Crawlers

A submitted site map ensures website crawlers, like those from Google, can read your web pages. Thankfully, Google has provided some core guidelines for image publishing to help your website rank higher. 

Submitting your sitemap won’t guarantee all of your images will be indexed by Google, but it’s a critical step for SEO nonetheless. 

Don’t Use an Abundance of Decorative Images 

Any image that’s not product or service related would be considered a decorative image. It’s not recommended to go overboard with these images when you optimize images for websites. This could add unnecessary file size to your web pages, thus slowing them down. 

Try using a flat or transparent background colour on your website. Another tip is to use coloured areas on your site instead of images to save space. While selecting colours, make sure they compliment your brand theme and image while using colours that don’t clash with other areas. 

Content Delivery Networks (CDNs) May Harm SEO

Content Delivery Networks (or CDNs) host web images and media files to increase your page speeds. Although this sounds optimal, this can also hurt your website’s SEO by not having as many backlinks. A CDN may use their domain on the image, which means visitors who click on the image go to the CDN’s website. 

If your website is getting limited traffic (ie: under 1,000 visitors/day) then not having a CDN is a better call. 

A-B Image Testing On Your Website

When you make changes to optimize images for websites, make sure you have a method to measure results. 

Since your image optimization endeavours, did any of these KPIs increase?

  • Higher conversions or conversion rate
  • Reduced bounce rates
  • Increased clickthrough rates

Make sure to run A-B tests to see what customers prefer in terms of images per page, product angle shots, etc. 

If you need assistance with your website’s strategy and optimizing images for the web, make sure to connect with us today so our team can help you. 

Related Stories

Sign Up For Our
Learning Hub Weekly Blog

Dive into one of our articles to learn more about web development, SEO tips & tricks, and how you can grow your business through your website.

Awesome! More content!
Oops! Something went wrong while submitting the form.