We don't actually recommend uploading images larger than 1200px, but made a point of using oversized images below to take this to the extreme as a demonstration.
There's some commonly circulating advice that images should be "pre optimized" and uploaded at a certain dimension and file size for pagespeed, usually 250kb.
This has been misconstrued to mean that you should upload as small as possible, which causes later problems when updating or changing themes. Sometimes, entire posts have to be re-shot because the previous images won't work on a modern theme.
Exporting your images at the correct size with compression (eg. 80% quality) is still a best practice, but the practice of uploading exact-match content width (600px, 680px or 720px) is dead.
We can now upload our images at 1200px to future-proof our content without worrying about pagespeed. To accomplish this, we need:
- the Feast Plugin to register the correct image thumbnails, which WordPress uses to generate thumbnail sizes and serve via srcset
- Shortpixel to optimize these thumbnail images
- WP Rocket to lazyload these images, rather than loading on initial page load
- a theme that uses WordPress core image output functions, like the ones from Feast Design Co.
But don't take my word for it. Let's test it on this page.
Jump to:
Testing
Here's the pagespeed score before adding any images:
And here's a great big honking unoptimized, uncompressed 3840x5760 image, inserted at "full size":
Photo credit Brooke Lark from Unsplash
Here's the image re-uploaded at 1200px width with basic optimization (85% quality in GIMP) inserted at "full size":
And here's the image re-uploaded at 720px (100% content width) with basic optimization (75% quality in GIMP) inserted at "full size":
And here's the pagespeed score with all 3 of these images now on the page:
How does it work?
Recap from above:
- the Feast Plugin registers the correct image thumbnails, which WordPress uses to generate thumbnail sizes and serve via srcset
- Shortpixel optimizes these thumbnail images
- WP Rocket lazyloads these images, rather than loading on initial page load
This thumbnails and srcset looks like this:
The 134-kb 720px image will be used for 720px width display.
The 44-kb 360px image will be used for 360px width display.
The 180px image may be used on half-width images on 360px screens. We may need to further enhance this using the sizes attribute, but this will require further testing + development.
The 800 and 600 width images are built into WordPress core and could actually be removed. We haven't done any testing for this.
Recommended upload size
We recommend 1200px because it provides some room for "future proofing". The current content width is 720px on desktop with a sidebar, and just under 1200px full width including the sidebar.
We don't know what the future holds, and it's entirely possible that your images will be viewed through ultra-HD VR glasses in 10 years.
Or be displayed on full-counter-top-width interactive screens in your kitchen.
Remember: 80% of pageviews for most food blogs come from mobile, which displays content at 360px width. This is your primary concern.
Screen pixel density
Many (most?) modern devices use screens with a pixel density of "2x". How this gets applied by browsers is confusing, and varies between browsers. However, the 1200px width uploads will impact this.
Even though we've specified that in-post images will display at 720px, the browser (at least Chrome) will still attempt to download the largest size, up to 2x - which would be 1440px.
Since we have a 1200px width image, the browser (Chrome) will preferentially grab this image and insert it into desktop displays for the highest quality user experience. This means that you'll end up using more bandwidth than if you had uploaded at 720px. Generally, bandwidth isn't a limiting factor for food blogs, so this isn't too crucial.
With lazyloading enabled, this should have no impact on pagespeed.
Thanks to Ben Myrhe and Andrew @ Nerdpress for digging into this.
One possible solution for sites struggling with image files (200 GB+) is WP Offload Media, however this requires careful technical configuration and introduces other technical considerations. We do not currently recommend or support this approach.
Server file size
It's worth noting that while uploading large images and inserting them at "full size" has no impact on pagespeed thanks to the the thumbnails, shortpixel and WP Rocket, they will still take up disk space on your server.
That's the only thing holding you back from uploading 3000px images: you would need to upgrade your server. Not that we recommend it.
Generating those thumbnails also consumes CPU + ram, which temporarily slows your servers while they're built and saved to your disk. This is usually temporary and shouldn't have long-term consequences, unless you're already pushing your server to its limits.
So CPU usage isn't a huge problem, but disk space and backup file size would be.
This ultimately comes down to the fact that you'd just have to throw money at the problem.
WordPress upload optimization
A version of WordPress released last year added code to automatically resize any image to maximum 2560 pixels as the longest dimensions. We recommend using the disable big images threshold plugin to disable this functionality due to unknown consequences.
Andrew Wilder says
Skylar Bowker I think this new blanket recommendation in this post is likely to confuse people even more, and cause problems for them down the road.
1. Just because ~80% traffic is mobile on most food blogs doesn't mean that this applies to all food blogs, and it certainly doesn't apply to all websites. And that still means at least ~20% traffic is on desktop. Very large "Full size" images *will* be served on desktop devices (and likely on tablet devices, which may be using a slower mobile connection).
2. Not all sites use the Feast themes or plugin, and your advice in this post may only apply to those users.
3. Some themes may not apply image srcset properly.
4. Having large files does indeed take up more server space -- this isn't just a "upgrade your hosting" problem. This can also cause issues with backups taking too long and timing out. We see this A LOT.
5. Uploading larger files takes significantly longer. It's faster to export at a correct size, and then upload that, than to wait to upload a very large image.
6. Larger images also take longer to process by Shortpixel and Imagify.
7. Imagify charges per KB, not per file, so that will increase your processing costs if using that plugin.
8. And this is the most important - I've found that if you optimize properly exported images at 1200px, with the quality setting to be where you need to it be at approx. 250kb, the final files -- including the thumbnails -- that are optimized by Shortpixel will be smaller.
9. I use 250kb as a guideline, and I always qualify it with "around" or "approx." That's not a hard and fast rule, by any means.
10. You're assuming people are using WP Rocket and Shortpixel (both are premium/paid add ons), AND have them correctly configured (e.g., with Lazy Loading enabled, and not on "Lossless" mode).. You're also assuming that WP Rocket's lazy loading is working properly, and there are no plugins installed that are causing a conflict there. In my experience, most people do not know how to properly configure these tools.
Skylar Bowker says
There are some good points here Andrew. I think I pre-qualified the post with some of these already, but I've edited it to clarify it further. It looks like it reads different than I intended.
I'll dive deeper into #1 since this wasn't what we saw during testing, but I may have been looking into it wrong.
Are you able to put together a post/tutorial on correctly exporting images from photoshop/lightroom prior to uploading? This is something we haven't touched on as it's outside the scope of themes.
caitlin says
Hi Skylar,
I'm using the Cook'd Pro theme and was just wondering if you could simplify the image uploading size. Once I have my final edited image should I crop it in something like canva to make it 800 x 1200px?
Just trying to work out the best way to crop my images before uploading. I see so many food bloggers using different image sizes and get confused with the pixels vs intrinsic pixels when inspecting other blog pages.
For the homepage do you think it is better to have do you think it is better to have square or vertical images? I don't have the feast plugin so should I crop the images to a different px size for the thumbnail?
I hope I have made sense! Thank you so much for your support pages 🙂
Skylar Bowker says
All images should be uploaded at 1200px width (height doesn't matter): https://feastdesignco.com/modern-post-image-sizes/
Featured images should be 1200x1200: https://feastdesignco.com/modern-thumbnails/
Laura says
What do we do if we had been uploading all of our images 680px in width to fit the theme for years? 🙂
Skylar Bowker says
Start uploading your in-content images at 1200px width moving forward 🙂
Abby says
Hey Skylar,
My question is in regards to the visual size of the images you used as examples. Why do they all appear the same size within the blog content even though they are of different px dimensions?
I'm asking because when I upload a 1200x1600 image within my blog post it looks huge and takes up way too much screen space. Is there a way you're adjusting the size appearance within WordPress or is this dependent on the theme a site is using?
Skylar says
The theme is encoded to contain image sizes to the content (720px desktop, 360px mobile) to avoid "content wider than screen" errors in Google Search Console. This is also an accessibility issue, as anything that stretches off the screen becomes unviewable. It also just looks terrible to have images stretch wider than the content.
I'm not sure what you're talking about with the 1200x1600 image - it should be constrained to the content width. If it's not, please submit a support ticket.
Lilian says
Hi Skylar!
I have a question... You said we should use our images "full size". Okay.
Now, at the end of my posts, I usually add a "columns" gutenberg block and I insert an image on each, to show more recipes people may like... I also use columns with images to show step by step process sometimes. For those, I feel like they don't need to be full size. Can I set them to thumbnail size? Would this interfere with the speed of my page, or something else?
Thanks!!
Lilian
Skylar says
I'd recommend using the FSRI block instead of columns+images: https://feastdesignco.com/fsri-block/
Lilian says
Perfect! I'll try that. Thank you so much!
Lilian says
Where can I find the post id, so I can choose which recipes to feature in the fsri block?
Thanks!
Skylar says
https://feastdesignco.com/modern-homepage/#5-trending-recipes
Lilian says
Perfect! Thank you so much!
Dave Martin says
Hi,
I need to improve the CLS of my site and have read that adding image size attributes to the image can help with reducing the page shift.
Is it recommended to add the "width" and "height" attribute to image's html? And if so, what sizes should be used? I upload images to WordPress at 1200x1798, but I understand that is not how they are displayed on desktop, tablet and mobile.
Also, will adding the size attribute override any responsiveness to the screen being viewed on?
Many thanks.