Optimizing images with Hummingbird

Hello!

Many pictures do not get optimized due to an error. As a result, I receive a very low score on image optimization. All these pictures are .PNGs used for buttons and created by our designers in PS.

Any ideas why Hummingbird cannot optimize them? And what would be the optimal solution in this case?

Here is also the screenshot to the report in the dashboard: http://prntscr.com/emnzxs

And the actual links:
https://www.studentsforliberty.org/wp-content/uploads/2015/01/buttons_ReadOurHover.png

https://www.studentsforliberty.org/wp-content/uploads/2017/02/COVER_01-960x750.png

Thank you.

  • Denitsa

    Hello Jan Skapa,
    I hope you are having an awesome day!

    You second link gives me a 403 Forbidden error so I'm unable to open it.

    Humminbird itself isn't an image optimization plugin, it just shows stats for optimization as would Google PageSpeed for example. Our WP Smush Pro is the one that does that (https://premium.wpmudev.org/project/wp-smush-pro/#usage).

    Compressing and resizing - This shows that the images are most likely resized via HTML and CSS. That means your theme is loading images larger than it's HTML holder and it's not something smush can usually deal with.

    This being said, what are your settings under Media -> WP Smush?

    Keep us posted!

    Kind regards,
    Denitsa

  • Sajid

    Hello Jan Skapa,
    Hope you are doing good today :slight_smile:

    Thanks for sharing the screenshot of settings. Please note that, these are thumbnails, small cropped/resized versions of original images. But the problem here is with original full sized images instead of thumbnails.

    You can smush and optimize original images too with WP Smush Pro plugin.

    But, I am afraid, you can not resize these images with WP Smush pro. I mean, you can do it with WP Smush but in this specific case you can not. The reason is that, the required size here is 255 x 70 pixels. That is really low, so if you do it from Dashboard -> Media -> WP Smush -> Settings -> Resize original images. It will resize all images in your media library to that size and you can imagine what would happen afterwards.

    So the best way to do this is by resizing/scaling these images individually via WordPress image editing (see Resizing section) or ask your developer, crop these images and upload back to server.

    The required size of image is 255 x 79 in pixels.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

  • Denitsa

    Hey there Jan Skapa,

    You are right the thumbnails would be different according to the screen size.

    You can view this (it will vary according to the window size) by using the Inspect element option in Firefox or Chrome (right click on the page, then choose Inspect and choose the element you want to view). Then you hover over the image you'll see the size it's forced to as well as the original size:

    That's when you might need to ask your theme's developer to jump in, since the theme code is written in the way to call the larger image.

    I hope this makes sense! Let us know if we can help you in this or other questions!

    All the best,
    Denitsa