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.