Hummingbird Optimize Image Settings to strict?.....

I'm trying to get a clean sweep of green lights in my hub. The only one I always seem to struggle with is performance. And this is always because of a low optimise images score in hummingbird. I am super smashing my images.

However I always have images which need further compression.

This would save a grand total of 250KiB.Yet my score is only 47!! This seems a little over the top?

Would it be possible to have an ignore button to ignore images when you don't want to compress any further to save a handful of KiB? Or an option to fine tune the individual images flagged with-in wordpress, without having to download recompress, re-upload and re-link?

Thanks again

Dan

  • Bojan Radonic

    Hey there JazzyDan,

    Hope you're well today

    Would it be possible to have an ignore button to ignore images when you don't want to compress any further to save a handful of KiB? Or an option to fine tune the individual images flagged with-in wordpress, without having to download recompress, re-upload and re-link?

    There is no way to skip/ignore images out of a box and I'd strongly advise on handling these so you can improve your score.

    With regards to the report messages that you're getting please note that Hummingbird speed test has two reports for image optimization.

    1. Losslessly compressing - This one's is telling that image can be optimized and that's what smushing does.

    2. Compressing and resizing - This shows that the images are resized via HTML and CSS

    The second one is what's shown in your results and that's because your theme is loading images larger than it's HTML holder, for example 600x400 thumbnails on your home page (your latest posts) but the actual HTML holder of that image is 347x231 so the image is resized with CSS to fit in that holder. Please see screenshot:

    Unfortunately this is not something Smush can deal with since the theme code is written in the way to call the larger image, and even though the image is compressed google doesn't like loading image larger than its holder, so this is something you need to check with the theme devs.

    Or an option to fine tune the individual images flagged with-in wordpress, without having to download recompress, re-upload and re-link?

    if you disable "Smush on upload" you can upload your images and re smush them individually within your Media library. In this specific case this won't help as it's not the original image that is being used but rather an image thumbnail created within your theme.

    Hope this makes sense, if you have additional questions please let me know

    Cheers,
    Bojan

  • JazzyDan

    I think the images are lager than the containers, as they will scale to different sizes dependent on the size of your browser or device. For example when you reduce your browser enough that the images flow in to 1 column, the image will enlarge to fill that space. How do I account for that?

    It would still be nice if this score for optimise images didn't brutally effect the performance indicate in the hub so dramatically? There must be many themes which handle images in this way?

    Excuse my ignorance if I'm way off the mark/point here. Steep learning curve for me right now.

  • Bojan Radonic

    Hey JazzyDan,

    I think the images are lager than the containers, as they will scale to different sizes dependent on the size of your browser or device. For example when you reduce your browser enough that the images flow in to 1 column, the image will enlarge to fill that space. How do I account for that?

    I've checked those specific images on smaller resolutions and they do get slightly larger (364x243)

    So what we could do is make them slightly larger than what's on desktop screens so it matches the size of the mobile ones.

    It would still be nice if this score for optimise images didn't brutally effect the performance indicate in the hub so dramatically? There must be many themes which handle images in this way?

    It's the way Google does ranking, these images are not too big, or much bigger than they are supposed to be so performance wise this won't be a huge impact on your site loading speed. However fixing this should improve your score slightly.

    So what needs to be done to fix this is wherever this image size is being created (I'd assume it's coming from your theme using add_image_size funciton, most likely in your theme functions.php) you need to reduce that image size and then use plugin such as https://wordpress.org/plugins/regenerate-thumbnails/ that will create those new thumbnails (with new image size) for you without having to reupload those images.

    If you're unsure on how to do that I'd strongly suggest contacting theme developers and checking what would be the best way to do that

    Hope this helps

    Cheers,
    Bojan