Website designer, Owner
Have you ever wondered what is the best way to use images on your website? Most people are familiar with different image formats, such as jpeg, png, SVG, and gif. Here is a brief explanation of each:
Two newer formats have been introduced with website performance in mind. They are WebP and AVIF.
When we examine website speed and performance issues, one of the biggest causes of slow performance is improper use of image size and formats. If your website contains oversized images or uses older, outdated file formats, there are ways to improve, optimize, and convert your images using plugins. If you want to avoid adding additional plugins to your website, the best way is to properly size and format your images before adding them.
Let’s compare using the same image in different formats and optimizations. This first image is in the typical .jpeg format. Note the file size: 203 KB. We have the image set at 85% of its original quality. This is usually a pretty safe setting for image optimization as it reduces the file size without compromising image quality. We see an automatic file size reduction when we convert the same image to .webp format. The image went from 203 KB to 174 KB.
You may think it’s only a savings of 29 KB. That would be a good point if this were your website’s ONLY image. An overall savings of 29 KB is nothing. The reality is most websites contain several images. If your website includes 100 images, the file size savings become much more significant. Supposing all of your pictures were of the same size, quality, and file format, the savings would almost be 300 KB. That is 300 KB less than what a website browser has to load when your website is rendered.
Something to note with websites: If your website’s image library contains images not displayed on your live site, the browser still has to load those files. Therefore, updating your image library with only the photos your live site needs is always good practice.
We often are asked to rebuild or provide maintenance for websites we did not build. It is common for new clients who have a website to ask how their website’s performance can be improved. Among the reasons we find that hinder website performance is using images with large file sizes. Images 2 MB or larger are like heavy ball and chains being dragged as you try to move around. They weigh down the speed and performance because those large files must be loaded when the website is rendered. Preferably, you want your images to be no larger than 1 MB. Even more ideal are images that are 100 KB in size or less.
You may then wonder how your website can have great-looking images with small file sizes. Images with high enough resolution to be good enough quality are generally 1000 pixels to 1500 pixels. But that doesn’t have to be a hard, fast rule. The resolutions of your images need only match the size of the images displayed on your website. For instance, if you use an image as a Hero image at the top of a page, you will want your image resolution high enough not to appear grainy or pixelated. In this case, you will likely need your image to be somewhere above 1000 pixels, but usually not more than 1500 pixels.
This image is 1920 x 1080 pixels, yet look at the format and file size. It’s a large image—only 107 KB! Yet it is large enough to be used, looking great in large spaces on a website.
If you know an image will only be displayed in smaller areas of your website, you do not need it to have a higher resolution. This image is only 500 x 393 pixels but look at the file size—only 11 KB. As long as you know, this image will not be displayed in a larger area; it will look great and save you a ton of file size that needs to be loaded into a web browser.
Numerous software solutions will enable you to optimize your images, some of which also provide fantastic editing options. You can also find websites that offer image optimization and format conversions. It will depend on whether you are a Windows® user or a Mac® user. For both, one of the most popular software solutions is Adobe Photoshop® . However, it is expensive, licensed software and may not fit within everyone’s budget. For Mac® users, a great tool is Pixelmator Pro® . It is considerably less than Photo Shop® and has amazing abilities for image editing and optimization. There are also websites such at tinypng.com that provide image optimization and formating – for free. There are limitations on how many images you can convert and optimize, however, but they do offer reasonably priced subscriptions to give you greater capacity.
Images are a great way to showcase information on any website. The key is not overburdening your website file sizes with images that are improperly formatted and over sized. If you want to know more about better ways to use images on your website, CONTACT US. We would be happy to help!
