Episode 128 – Why Your Images Look Different On The Web

Transcription was done by Rev.com, using their AI (artificial intellegence) generated transcript. The transcript may contain spelling, grammar, and other errors, and is not a substitute for watching the video or listening to the episode.

Welcome to episode 128. My name is Scott Wyden Kivowitz. Today I've got an answer for a common question that I'm not sure why I haven't addressed on this podcast before. There is an issue that happens that happens, whether you, I have a WordPress website or a website on Squarespace or show it or Wix or Weebly or anywhere, including SmugMug, then folio and ShootProof and pixie set, and you name it. They've got this issue and we're going to talk about how to solve that de-saturated thumbnail. Look now. So I've got from an image, the customer, the question was how come the thumbnail images have less saturated colors than the original image that comes up, click the thumbnail. And that's a great question. And there's basically two reasons why this might happen. Now. One of the reasons is universal. As I just mentioned, the other reason is more specific to WordPress than anything else, but there are, there are some cases in some content management solutions where this second option here will actually be a factor in this question.

The first the universal answer is this. If your images are not using the SRG B color profile before uploading, for example, if you edit your work in Lightroom, in Photoshop, in on one, in, in Luminar in affinity photo, whenever you use, if you edit your work in pro photo RGB color profile in Adobe RGB, color profile, whatever, and you export it, export it, or upload it to your website with those color profiles, then the colors will look quite different when you upload them. You see this because SRG RGB, the color profile, SRG B, which has less colors in it than pro photo RGB and Adobe RGB, or even a custom color profile. SRG B is required for anything on the web, because that is what your display, your monitors actually will show. That's what it will use. Yes, or a new monitors that can actually display a wider range of colors, but mainly they're an SRG B color profile.

So with that said, you need to make sure that before you export, you're actually exporting with a converted ready. And sadly, when you go to do that, you might want to look at your photos of how they will look in SRG B. Now, if you're inside of Lightroom, there was actually an easy way for you to do this for your website. You've got your photos in a, let's say it's a collection, okay? And this collection is all of your wedding photography, and it's all edited. We're going to use pro photo RGB just to keep it simple. You're doing all of your edits in pro photo RGB, and now it's time for you to make, to export and to upload this to your website. For what you're going to do is make a duplicate collection. You're going to make a new collection, let's call it wedding for upload.

And you're going to actually make virtual copies of all of those photos in that one collection. And you're gonna put all of those virtual copies in that new collection. Then you're going to go into edit each of those photos and change the color profile to SRDB for those virtual copies, doing so means you're now going to see the exact colors of what you will see when you upload the photos. There you go. Now it's of course important for you to color calibrate your monitors. I personally use a color monkey to do this, but there's a ton of options out there in a bunch of different price ranges for any budget level, but it's important for you to color calibrate your monitor because otherwise you won't get the most accurate color rendering of what you'll see on the web, on different devices. If your monitors itself are not color calibrated, this is even more important for people like me who have a colored efficiency or colorblindness that they have to worry about too.

Okay? So that is the first universal reason why your thumbnails might be de-saturated compared to other images. The second reason would be if you're using image compression at all, WordPress itself does have image compression, which you can actually turn off by uploading and installing a plug-in that disables, the built in WordPress compression. I recommend doing that. It's a very simple, lightweight plugin that uses one tiny script of code. And it's important to do this. If you're going to be using a third party image compression plugin. Okay. And the reason why you should do this is because the compression that WordPress is doing is not ideal for photography. Okay. It's overly compressed a lot. Now, if you're using next gen gallery, which is a gallery plugin that we make at Imagely, then w next a gallery actually offers image compression built in to the free plugin while resizing images for front end display.

Now, this is important for proofing, and this is important for e-commerce because we're backing up your original file and resizing or image for front end display. I've done podcast episodes on this. I've got blog articles on this and documentation on this. But this is very important because Imagely will give you the option to compress the thumbnail images and the resized images on upload by recent, when it resizes, it it'll make a copy of the original compress it, and you can have that a hundred percent where you could reduce it. If you reduce it, you're going to start seeing quality loss, color loss. All right, now I'm going to link to a documentation in the show notes. For this episode, I'm going to link to a documentation page all on this topic on resizing images. And you'll see that setting in nextgen gallery.

If you're going to use a third-party plugin, which I'm gonna talk about next, then leave that in action gallery, leave it to a hundred percent. So next gen gallery does not compress your images. Leave it to a third-party plugin who specializes in that feature. If you are using a third party plugin, then it might be a matter of playing around with different compression settings. Short pixel and image of fi are incredible plugins and both offer three levels of compression you can pick from, so play around with the different options. Okay. We've got a full article, which again, I'll link to in the show notes for this episode, that is comparing all the top image compression plugins out there for WordPress. Now, I mentioned earlier that this might be something outside of WordPress as well. There are other content management solutions that are open source. Things like ghost with are a lot of different solutions that offer plugins that you can integrate with.

I hope that helps you, right? I hope that helps you narrow down why your images might look different than you expected. Okay? It's not always the fault of a plugin. It's not always the fault of the software you're using. It's just a matter of really looking at and realizing, Oh, maybe I should have gone with this option. Or maybe I should think about what is best for web versus what's best for me to edit for my clients and for print, right? Because print is different than web, very different. In fact, I might even say in some cases, and I do this for my own work, many times it's Oxy edit in SRG B and actually print based on that, because the only thing that'll happen is in many cases, the print will come out more vibrant, not more saturated, but more vibrant than it would if you sort of reverse that, right?

It's not the end of the world. If you edit your photos and SRG B and just work in that, it's not ideal for everybody. My clients have not complained. Most clients probably won't even tell a difference to be perfectly honest. We as photographers, we see a difference and it might bug us, but it won't bug your client. Think about that. Maybe do some tests of that as well before you consider doing that for clients, but there's a solution there for you too. So I hope that helps if you find that you're having this issue. And none of what I talked about is in play. If you're an imagery customer, please just open a support ticket with our team to help troubleshoot it. Otherwise if you're not using an image, the product contact, whoever is involved, if you're a Squarespace customer, contact Squarespace, if you're a photo shelter, customer contact, photo, shelter, whatever it is, wherever you're paying for your service, she'll be able to help troubleshoot wire images. Don't look like they do in Lightroom or capture one or whatever you're using. Right? So thank you for watching. Thank you for listening and do check out the show notes and all the links that I mentioned. Go to imagely.com/podcast/128. And we'll see you in the next episode.