Optimize images for website

Tutorials

Optimize images for website

The use of images on websites is inevitable because of the need for image insertion, everyone has it, regardless of which website it is. But there is a downside when uploading images to the host is that it will cost quite a lot of space and bandwidth if you have a huge stock of images, not to mention if you use WordPress, the mechanism of automatically generating many different images of it will cost you more space. So if you are using the way to upload images directly to the host, please refer to the experience of optimizing your photos in this article.

optimize images for website optimize images Optimize images for website optimize images for website min

Which image format to use on the website?

To take advantage of the best images and avoid using the wrong image formats to burden the website, you should clearly identify each need to use the most appropriate image format.

The most commonly used images on the website are GIF, PNG-8 or PNG-24 and JPEG formats. Each image format has a different clear purpose that I would like to summarize as follows:

  • GIF: Use for uploading animations to websites.
  • PNG-8: Use for sharper, more detailed images but only colors in RBG color combinations. There is support for transparent images (no background).
  • PNG-24: Use for high-detail images and multi-color support. There is support for transparent images (no background).
  • JPEG / JPG: Normal image format, can reduce image quality, support multiple image colors. But does not support animation and transparency.

So if you follow the above needs, if you do not need to use animation, you should prioritize PNG and JPEG image formats. If the image has less cumbersome details, use PNG-8 instead of JPEG because the quality is between JPEG and PNG so PNG will have better image quality.

When to use JPEG images?

If you have photos with high color, using gradients (gradients), then use JPEG because for images with gradients, many colors, JPEG will help you achieve better image quality, but the image size will lower than PNG and GIF.

When to use PNG images?

PNG has PNG-8 and PNG-24, where PNG-8 is a new image format with features like PNG-24 but can be used in some cases to replace JPEG, such as a transparent image or using for photos with a little color.

If you want to post high-quality images, keep the maximum quality, use PNG-24 because it is a lossless image compression format and JPEG is lossy compression so it will more or less lose quality. However, in my opinion, you should switch to PNG-24 if you do not need an animation, then use the image size reduction tools to have the lightest size and much better quality than JPEG. That's why Thachpham.com currently uses PNG images only if those images were made as screenshots, for example.

Comparison between PNG and JPEG

Here are two photos of me taken using Snagit 12 and saved as JPEG (75% quality) and PNG-24, see the difference.

Please compress the image before uploading to the website

You should compress images (reduce the image size, not size) before uploading them to the website if you do not need to keep the maximum quality. An original image, if compressed, you can save up to 70 - 80% of the capacity but the quality is almost unchanged if used with the naked eye, note that with PNG format you will be able to compress better, while JPEG is compression is less because it's already compressed.

 

Got problem by saving space for your WordPress? Just read this article:

 

Best photo compression application

  • Caesium (Windows)
    This software supports you to compress common image formats such as PNG, JPEG, and BMP, can compress multiple images at once in the folder and is completely free.
  • ImageOptim (Mac)
    This is an application that I quite like on my Mac and use it often while I am on Mac because it is both lightweight, beneficial and free. It supports you to compress some common image formats such as JPEG, PNG, and GIF.
  • PngOptimizer (Windows)
    This is a small application and currently, I am using to compress PNG images.
  • Kraken (Web)
    If you need to compress photos quickly, compress well and support the image size reduction feature, Kraken will be quite suitable for you. You can also compress directly from an existing link or compress all images on a website with Page Cruncher.

Compress images on WordPress

If you are using WordPress and need to compress the images that you have uploaded to the library, you can use one of the following 3 great plugins.

  • EWWW Image Optimizer
    This free plugin supports pretty good image compression and supports almost all image formats. It supports you to automatically compress images when uploading or compressing directly in a library.
    Another reason you should use this plugin is that it supports you to compress the entire image on the host via the WP-CLI command, so if you are using a server using WP-CLI, please install this plugin and Go to the WordPress directory and type 'wp help ewwwio optimize' to see the instructions.
  • WP Smush
    The function of WP Smush is similar to EWWW Image Optimizer, which allows self-compression of images when uploaded and compressed directly in the library, but it is somewhat more compact and easier to use.
  • Kraken
    If you prefer to spend money to be able to compress images better, not consume a lot of server resources (due to using external services), you can use services of Kraken, support lossless or Lossy image compression options but You have to pay at least $5/month.

Reduce the image size

One thing you need to know is that an image that is too big or too heavy when uploading to a website will waste a lot of bandwidth and hard drive capacity of the server. For example, if you are not a photographer or post photos of computer candles, a photo you should post on the website should only be a maximum width of 1024px because if it is too big, the user probably would have seen it better. when they have to click on the picture and zoom in to see it all.

Conclusion

So why is image optimization on the website so important and interesting? Simply, if not optimal, you will spend more space to store, more bandwidth so you will spend more money when renting a host/server. In addition, images with a large capacity will make the page loading speed a little affected, so using the image on the website properly is also a better way to speed up the website.

-- Optimize images for website --