Optimize Your Website’s Images for Faster Load Times – Coding Ninjas
Coding Ninjas
July 2019
« Jun    


Optimize Your Website’s Images for Faster Load Times

Michael MiraMichael Mira

In the Internet Age, speed and precision can determine the success of your branding strategies. Whether you’re a corporation, non-profit organization or professional, your web presence is a key factor in your brand’s reputation. According to a recent study, visitors to your website make their judgment about your brand within 50 milliseconds. There are many factors that influence your audience’s snap judgment: web deign, user experience, ease of navigation, and relevance of information. But another critical factor you should consider is page loading speed.

You might assume that page loading speed is no longer an issue today, especially as internet providers improve their broadband speeds. However, there are elements underneath the hood of your website that can slow down loading times. This is especially true for those whose web design contains a lot of visual media, such as high-resolution photos, graphics, and flash elements. A website that is heavy with large image files can drag down its loading speed and consequently how you effectively present your information.

How to Optimize Your Website’s Images

JPEG files are not only composed of pixels, but metadata as well. Metadata can contain anything from the image’s dimensions to the camera model used to take the shot.


While these tidbits of information are important for photographers, they are irrelevant to your website’s function. So how can you specifically optimize your high-resolution images without sacrificing their quality? Here are some tips:  

  1. Remove the Metadata

Since the metadata contained in your JPEG image is unnecessary clutter, you can simply remove the properties from the file. First, locate the file in your computer, view the properties, and delete all of the metadata.

  1. Crop Your Images

If any of your images have white space around it, you should crop the image in order to remove it. Some web designers will use white space as padding for images, but this will just add bulk to it and contribute to slower loading speed. If you need padding around your images for aesthetic purposes, use CSS to do so.

  1. Use the Correct File Formats

If your website has icons or any type of graphic that don’t contain multiple colors, it is recommended you save it as a GIF file rather than a JPEG. Be sure to decrease the amount of colors in the graphic before saving. If your image has a lot of details, save it as a JPEG file, but decrease its quality on Photoshop or Illustrator. If it’s a small logo, it will retain its sharp and vivid look on the website.

  1. Resize to the Proper Dimensions

Use a photo editing program to resize your images, not through HTML or CSS. If you want to keep the original high-resolution image, then just make a copy of it for editing. You can upload the smaller sized copy on your website. If you simply need to compress your images, you can utilize open source editing programs like GIMP.

Once you’ve optimized your images, conduct a website loading speed test using a free online program such as Pingdom. You should see a difference in your website’s loading speed if you optimized your images correctly.

Michael Mira is a writer, photographer and web designer based in Houston. He was born in Manila, and grew up in New York City and Texas.

Comments 0
There are currently no comments.