How to Optimize Images for Web

optimize images for web

Images are an important part of articles and online content; they make your content more interesting and improve your SEO and viewership. Whether you are a blogger, own a business or contribute to an online publication, including images can catch attention and illustrate your point more clearly.

However, not all images are equal. Sometimes images are too large and take too long to download. Using large amounts of bandwidth and slowing down the visitor’s loading process are two things that can be avoided if your images are optimized. To optimize images for web will also be beneficial in improving your site’s overall performance and SEO. There are a few different ways that you can do this.

Choose the Right Image Format

When inserting images onto your webpage, there are three main file format options:

  • PNG – You will get the highest resolution and visible details if you optimize images for web with the PNG format. However, these files may be larger in size as they are lossless (read more about lossy vs lossless compression).
  • JPEG – Great for screenshots, photographs, etc however there is a slight loss in quality due to compression (this image format is lossy). Even re-saving the same image will degrade the quality.
  • GIF – With a color palette limited to 256 colors, choosing a GIF does not work well for most photos and complicated images. However, it does provide animation. Use a GIF for your thumbnail images or other decorations on your page.

Choosing the right file type is imperative to providing the best-quality image for your particular use-case.

Define an Image File Name

Although it’s not really part of the look of your web page, selecting the best file name is incredibly important for your SEO. Most images are given a default title, typically with a random assortment of letters and numbers. This randomization will do very little for your SEO because Google and other search engines will not recognize the content of the image. Instead, you should create a descriptive file name that includes information about the image but does not become too specific or narrow. For example, if we were to upload an image of the Optimus logo, an appropriate file name would be “optimus-image-optimizer-logo”.

image file name example

Remember to separate each word of your image’s file name with a dash “-” so that Google recognizes they are individual words. Do not use underscores instead of dashes to name your images.

Don’t Forget About Alt Tags

Text alternative tags for images are extremely important when trying to optimize images for web. Especially when those images are not rendering quickly or correctly. Alt tags appear when you hover your cursor over the image so that viewers know what image is supposed to appear. They also add SEO value to your site. This means that even though alt tags are not immediately visible on your webpage, they will provide better rankings for your page in search engines by linking the keywords you use with your images.

Follow the same rules for alt tags that you do for your image names:

  • Avoid keyword-stuffing your tags.
  • Be descriptive and clear in your word choices.
  • Include model numbers or other identifying information for products that you are selling.
  • Do not use alt tags for decorative images.

Scale Your Image and File Sizes

The size of your images has a direct impact on loading times and image quality. Therefore, when you are optimizing images for web, you need to pay particular attention to both the size of the file and the dimensions of the displayed image.

Some CMS’s and frameworks are starting to make it easier to deliver images responsively depending upon the device you are viewing the web page with via the Srcset attribute. Take Wordpress for example which renders an image in different sizes and uses the appropriate size based on your client.

wordpress srcset image

If your CMS or framework doesn’t support this however, a large image scaled to a smaller size will still need to load a large number of pixels. Those pixels will just be crammed into a smaller image window. If you want the image to be smaller and to load faster, you need to reduce the image dimensions and shrink the image size. To reduce an image’s dimensions, simply use an image editor tool to resize the image to something that is more appropriate for your use case. Additionally, to shrink the actual size of the image without losing quality you can use a plugin such as our Optimus Image Optimizer.

You also have the option to use a web-based image optimization tool or you can integrate image optimization directly into your web project via a developer API.

Consider Adding Captions

Like image names and alt tags, the captions that you give your images provide more SEO information. Captions are visible text located somewhere near your image, often underneath it. When your viewers scan your page, they will most likely look through the headings, the images, and the captions. If you want to get your viewers’ attention more quickly, captions are an excellent method for drawing people into your page. However, you do not need to caption decorative images that will provide no additional information about your site.

You can optimize images for web and improve your image SEO, as well as loading times, with just a few simple changes to your web page. Make sure that you test and monitor all of your changes to ensure that you are improving load times and making your images a more integrated part of your site.