Recommended Image Sizes For Patterns?

Is there any documentation out there that lists recommended image sizes for the WordPress Patterns? I’m most interested in the Call to Action and Banner patterns.

Which pattern are you working on exactly, the images would differ depending on how the content is displayed on each pattern. I couldn’t find an article you can use to see the image size but maybe the article below might be helpful:
https://www.wpbeginner.com/beginners-guide/wordpress-image-sizes-beginners-guide/

Hi @thelmachido,

I’m not working with a specific pattern yet, just preparing to do so on a site I’m converting to TT3 which will use several of them.

I actually saw that article when I was searching. It really doesn’t address full-width pattern block images, and the largest it discusses that I saw is 1200 x 675. I think that will work in most of the patterns I’ve previewed, but some will be larger than that on the crazy high resolution monitors, I believe.

If I use WEBP images, I can probably get away with using something a little larger, just in case.

I may be overthinking this. : )

Hey @linux4me2,

the largest it discusses that I saw is 1200 x 675. I think that will work in most of the patterns I’ve previewed, but some will be larger than that on the crazy high resolution monitors, I believe.

I can probably get away with using something a little larger, just in case.

Not overthinking it at all – it’s definitely worth considering.

You’re correct about larger monitors – it’s true that full width patterns on larger screens could be displaying images at quite large resolutions. At the same time – I wouldn’t particularly recommend loading huge images just to accomodate those instances.

With image size – it’s always a little bit of a tradeoff between resolution (so it looks crips on larger screens) and file size (so the images load quickly, and don’t take user’s bandwidth).

As a rule of thumb I would say you could consider something like this:

• For patterns/block which are going to be content width or ‘wide’ width – 1200px is probably great.
• For patterns/blocks which are going to be full width – you could go up to something like 1800px wide – but i’d find a balance between that resolution, and the file size ??

Please let me know if I can clarify at all.

Hi @jordesign

As much as I like these block patterns, I kind of miss the days when a theme included recommendations for image sizes.

As a rule of thumb I would say you could consider something like this:

• For patterns/block which are going to be content width or ‘wide’ width – 1200px is probably great.
• For patterns/blocks which are going to be full width – you could go up to something like 1800px wide – but i’d find a balance between that resolution, and the file size ??

That’s really helpful. I think what I’ll have to do is take it on a pattern-by-pattern basis, and maybe do some Pagespeed testing with different image/file sizes to see what I can manage.

Hi @linux4me2 – that sounds like a great plan. You could generally stick to those values – but then test and adjust depending on the results you get.

If your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

If your question has been answered, we would love if you would mark this topic as resolved in the sidebar.

Thanks @jordesign, already marked it as resolved.