Showing Small Versions of Featured Image

  • Resolved ajwe

    (@ajwe)


    11 months ago

    In several parts of an old site I’m rebuilding (using the block editor & Twenty-Twenty-Four), I have a Query Loop Block where I want to show a Featured Image and the post title for some number of posts. The images I’ve been uploading have been roughly 1200×1200 pixels, but I’d like to show much smaller versions of the images (say, 200×200).

    I can style the Featured Image block to have a content size of 200×200 (with “Original” aspect ratio and a scale of “Contain”), but this apparently still causes the original 1200×1200 image to be sent and scaled on the browser side. Because my query loop might pull out a dozen posts (& a dozen featured images), this seems bandwidth-inefficient. I’m not certain the large image is being sent, but when inspecting one image element in my browser, Chrome tells me: Rendered size: 200×200, Intrinsic size: 1200×1200, File size: 385kB. (Also, if I ‘Open image in new tab’, I get the full size image).

    I can’t seem to find a way to cause one of the scaled down versions of the featured image to be used instead. I feel like I’m probably missing something simple here… Is there an easy way to do this? Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kavya Gokul (a11n)

    (@properlypurple)

    Hi @ajwe! Have you taken a look at the ‘Resolution’ option under ‘Dimension’ settings for the featured image block? The screenshots below show where to find this option:

    Thread Starter ajwe

    (@ajwe)

    Ah, thanks so much! I had never noticed that option (D’oh!) and that did the trick.

    Gin

    (@rawdolphe)

    Hi, I hope you don’t mind me asking — just didn’t want to create a new post as my questions is related.

    I can’t see a way to change the Featured Image <span style=”text-decoration: underline;”>resolution</span> in the Single Posts Template, it seems that it can only be changed when inside the Query Loop?

    It’s quite annoying because the Featured Image in Single Posts <span style=”text-decoration: underline;”>defaults to the large size</span>, in my case 1200px. <span style=”text-decoration: underline;”>Same issue with the Cover Block</span> — as you might not always want the Cover Block to be full screen / full res.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Showing Small Versions of Featured Image’ is closed to new replies.