Reduce image size in kb – How to Optimize Images for Web RIGHT WAY.

How to Optimize Images for Web the RIGHT WAY.

Are you sure you are doing the right way on optimize your website image? An Images are account for the vast majority of the downloaded bytes on a site page and furthermore frequently involve a lot of visual space. Accordingly, optimizing images can frequently yield a portion of the biggest byte saving and improvement for your site. Reduce image size in kb can boost your website loading speed and now i want to share with you How to Optimize An Image for Web the RIGHT WAY.

What is image optimization?

Image optimization is about minimizing the file size of your images without sacrificing quality so that your website load times remain low. Other than that, it can also improve your website SEO on search engine.

Png vs Jpg for Web

PNG format is a lossless compression file format, which is common use on the Website. JPG format is a lossy compressed file format, however it’s also good for website and smaller size than a BMP format. But if for smaller icon or graphic, png is better because it’s lossless. I personally also prefer png, because the quality look better on web, even I’ve reduce image size in kb.

Use Facebook to Reduce Image Size in kb

Facebook have their own way to optimize all image in facebook, every image from users sending to facebook, the size will be reduce in kb. Thus, we can use facebook to do image optimization.

Upload you image to Facebook or Messenger, open the image and “Download”, it easy. Now, let see our experiment on the below.

To do the experiment, we need one image from Facebook, and one original. I have already upload one image to Facebook messenger through my phone, the image was taken from my iPhone. On the below, you can see the comparison of the two image. The image on left is original image taken directly from my iPhone, and the image on right was downloaded from Facebook messenger.

As we can see, the original image size was 3.45 MB, which is very large. And messenger have reduce image size in 148kB(without using compression tools), which is 23x time smaller size than the original files.

If you using original image without any compression in your website, you may take longer time while loading the website. As a site speed for google is a ranking factor, fast site is good user experience and a satisfaction will leads to higher conversions.

53% of visits are abandoned if a mobile site takes longer than three seconds to load. That’s a big problem.” Google

Most beginner don’t optimize their image before sending to their website, that is critical, not only affect user experience, also have a big impact of the website growing.

Learn other:

• How to Increase WordPress Website Speed (90 Score Google)
• How to backup your website in 30 Seconds
• How To Make Your Website AMP Compliant In Just 5 Minutes

Find the Actual Size of Place hold

Another way to optimize the images on your website, is to find the actual size for the image place hold. Actual size can prevent you use an over size image and reduce image size in kb, which will decrease your website load size.

To find the actual size, we can simply use the website inspect to find the image place hold, and check for the size. Here, i will demonstrate for image used in blog post.

To do this, simply open one of the blog post. After that, press “F12” on your keyboard to open inspect. Click on the selecting tools (the icon see screenshot).

Now, move your mouse to the content place and find the “inner-post-entry”. Because WordPress name the html writing area for this “class”.

Here you can see on the right of the “inner-post-entry”, 779.98 (is the max-width) is the actual size we are looking for. So you can resize your image that used in the writing area maximum width to 779.98 pixel. Because this is the maximum size that the image will be display on this area, even a 2k high resolution image will also be displayed in 779.98 px.

Therefore, fit every images on every position is one thing that can reduce the burden of your website while loading. But this is not the end, this until here you can only improve the image on your website about 75% of the optimization.

Always Use Online Image Compressor Tools

To reduce image size in kb size and optimize image to another level, we need to use image compression tools. Here I share with you the tools I’ve been using for image compression. Tools is simply and easy to use, you don’t need to do setting or anything else, just drag your image, done.

1. Go to Image Compress online tools

Open your browser, search from google “compressjpg” or directly visit thru the domain https://compresspng.com/.

2. Choose the format to compress

This online image compression tools allow you to compress JPEG and PNG image. Choose the type of your image to process to the next step.

3. Upload images

Simply click the “UPLOAD FILES” to upload your image. You can select multiple image by hold [CTRL] + mouse 1 click to select more. Another options is drag and drop your image into the box.

4. Begin download

Once your image finish compress, you are able to download the image. You can also download all your compression image at once by clicking the “Download all” on the below.

The different before and after Compression

You can see the different between the image after compression and another without compression. We take 20 images for the experiment, the total size of the original files without compress is 572KB. After we use the compression tools to optimize the images, the total size for the 20 images have reduced to 276KB, which have reduce over 50%.

Now you will get about 93% overall image optimization, the last parts i will show you to make 100% image optimization.

WordPress Image Optimize Plugins

Yet, plugins is the one last thing in overall image optimization process. There are countless plugins that support for image compress or image optimization. I don’t stop you use other image compress or image optimization plugins or saying that other plugins is not useful.

But i personally using smush for image compression or optimization, so if you like you could try it also. Because i don’t promote or affiliate for smush plugins in this post, i just personally use it and find it’s easy to use. Don’t many fancy setting or options that i like, i just install it and leave it alone, and the plugins do the rest.

Until here, i can say your website is now achieve 99% image optimization. You can now enjoy your website lightning loading speed, IF NOT then may be other factors that affect your website speed, you could check it on google page speed test and find the solution from my previous post “How to Increase Website Speed (90 Score on Google)“.

Conclusion

I hope you’re happy with the tutorial and the result. I’ve share all my tactics with you and hope you can share this article to the world if you get the result. If you have any question or don’t understand, please comment below. Thank You

Maomaochia is now accept and welcome guest post, find out more detail here.