I am finally being forced to upgrade my TTG pre-CE through CE4 websites. So, kicking and screaming I am making the move with Backlight 3 and starting from scratch. I had Backlight 1 upgraded to Backlight 2 but never invested the time because what I had works. However, the hate mail from Google about my site is increasing. One of the problems (as they see it) is some of the images are too big but they never point out the offending page or image. I am pretty sure I do not have anything more than 1020px wide and everything seems to scale down on mobile devices.
My question is what are the recommended image sizes? I want to make them large enough to display a quality image, but small enough so they load fast.
I am binge designing my new site and have read the documentation, watched all the videos and have read a lot of the forum but have not found (or I just missed, which is entirely possible) this information.
Thanks in advance!
I use 1200px images. they seem to look fine on desktop and mobile.
I don’t have a Retina monitor though so I don’t know how they look on one of those.
I’ve been exporting at 2048-pixels on the long edge for Web, but dimensions are only one part of it. The other is compression.
If you’re publishing images from Lightroom, then I strongly advise reading through Jeffrey Friedl’s An Analysis of Lightroom JPEG Export Quality Settings. What you should take away from it is that there’s a point where image sizes begin to expand enormously while offering little or no discernible improvement to image quality. I tend to favor the 70-76 quality tier, though you might be able to get away with the 77-84 tier. Anything more than that, I think, is foolish.
Jeffrey also recently released a JPEG Export Quality Tester Lightroom plugin, that might be worth checking out.
I do not use Lightroom any longer, and so I export images to my desktop, I run them through JPEGmini’s compression, then I upload them directly to Backlight. JPEGmini is paid software, but you could also try out the free ImageOptim as an alternative.
Once you find a combination of dimensions and compression that works for you, then you should be in good shape. It’s worth stating plainly, though, that neither Lightroom, nor Photoshop’s “Export for Web”, give you best-in-class compression, even when carefully managing the Quality slider. I’ve always found that JPEGmini can shave off quite a bit of the file size even on those files.
Thank you for your input. From day 1 with Lightroom (I was a beta tester before its release) my quality setting for the web output has been in the 75 to 79 range as a compromise with quality and compression. I did not see Jeffrey Fried’s article at the time but recall reading a number of articles along those lines’ way back when, which is why I have never output anything for the web at 100% quality setting.
I do not expect the highest quality on the web as most people do not have properly calibrated monitors to do high quality images justice. Some do not even come close and just use the default settings out of the box. I occasionally send out stepped brightness test patterns when someone tells me my images are too dark or too light. They are usually surprised that they were that far off, “I didn’t know you could make adjustments to the brightness”.
I am going to date myself, but my online activities started out dial-up with a 300 baud modem, so I definitely l keep file size in the mix. After the recent nastygrams from Google about my web image sizes, I was wondering what is recommended and what others are doing. One of Googles suggestions was to use the JPEG 2000 format. (don’t think so) A quick look at what I have posted shows images in the 100k to 170k range on the old site I am redoing now.
Like I said everything was fine until the last 6 months or so. After I convert my sites to BL 3, if I still have a problem, I will go to plan B and look at image compression algorithms. I downloaded JPEGmini and will look into that further.
On a side note upgrading to BL 3 from the CE plugins is going much better than I anticipated. The learning curve is not as steep as I expected. Still kicking but not screaming as much. I hope to make my site live in the next day or so and then dive into CSS modifications.
Thanks for your thoughts and time, it is greatly appreciated!
Glad to hear you’re having a better time than expected. We’ve made great strides in usability with Backlight, not least of which by ejecting from Lightroom’s Web module.
For Google’s performance checks, it’s also with keeping context in mind. None of the page speed, etc. tests that I’ve seen are built for image galleries. They’re designed for basic web pages, which are largely text-based, with maybe some smallish inline images, and adorned with various banners, ad blocks, UI images, etc.
Image galleries are sort of an outlier circumstance, and will often score poorly for image size because that’s the nature of the beast. As a norm, we publish images of unusual size and quality, because that’s the point. We publish images in greater volume than one would ever find on a typical web page, let alone on a typical site.
So it’s usually good practice to ignore what Google says about your images, and go instead with your own best judgement. When you point Google at any non-album page in Backlight, you’ll see that pages generally score very well for SEO, page speed, etc. When you point it at an album with 100 large images, it should be only the images that are weighing things down. That’s to be expected, and we also mitigate that weight using lazy-loading.
I just downloaded three images from one of the TTG demo galleries, and they range in size between 130K - 350K, at 2048px on the long edge. I’m okay with those numbers. Those images were uploaded directly to Backlight (not using Lightroom), and I probably ran the master renditions through JPEGmini. But then Backlight also generates its own renditions from those masters as needed, so the gallery may or may not be using the uploaded masters. Ben might be able to say more about Backlight’s handling of compression when creating renditions.
Thanks for your perspective. I will have to get into those details later
.
I had just finished up the basics of my first Backlight site (a headshot specialty site now live) and was looking forward to diving into CSS and a number of tweaks when the phone rang. I was told by a potential client that none of my gallery links on my main web site (Pre CE to CE4) were not were working and they could not see any of the images. A quick check confirmed the none of auto-indexes were working. I guessed the problem was a PHP version change by my soon to be former host Network Solutions. Changing out the PHP to older versions did not help, I suspect they did something else, but of course they would not own up to it. I started putting hard links inline on some of the pages so at least some of the galleries would work. I then realized that it would be faster just do an entire web site in BL 3. I had planned on this doing anyway, although I was hoping I could take my time as there is 3 months left on my contract with NS. When it rains it pours!