Inside the mind of Midnet Media.

Best Practices for Adding Images to Your Website

When uploading images to a website, image optimization is a crucial, and often overlooked process that offers a myriad of benefits. If you have optimized images on your site, your page(s) will load faster. If your pages load faster, users will be less likely to abandon the page while waiting for it to load, leading to lower bounce rates. If your site loads quickly and has relatively low bounce rates, search engines ( like Google ) take notice and has the potential to benefit your ranking on their Search Engine Results Page (SERP).

Before we get into the different techniques for optimizing your images, let’s go over a few image-related terms:

The Pros and Cons of File Compression Types

Lossy compression: refers to the process of removing pixel and metadata in an effort to drastically reduce the file size of JPG images. Lossy compression is fantastic for significantly reducing the size of the file, but as a result, you also run the risk of image quality loss. The key with lossy compression is finding a happy medium between a quality image and a small file size. [1] [2]

Supported formats: JPG

Pros: Smaller file sizes.
Cons: Quality can degrade if you use an excessive amount of compression.

Lossless compression: allows an image’s file size to be reduced without sacrificing quality. This is typically done by removing unnecessary metadata. This is great a great option if you’re looking for crisp, high-quality photos, though the downside is that the file sizes tend to lean on the high side, resulting in longer load times for the images loading on a webpage.

Supported formats: GIF, PNG

Pros: Your image will retain its quality even after compression.
Cons: File sizes tend to be larger than those using lossy compression.

A Bit About Image File Types

JPG:

  • Uses lossy compression so the file sizes tend to be on the low side. [2] [3]
  • Does not support image transparency.
  • Support a large library of colors, and is great for photography photos.
  • Line drawings and logos on the other hand, run the risk of looking fuzzy and out of focus when compressed.

PNG:

  • Uses a lossless format with fairly high file sizes.
  • Supports image transparency.
  • Also supports a large library of colors.
  • If you're looking for way to showcase your photography without worrying about quality loss, this is good route to take.

GIF:

  • Uses lossless compression with relatively small file sizes.
  • Supports image transparency.
  • Supports a limited 256 color palette.
  • If you want to use a color that's outside of the web color spectrum, you should use another image type or run the risk of your colors being converted.
Free Online File Compression Tools

When optimizing your images, your end goal is to achieve a balance between reducing the size of the file as much as possible while still maintaining a quality image. Depending on the scenario — for example, an image in your photo gallery versus a thumbnail — you may end up favoring one side more than the other. In the end, just remember that the smaller the file is, the quicker the site can work to render the image, leading to a better user experience.

When compressing images, a good file size goal is 100kb. This isn’t always attainable since image sizes will differ as well as what the image quality will look like at that size.

A few different compression options that are available for free online are:

Optimizilla free online file compressor

www.optimizilla.com allows you to compress up to 20 .jpg and .png files simultaneously. Also, if you click on the file once it's rendered, you can move the slider up or down to increase or decrease the level of compression.

TinyPNG free online file compressor

www.tinypng.com allows you to compress up to 20 .jpg or .png files simultaneously, or an infinite amount of you have the Pro version.

Compress JPEG free online file compressor

www.compressjpeg.com allows you to compress up to 20 .jpg, .png, or .pdf files simultaneously. Much like www.optimizilla.com, if you click on the file once it's rendered, you can move the slider up or down to increase or decrease the level of compression.

Compressor.io free online file compressor

www.compressor.io allows you to compress .jpg, .png, .gif, and .svg files. While powerful, you will need to compress your images individually.

Tips for Successfully Naming Your Images

An important part of optimizing your images is making sure that they’re following the proper naming conventions. When naming your files, be sure to keep the following tips in mind:

  1. Only use lowercase letters, numbers and hyphens.[4]
    • Some Content Management Systems (CMS) handle mixed lettercasing by converting everything to lowercase which can lead to broken image links.
    • Use hyphens instead of underscores.
  2. Make sure that the name relates to what’s on the image.
    • If you have an image of a polka dotted Volkswagen, naming it something along the lines of “polka-dotted-volkswagen.jpg” or “polka-dotted-car.jpg” will allow search engines to look at the image and help with searchability.
    • Always remember to avoid whitespace in your filenames. Whitespace in your filename probably won’t break anything, but it will lead to some unappealing URLs.

As an example, let’s say that you have a file named “dogs are awesome.jpg” and you decide to upload that file to your site. Wanting to share your newly added image with one of your friends, you type the file path URL into your search bar, excited to see your image, only to be met with a 404 error. Certain characters (like whitespace) can’t be parsed in the URL and are represented by encoded characters. As a result, the URL to the image that was added would be www.MySite.com/dogs%20are%20awesome.jpg instead of www.MySite.com/dogs-are-awesome.jpg.[5]

Alt Text and Why It’s Important

Alt text ( or “alternative text” ) is handy for several reasons. First, it’s the text that will display if your site runs into issues rendering the image. Second, the alt text is used by screen readers and assists in enhancing the experience for visually impaired users who are navigating the site. Finally, search engines take notice of alt tags, and an image with descriptive alt tags can help search engine crawlers index the image properly, which may assist you in ranking higher on the SERP.

Here are a couple of things to keep in mind when writing alt text for an image:

  • Be short and be concise. Try to keep your alt text around 125 characters (which is around the point where most screen readers start to cut off text). If you need a tool to help you keep track of your character count, I’d recommend https://charactercounttool.com.
  • Feel free to use keywords related to your page/site, but only if it’s relevant. Don’t stuff irrelevant keywords and content in as this can lead to negative ramifications.
  • Exclude phrases like “this is an image of...” or “here’s a photo of...” in your alt text. It’s already inferred and is unnecessary.[6]

Take a look at the below example to get an idea of the different ways to write an alt tag:

Skateboarding Standard Poodle wearing blue knee pads and helmet

"Just making my way to the skate bark."

Okay alt text: <img src=”skateboarding-poodle.jpg” alt=”Poodle”>
Better alt text: <img src=”skateboarding-poodle.jpg” alt=”Skateboarding Poodle”>
Best alt text: <img src=”skateboarding-poodle.jpg” alt=”Skateboarding Standard Poodle wearing blue knee pads and helmet looking hella fly”>

Sources