Confused on Image Files Sizes

prodport
prodport Member Posts: 3 ✭
in General

I'm in the process of redoing my WordPress category pages. I've got a GeneratePress loop template that pulls in the post's featured image. For my test, I uploaded an unoptimized JPG image. (770k)

The template shows the title, post excerpt, and an image that is 320 px wide. If I use the Cloudinary Media Inspector, it shows:

Original Dimensions: 1922 x 1034

Display Dimensions: 320 x 172

content-length : 217.84k

My image URL is using f_auto,q_60

This image size of 217k won't work if I have 10 images per category page. It's way too heavy.

I then decided to do a transition and create a new asset that is 320 pixels wide. That JPG is 14K.

So, why are the file sizes so different? Shouldn't the one the template pulls be the same as the one where I scaled the image?

Tagged:

Answers

  • matt_griffiths
    matt_griffiths Member, Cloudinary Staff Posts: 1
    edited September 2023

    hi @prodport

    It sounds like the first image is being resized in the browser, so even though it is displayed as 320px the image is actually 1922px wide. To have Cloudinary resize the image you can add the w_ parameter, so the transformation would be f_auto,q_60,w_320 to return an image that is 320px wide.

    I would also suggest that you use q_auto instead of q_60, this will allow Cloudinary to determine the best quality setting for the specific asset. You can see more information about q_auto here: https://cloudinary.com/documentation/image_optimization#automatic_quality_selection_q_auto

    Hope that helps,

    Thanks

    Matt

  • prodport
    prodport Member Posts: 3 ✭

    Hi Matt,

    I'm looking through the block settings to see my options. I know I can't put the smaller image for the featured image. It's used in other places. I did play around with q_auto but the file size was up to 400k.

    If I understand, the plugin isn't using my image container size (320 px), but the viewport size. In other words, I've got responsive images enabled in the WordPress plugin with a max images of 10 and a breakpoint distance of 200 px. But one of those images won't be used unless I shrink my browser down.

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 151

    Hi @prodport .

    Thanks for the additional info. I think the best thing to do from here would be to raise a support ticket with us which includes an export of your WordPress system report (instructions available here) so we can take a look further. It may also be helpful to provide us with access to your environment so we can look further, but we can discuss that in the ticket if required.

    Kind regards,

    -Danny

  • prodport
    prodport Member Posts: 3 ✭

    I think I figured out a way. The image is a block element and I found a settings area. By default, the image size was "Full" and there were no options for WIDTH and OBJECT-FIT. I changed to a medium-sized image, 320px, and contain.

    The medium image size is 300 px so the browser is scaling up a bit. I may decide to create a new image size, but I'll wait till I decide I like the current layout.


    element-block-image.jpg


  • tia
    tia Member, Cloudinary Staff Posts: 29

    Hi there,

    Sounds good. I'm glad you got it working. Let us know if you need anything.

    Kind regards,

    Tia

Categories