How to do image compression for your website or blog

Why does image compression matter?

Making sure your website loading time is as fast as possible is a very important part of your website development. With more and more users not willing to wait only a couple of seconds for your page to load you should not make any mistakes when it comes to image compression. It's easy to get excited about making your website more beautiful and appealing, but there are some things to keep in mind before bloating your website with lots of high res pictures. I didn't do any image compression in the beginning and was getting terrible page load times and a lot of frustrated visitors. The more graphics and images you have on a page, the larger it will be - which means that it will take longer for your site to load. To keep this from happening, image compression can help reduce file sizes without sacrificing quality.

What is image compression?

Image compression is a process that removes the redundancy in an image, like repeated patterns or solid colors. This can be done with software or hardware and has many benefits including saving storage space and loading time for images. There are a few ways to reduce the size of your images, but there is no universal solution that will work for every single site. Here are some tips that will help you devise the best strategy for your website’s needs.

Take a look at what you’re uploading to see if it needs to be reduced in size at all.

If the original file size is 72 dpi or a file size in the megabytes, then this would be a good place to start.

The best file format for images on websites

To answer this question we need to take a look at the file types that are used on websites. I would categorize the file types into the following groups:

Graphics

What I mean by graphic is things like your logo, arrows on buttons, and icons for various applications. Due to its wide variety of uses, this is the most common file type for images on the web. Depending on what your use case is, you may want to use one of the two file types I would recommend.

PNG

PNG is a lossless format that is optimized for images. It allows for transparent backgrounds and is a good choice for logos and images that require transparency and do not need to be scaled.

SVG

SVG - scalable vector graphic is a vector format that is very often used on the web. It is best suited for logos and icons that need to be scaled with your screen size as a vector graphic will always be crisp no matter how big it gets. However, as SVGs are not images but a set of instructions for the browser how to color certain areas they are a good choice for low polygon graphics but not for high resolution graphics or images.

Photos

These are probably the images that come to your mind when thinking about pictures on web pages. They can be photos, or any other image that you want to display on your website. Especially in today's world where even your iPhone has a high resolution camera that produces pictures with sizes in the megabytes, we can not simply use those pictures on a webpage.

JPEG

JPEG is the standard format for photographs on the web and oftentimes recommended. It is a raster based which means that it does not scale well with the screen size, which is why people often use big resolutions on their images for them to be displayed nicely on a desktop browser. However, most of today's users don't use desktop browsers and even big companies develop their websites on mobile first. So why should you care for desktop experience first instead of optimizing for mobile? In my opinion, you shouldn't. optimize your images for mobile.

WebP

"WebP is the rockstar of file formats for images on the web." I honestly never heard of it before I did a deeper dive into image compression and formats. The format was developed by Google in 2010 and to achieve better lossless and lossy compression for web images. It reduced the file size of my already reduced JPEG images again by up to 50%. With all the mayor browsers by now supporting WebP, it is likely that most of the websites will switch to this format over JPEG in the future.

Videos

I'll be honest with you. Don't put videos on your website. At least to me videos on websites are very annoying if you do it wrong.

Youtube

Actually, Youtube is not the only video hosting service on the web. What i mean when I say Youtube is that you should not try to host your videos yourself but instead use a third party service like Youtube or Vimeo to host your videos and only link to them on your site. This will keep the footprint of your site low and loading times fast while also making sure that you can have as many videos on your site as you want.

GIFs

GIFs are often used for short repetitive animations, like a blinking cursor or a blinking text. It is the only animated image format that is supported in all major browsers.

The best free online image compression tools

I've created a list of websites that will help you compress your photos without losing any quality. The best part? You don't need to download any software! There are many tools out there that will reduce the file size of your images, however I found the ones below are the easiest to use and deliver great results. I’ve sorted them from most to least popular.

TinyPNG
Compress your images by up to 95%.
cloudconvert
Converting your JPG or PNG files to WebP is a great way to save on storage space and bandwidth.