You're ready to replace some images on your website
On your camera are some great new shots which you’d like to use on your website. You transfer the photos from the camera to your computer, upload them to your website and using your webpage editor, insert the new images into your page. After clicking save or publish you quickly check the updated page and everything looks great. You give yourself a pat on the back for a job well done!
What you’ve just done is probably the #1 mistake made by novice web designers. The images are most likely far larger than required, slowing down the loading of the page, irritating your visitors and having a negative impact on SEO.
But the pages load and look fine on my machine!
This is also the #1 reaction to the suggestion that adding images to a page in this way is not a good idea. The reason it looks fine is because no matter what size of image you place into your web page, if the page design knows an image should be, let's say 300x300 pixels, the browser will resize the image to the correct size, 300x300 for display, after the image has been downloaded by the visitor's browser. The reason it also appears to load quickly is usually because you’ve already loaded the page and the image is now in the browser cache on your machine. The image is not being loaded from the internet every time you look at the same page.
In this test, the top row of images took 6 seconds to load compared to the lower row, which took less than 1 second. A page using the original images would be 100 times larger than one using edited images.
Once loading is finished however, there is no difference in the what the browser displays. The two rows look identical.
Diagnostics of loading times for each part of the page. Notice the time taken for the first row of 3 images.
How to determine image sizes to use
If replacing an existing image, then try to use the existing size. Note that some browsers allow you to determine an image size using a mouse right click.
If replacing an image in a row or grid of images, always use the same size for each image in the set if you want a neat, consistent arrangement of images.
If you are unable to determine the exact size required for the layout you want to edit, then use the following rough guidelines:
- Page header and other full width section backgrounds : At least 1920 pixels wide
- 2 column responsive layouts : 1000 pixels wide
- 3 column responsive layouts : 800 pixels wide
- 4 column responsive layouts : 600 pixels wide
Even in the case where you are using a page editor which can resize the images for you, it's best to reduce the image size before uploading to your server, simply to save space. Platforms such as Wordpress can sometimes allow you to select the image size to place on a page but you'll end up with multiple copies of the same image. Doing this can quickly fill up your server space and make your backups bloated.
JPEG, PNG, BMP, GIF or WEBP
Without going into any of the technical merits of each of these images, knowing which type of image to use is fairly easy.
- JPEG : For photos. The images are compressed and the level of compression determines the quality/size
- PNG : For logos (vector images) and transparencies. Lossless compression so higher quality and larger file sizes if used for photos
- BMP : Avoid. They are not compressed
- GIF : Animated images. Remember the 90's where images were often spinning or pulsating?
- WEBP : Has advantages over JPEG but not supported 100% so best avoided
Improve your images before use
Consider also editing and cropping your images before use. Some simple enhancements to correct exposure or colours can make a huge difference. Graphics/photo editors can be expensive and difficult to learn but there are many, free online tools which allow basic image editing.
A real example of an image provided by a client which benefited greatly from editing
Preparation
The subject of preparing images for website use is vast for those who wish to truely optimise the images on their web pages. However, a few simple steps to ensure correct sizes and decent looking images will go a long way to making your website efficient and professional.
