How to Make Image File Size Smaller | Website Optimization

Web load speed is important to SEO and user experience, and smaller images make a huge difference in loading time.

Some would suggest using a platform that automatically reduces image size or using an image reduction API, but unless you run a site where thousands of images get uploaded every day, I prefer the simplicity and convenience of doing it yourself. It’s a simple process that takes only a minute if the image is ready.

Here are some tips and tricks or best practices our web design agency relies on for all our websites:

Resize

Most screens are not going to exceed 1920x1080, so an image that exceeds this dimension is almost always going to be unproductive. The benefits of increasing the image resolution diminish while its file size skyrocket. There aren’t enough HiDPI screen users to justify a 1MB image.

In my opinion, even 1920x1080px is too much in most cases, so I only use this dimension for hero banners. For the main images of an article, I do 1280px (it depends on the size of the website’s container). For images that will only ever take up half of the screen, then I just divide 1280px by 2. Keep in mind to not go too small, though, as pretty much all phone screens are HiDPI and are mostly less than 450px wide, so I try to keep my full-width images at least 900px wide.

Reduce

Online tools like TinyPNG are handy at this. TinyPNG reduces the file size of most images without sacrificing a lot of image quality.

When you’re working with a jpeg and Photoshop, you want to save the image as a progressive image for a slightly smaller size and a better web-optimized image viewing experience, because of how web browsers load progressively saved images as opposed to baseline images. Read about it in-depth here.

Reuse

Modern browsers save images to their cache. If an image appears in many places on your website, make sure it gets uploaded only once and then reuse the image elsewhere on your site.

Image Format

Most browsers support next-gen image formats (such as webp) and they take much less size compared to their ancestors: gif, png, and jpeg. So, if they suit your web development process, use them whenever possible. You can read more about webp here.

Some web platforms (such as Wix) do this automatically by converting your uploaded images into a next-gen image format.

Lazy-Load

When you avoid doing work as much as possible until the very last moment, you’re lazy. The same concept applies to a browser when loading images, but you need to tell the browser to not load a resource until the very last moment. Fortunately, common web tools and platforms like WordPress and Webflow default to telling browsers to lazy-load every image, and the setting is just a checkbox that can be switched on or off easily.

Automatic Image Resize

Modern web tools create multiple versions at different sizes of the same image when you upload it, so it can serve the minimum size image while keeping it crisp enough. If the platform you're on does not offer automatic resizing, you can manually create different sizes of the image, and use them at different breakpoints for desktop, tablet, and mobile.

CDN

If your website has visitors all over the world, and you're serving the images from a central server located in the US, then your visitors from non-US locations will experience higher load times for the images, this is bad. To solve this, you can upload your images onto a CDN(Content Delivery Network), which will distribute your images by caching content close to where each end-user is accessing the internet. Which will reduce the image load times significantly for subsequent visits.

If you're using a platform like Webflow, the platform handles this for you automatically. If not, you can check out service providers like AWS(Amazon Web Services).

In summary:

• Resize your images
• Use a tool to compress your images
• Cache your images
• Use next-gen image format whenever possible
• Lazy load your images
• Use different image sizes for different breakpoints
• Upload your image onto a CDN

The tips and tricks we’ve provided in this post should help you to reduce the image load times on your websites. If you're interested in more topics about web design, make sure to subscribe to our blog.