How to Optimize Images to Load Website Faster

developete — Fri, 20 May 2022 12:11:05 +0000

Why you need to optimize images for your website and how to compress them quickly.

Optimizing images is one of the most important practices, when building a website for many reasons. This will make your website even faster, especially when building websites using a framework such as ReactJS.

Here are the three most important reasons why to optimize images:

Occupying less storage on the hosting server

Imagine having a thousand images of one megabyte each on your server. That requires almost one gigabyte of storage!

Now, imagine that all these images compressed are 100 kilobyte each, this requires 10 times less storage on the server.

Better SEO score

The better the seo score the better the website will rank on google. Now, faster websites, rank better in search results as compared to slower websites.

Faster loading websites

User experience improves dramatically when the website they are visiting loads quicker and the interactions with the user are faster. That means the user will stay longer on your website.

Here’s an example of how optimized images improves the loading time of your website:

Here’s a website that has a non-optimized image loaded below:

Screenshot was taken from the console from here.

And here’s the same website with the same image but optimized:

Screenshot was taken from the console from here.

Note that

No compromisations have been made to the quality of the image. The quality is the same. We only have one image on the website and the difference on loading time is a whole one second. Imagine having 50 different images, that’s a lot of loading time!

Here is a video I made some time ago on how to optimize images:

All right, now that you got my point here, here’s how to optimize the images for your website.

1. Find the images you want to use and visit the website tinypng.com. Upload the image to the website and see the difference in the percentage. This is how much the image have been compressed:

2. Click on download

3. Replace the existing image on your server with the compressed one and that’s it!

CONCLUSION

There are many other websites and tools you can use to optimize your images but i personally prefer tinypng.com as i find it the most reliable and easy to use.

Some other similar websites, in case you would like to try them out:

That’s it! Thanks for reading, and keep being awesome!

The post How to Optimize Images to Load Website Faster appeared first on Developete's Tech World.

Web Archives - Developete's Tech World