Imagine you just built a new website and it looks amazing. You’re pretty satisfied with the look and feel but when you want to show it to another person… it’s loading and loading and loading. The performance of a website plays a significant role in the success of it and in this article you will find 6 ways how you can optimize your images to ensure a good performance.

But why does the speed matter?

The performance of your website directly influence your conversion rates, search engine rankings and the user experience. Customers are used to fast websites that are easily and accessible and when they come to a website or a shop that’s loading immensly long, they will lose interest in it pretty fast. Loading is the very first thing that happens before a user will be viewing your website and if it takes too long, there was a bad first impression made.

So… are the images the problem?

There can be many factors why your website is loading slow. It’s not only the images. Here are some other reasons why a website can be slow:

• poor server performance
• JavaScript issues
• too many HTTP requests
• too many ads
• caching issues

And of course, the images. But hey, for every issue there is a solution and we will focus on how we can optimize those images today.

What does it mean to optimize images?

The optimization is about making the file size as small as possible without the loss of the image quality. This helps a lot to ensure a better user experience.

Okay, so how can I do it?

Compression

Images can be reduced by their filesize with a compression. The goal is to make the size as little as possible without losing the quality of the image. On websites, uncompressed images can take a while to load.

There are two kinds of compression:

• lossless compression
• lossy compression

What’s lossless compression?

The goal of the lossless compression is to reduce the file size while maintaining the same quality as before the compression.

Formats of lossless images are RAW, PNG, BMP.

What’s lossy compression then?

To reduce the filesize, the lossy compression takes away some parts of the image. However, that doesn’t imply that the image will look bad. The information that gets taken out is not like the upper right corner goes missing. It’s more like, some pixels get put together or the average of an area gets calculated. Formats of lossy compression are JPG and GIF.

A really good online compressor is TinyPNG.

Dimensions

The most popular way to optimize images is by simply resizing them. For your website you won’t need images with 6000×4000 pixels and 12MB. With resizing you can dramatically reduce the file size. Image editors like Photoshop can help you with this but if you don’t have Photoshop, you can also use GIMP or any software online.

File types

The most common file types to upload on a website are JPG, PNG, GIF or SVG. While PNGs are completely uncompressed they should be only used for simple transparent images where you really do need the transperancy. JPGs on the other hand are the best for photos with lots of colors because that file type can display a million of colors. And instead of putting tons of videos on your website, you can use GIFs instead but keep in mind, they only contain 265 colors and are losslessly compressed. SVGs are vector graphics and often used for background graphics. They don’t pixelate because they get newly calculated whenever the screen resolution gets changed.

Metadata

Images come with metadata and that is text information about the details relevant to the image itself and to its production. The metadata is typically invisible to the end-user. For photography, this means you can save all sort of data just like the date, time, GPS data, camera details, color profiles, etc.

Due it’s not visible to the end-user you can get rid of it for your website. You can either remove the metadata with Photoshop or use an online tool for that.

Use Caches

Caching is the process of storing copies of files in a cache so they can be accessed more quickly. Images on a website are a part that usually won’t change too frequently. Images can get stored in a cache to be accessed faster the next time the user goes on your website.

Use a CDN

A CDN is a content delivery network that delivers you images and other content. It speeds up your website and image loading time by storing your website’s files at multiple data centers around the world. Through that, whenever someone visits your site they can download the files from the nearest data center. There are free CDNs like Jetpack and CloudFlare.

After this overview on how to optimize your images, have fun with it! One last tip from my side: A good rule of thumbs is to make sure every image on your website is at least below 1MB.