Thanks for your input. I was only using that image again as an example. Just curious how other people play with the settings. I’ll defiantly give you ideas a go
Generally, I‘d try and keep a full screen ‘hero’ image below 200k. That‘s not because I have a great need to impress Google, but because that image is going to be everybody’s first impression of the site — and if it is slow to load, that’s what they will remember. What one needs to do to achieve the best balance of quality and speed will depend on the image, though. And as Gary says, your example is a complex one, because it has various areas of interest rather than one obvious focus. My approach is based on the principle that if the focal point of an image is at Retina resolution, it will give the impression of the whole image being a high quality one. But that doesn‘t work for everything. Sometimes just choosing the right size and getting good compression can work better. What absolutely won’t work, though, is a pixel-perfect image in the 2.5–5mb range.
2 Likes
When rebuilding my sites over the years, I go to ESPN.com and measure the site width, then do something in that vicinity because I figure that they do their research on the best site widths of the day. Then I double for retina. My new sites are 1280 pixels wide, so the full width images are 2560 x 1440. FWIW, I save images at 3 resolutions: 3840 x 2160 (4K) for presentations, 2560 x 1440 for my sites, and 1920 x 1280 for general-purpose posting. On the site images, I use Photoshop Save for Web 4-up so I can see what the various file sizes are and make sure every file is less than 500K for better page load times.