We understand this is annoying. But without advertising-income, we can't keep making this site awesome for you.
Please disable your adblock and script blockers to view this page. Appreciate! 🙏
MaomaoChiaEnglish ArticlesWordPressReduce image size in kb – How to Optimize Images for Web RIGHT WAY.

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

by MAL CHIA
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.

download image on facebook

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.

compress image from facebook

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:

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.

optimize image using inspect

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.

optimize image using inspect

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.

optimize image compression

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.

optimize image compression

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.

optimize image compression reduce image size in kb

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%.

optimize image compression

optimize image compression

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.

You may also like

1 comment

How to Increase WordPress Website Speed (90 Score Google) - MaoMao October 1, 2018 - 10:18 am

[…] Images is one of the big issue for website loading time. Most of the website owner din’t optimize the images before placing them online. To optimize the images we can use this plugin called WP Smuch, but just using plugins you may not be able to pass google speed test. The correct way to optimize images is to optimize all the images before you upload to your website. Use jpg format for smller size and png for transparent images (e.g. logo) in your WordPress site, go to compressjpeg.com to compress your images. Download the compress images and upload to your website, combine use with Smuch to achieve 120% optimize. Complete Guide to Optimize Images for Web the RIGHT WAY. […]

Reply

Leave a Comment

%d bloggers like this: