About images optimization and compression

Hello

I have some doubts about optimize images. First of all, I have pictures which a high resolution and the first thing I always do is to change the resolution to 696, which is the max width I need for my purpose. Then I use some online compressor like compressor.io to reduce the file size, it reduces approximately 50 % which is great, they remain 50 kb on average.

I have read your tutorial about “how to make your site faster” but I don´t know if I have to do something else, and if I can compress much more with WP Smush.

I have checked my website in pagespeed insight and it says that I have to optimize images, specifically some thumbnails.

Thanks

Hello,

pagespeed will always pick up on some thumbnails. You can customize the theme or choose to use just some of the theme’s blocks that aren’t “responsive by themselves”.

Some blocks are designed to show in different sizes depending on the size of the screen. Those blocks will show an 300px image if the screen is 1920×1080 but if you change to a tablet, the images will be 600px, in some phones in landscape, the “standard” 696×385 image even gets upscaled to 720px. To cover all the possibilities, the theme chooses to load the 696px image, even if sometimes it will downscale it to 350px. I like this feature of the theme, keeps it beautiful across devices, but it has this cost.

If you have pages with lots of blocks/images you might consider using the small blocks only and not the MX ones.

You can also show less articles per block and use the “load more” or infinite scroll, pagespeed will pick less thumbnails.

What about image lazyload? it should work as the above, pagespeed should only pick up the first images cause it doesn’t scroll down, but I’m not sure on this one.

The other solution is to edit the theme files and make them load a small thumbnail even if the block shows big in some cases. It will upscale a small thumbnail up to 700px and it will be ugly but pagespeed will approve. You have to weight things out and compromise.

Anyway, if you consistently get 696px images of 50KB, it’s not critical I believe. I manually “smush” my photos in PS, I don’t usually compress as much as you seem to compress and it still seems an acceptable compromise between performance/graphics. But soon I’ll move to something like WP smush because I’m getting authors/contributors.

Cheers!

Hello

I am sorry for the delay in my reply, but I needed to check before some things related with this topic.

I don´t know exactly what are the blocks that are not responsive by themselves. In my case, I use block 18 (just big picture), block 2, block 16 and block 7. I notice that each picture I upload for posts, automatically are generated 6 more with these resolutions: (696×385) (324×160) (300×200) (218×150) (150×150) (100×70).

I have never used image lazyload, I have to check to see how it works. In my case, I will try to see how I can place some articles or making some movements, it´s a good recommendation. I will take this into account.

I have seen that pictures I upload don´t have (696×385) exactly, I used to reduce just width but not height, and I suppose that it is the reason why theme generates this thumbnail, which it has even more size that my uploaded picture. So, if I upload pictures exactly (696×385), I suppose that theme take this one and it doesn´t generate another one, saving space on server.

I will try to use WP Smush and see how it works, maybe I could reduce time instead of compressing pictures manually.

If I use this tutorial code instead of using WP Smush, does it have the same results?

add_filter( ‘jpeg_quality’, create_function(”, ‘return 50;’ ) );

Thank you

The add filter function only changes the default WordPress compression for thumbnails created from the main file you upload, and any enlarged/smaller version — it will not optimize the original image you upload. That is best done prior to upload using something like Photoshop, GIMP, or any other image application — or compression tool. Ideally best to “create” your original images as optimized — e.g., in Photoshop, start with “save as web” quality factor of 22 with a blur of .01 — for any image with a lot of red you need to do quality factor in PSHOP as 52. Some images with people you can get away with 32.

Best to optimize the original jpeg you upload when created/sized — problem with many “reprocessors” (including mod_paghespeed) is that a same-size jpeg of a jpeg increases the artifacts of compression.

Not sure that helps … but food for thought 🙂

What I do:
* original images > optimized/sized when first uploaded
* WP compression level set to 50 – as per functions.php fix, and this makes great thumbs for desktop/iOS
* With thumbnail upscale plugin, with some minor enlargements (e.g., 500x to 600x), perfectly fine.

Avoid the Jetpack image thing — totally sucks !

🙂

Hello

Ok, I understand. It´s good to know these kind of thinks. I thought this code previously mentioned had the same function. I will try to do the way you have said to me with GIMP for example, which is the editor I usually use.

What do you refer exactly with WP compression level set to 50?

I don´t use jetpack at this moment, so there is no problem with this.

Thanks

This filter added to functions.php changes default WordPress jpeg compression from “90” to “50” … so, all those little thumbnails built by WP for blocks/modules are better compressed

add_filter( ‘jpeg_quality’, create_function(”, ‘return 50;’ ) );

the ’50’ in there refers to compression level, but not actually 50% — just the quality factor level on a scale of 1-10 as determined by WordPress — which uses GDlib/imagemagick to render new image files from what you upload.

Hello

Well ok, but what´s the difference between WP Smush and this code? Do you recommend to me using this code in order to reduce the size of my thumbnails?

Thanks

Google is great place to look up this stuff which is not theme related