Using images and graphics to communicate information is a proven way to increase engagement with your website content. Uploading images to your website isn’t difficult, but it’s easy to end up with unintended results. If you upload images with the incorrect formatting, they may end up stretched, skewed, or pixelated. The incorrect appearance of your image may look unprofessional and draw attention away from your great content.

Most importantly, if your image file sizes are too large, it can slow down your website. A one-second delay in web page response time can result in a 7% reduction in conversion.

In this article, we’ll go over some best practices for uploading images to your website. This will help you make sure your content is presented as you intend it to be.

 

File Format

When you upload an image to your website you’re going to want to save that image as one of three options: jpg, png, or gif.

Growing plant image in JPG format.

JPG

JPG is a standardized image compression developed for photography. This file compression is going to give you the best-looking image for the smallest file size when working with photographs. It’s not great for graphics as it doesn’t produce real crisp edges and lines.

Google review response graphic in PNG format.

PNG

PNG files are used best when uploading graphic elements. These graphics typically have large areas of solid colors and a limited number of colors in the file. PNG files support transparency, which means they can be saved without a background. If you were to save a PNG of a doughnut graphic, the background color of your webpage would show the hole in the doughnut. This is typically important for logos, icons, and product images.

Animated GIF of Immerge logo.

GIF

GIFs are an older type of image compression that isn’t used much for still images today. This is the file format that you use to share all of those funny animations with your friends. You probably won’t be using GIFs on your website unless you need an easy educational illustration. It’s not a best practice to have GIFs in prominent places on your website.

Image Aspect Ratio

The dimensions of your image are important to the image’s integrity, and space that your uploading to. If the header image on your blog requires a file that has an aspect ratio of 8:5, don’t simply force your image into that ratio. Crop the image to those dimensions so that you don’t stretch or skew the integrity of the image.

If your image is 4000 pixels by 3000 pixels, it’s way too big for the internet! The file size will slow your website down. There’s no reason that a website image should be any larger than a typical HD monitor display (1920 pixels by 1080 pixels). Really, it should be sized smaller to fit that area on the screen where it will be displayed.

If an image is stretched or shrunk into a dimension improperly, it can warp the image so as to actually stretch the appearance as shown below.

If you’re changing the size of an image in photoshop, for example, make sure you hold shift when you scale it up or down. This will ensure that the aspect ratio remains the same. You might be able to eyeball it and get close, but holding shift ensures the aspect ratio is maintained.

Smile face graphic showing image stretching.
Graphic showing image being scaled properly.

File Size

Finally, let’s talk about image file size. This is probably the most important part of uploading a file to the internet. Images are big! And when I say big, I mean they take up a lot of storage space. To keep them from bogging down the speed of our websites, we need to make them small.

A typical JPG file from your smartphone camera will be about 4-8 megabytes. That’s way too big for your website. Those images should be more like 50 – 100 kb – that’s a 95% reduction in file size!

How can you do this? If you have access to Adobe Photoshop, you can choose “save for web” when exporting your image. Through this interface, you can choose what file size you’d like to export with a slider.

Exporting for Web

When preparing to export your file, you can find this option under “export” as shown below:

How to get to Adobe Photoshop "Save for web" functionality.

Then, when you’re in the save-for-web user interface, you can adjust the slider (outlined in green) to change the quality of your JPG. When you change this slider, you’ll notice that the file size (bottom left – outlined in blue) will change with it.

You’ll also want to change the dimensions of your image (bottom right – outline in blue) to a size appropriate for where you’re uploading it to. When you change the dimensions, make sure the chain link icon next to the numbers is clicked so the aspect ratio doesn’t change.

Adobe Photoshop save for web interface.

Uploading Images Successfully

Uploading images doesn’t need to be difficult, and when utilized properly, they increase engagement with your content. Before uploading, you need to make sure your file is in the right format and right size with the correct aspect ratio. If you follow the processes outlined above, you’ll be on your way to successfully adding images to your web pages.

Images add interest and provide people with a way to quickly consume the information on a page. It’s worth taking the time to make sure your images look professional and add to the value of your web pages.