What's Your Preferred Process for Handling Images on WP?

There are tons of websites online as well as massive retail stores/ecommerce which are able to display high quality, clear images at such small sizes. Nowadays, the average image you take with your phone is a couple MB at least in size. When you try to compress these, you have to really sacrifice the quality of the images.

For this reason, I would like to know how you guys deal with images (without using any API services or anything like that). If you are using Photoshop or Lightroom, what settings do you use and how do you ensure that even when the image is highly compressed, the quality is still retained.

Take a look at sites like Zara for example. They are able to deliver images with great quality in such a small size and I find it extremely difficult to be able to achieve the same results ):

icko11 said:

I use this

How To Compress Images Without Losing Quality On Your WordPress Site In 3 Easy Steps (2022 Guide) - ShortPixel Blog

Learn how to properly compress images without losing quality to increase the performance of your WordPress website.

shortpixel.com

Click to expand...

This looks pretty good. What does your workflow look like prior to this? Do you simply just take a picture, submit it to Shortpixel and let it handle the rest OR do you resize the image, test out different settings to find the most appealing one?

Let's look at an e-commerce store, generally, you need to maintain a consistent look in the shop page like how Amazon and stuff does it. Sometimes if you take 1 product image with your phone, another from online then you face a situation where the resolutions are different and therefore the optimizations will be different for both cases. I feel like the thumbnail images which the user sees in the /shop/ page gets affected when all your resolutions are mixed up. Not 100% sure though.

rakjelenial said:

The question is, do you want images to be compressed on the server side or on the user side?

If you want to compress images for the user side, you can use the Polish feature from Cloudflare (on-the-fly compression) $20/mo.

Code:

What does Polish do?
Polish reduces image file size by removing metadata (date and time, camera manufacturer and model, etc.), and by compressing images when possible. Smaller file sizes mean faster load times for images and web pages.

What Polish setting should I use?
Lossless: Reduce the size of image files without impacting visual quality
Remove metadata: PNG, GIF, JPEG
Lossless compression: GIF, PNG
Lossy: In addition to the features included in the Basic level, the file size of JPEG images is reduced using lossy compression, which may reduce visual quality
Lossy compression: JPEG
Serve WebP images: When the client requesting the image supports the WebP image codec, Cloudflare will serve a WebP version of the image when WebP offers a performance advantage over the original image format.
Lossy compression: JPEG
Lossless compression: GIF, PNG
Note: Large JPEG images are converted to progressive images. Visitors will see an increasingly detailed image as the file is downloaded.

If you want to compress images manually (both side), 11zon could be an option. compress image size without reducing its quality.

Image Compressor - Compress Image Size Online Free

Use image compressor tool free and reduce image size and download. It's easy to use image compressor and reduce size as you want by using this compressor.

imagecompressor.11zon.com

Click to expand...

These are both good options. That CloudFlare Polish looks fantastic but quite pricey. I think the manual option is most suitable for now. I just need to figure out the perfect settings to get a good trade-off between file size and clarity. I figured as a 'ideal' solution, Adobe Lightroom or Photoshop would be ideal but have no idea what's the best settings to apply. I assume there's more to it then simple compression if you go this route as you can apply sharpening and other techniques to rebuild the detail that get's lost with compression.

These days, the images make or break your sites visual appeal and the issue is that not all users have access to high speed internet so on ecommerce or image heavy sites, special care has to be taken to ensure the performance is excellent!

For now I doing basic compression using a tool similar to the one you suggested and converting my PNG's and JPEG's to WebP format.