I get a lot of questions from photographers about how their images look on their websites. There are lots of variables as to how images are displayed on the web. I won’t go into great detail about that in this blog post but a few include the type of hosting, how your website has been developed, your internet speed, the device you are using, your monitor, and how your images were prepared for viewing on the web.
For the purposes of this post, I am talking about preparation for the web and your monitor. Depending on the type of monitor you are using, the calibration of that monitor, and how that monitor has been made, your images may look different, i.e., grainy and/or pixelated.
I recently had an issue where I was working with a theme and I thought the color was Lavender but it was actually Taupe. I asked several people in a few groups to look at the same theme and they all saw Taupe. I went to my local OfficeMax where they had one computer hooked up to 6 different monitors. Guess what? Four monitors displayed Taupe, the other 2 displayed Lavender. Yep, and I had witnesses! I wasn’t crazy after all!
You can see the same behavior with images, too. I went back to OfficeMax and guess what – some of the images looked grainy and on others they looked crisp and clear. The people in OfficeMax were watching me shake and scratch my head.
At this point the only recommendation I’ve been able to come up with is that you follow the instructions by Adobe for choosing efficient export options for the web. That’s really the starting point to all of this.
Watch the Adobe video, configure your settings as they indicate and see if you experience the same problem. If you do, then maybe it’s your monitor. Try looking at your site on other devices to see if they look better or worse. If they look the same, then you can start to look for other things that may be causing the issue.