Optimizing Images for the Web
I don’t use Photoshop so I’ve been using other methods to optimize images for the web over the years.
Viewing colours
I recently bought a new tablet monitor which has a wider colour gamut than the one I was using before. This alerted me to some problems regarding viewing colours on my computer. The colour difference is noticeable compared to my other screen when viewing image thumbnails on Windows 10 in the folder system (I have a multiple monitor setup). Windows 10 does not seem to apply the calibrated monitor profile to many of the image thumbnails in the system folders, though upon opening them in the Photos image viewer or in software which uses colour management they look alright.
I prefer to use a program called IrfanView to view images and was using it to resize images for the web as well until the feature was removed recently.
It is also worth noting that you have to change a setting in IrfanView to make it view colours correctly on images by loading the monitor colour calibration profiles.
Even with this setting enabled, when viewing an image in IrfanView the colours look wrong if you drag the opened image to a different monitor. This is because my monitors have different colour calibration profiles from each other.
IrfanView only loads the monitor profile for whichever monitor the image window opens on. The trick is to put the image window on the screen you want to view it on, close it and then open it again so that it loads the correct monitor colour profile.
You can have multiple windows open on each monitor and use each monitors colour profile so long as you remember to reopen the window of an image if you have dragged it to a different monitor. In this regard the Windows default image viewer “Photos” is easier to use because it seems to know whichever monitor it is on and the colours look correct when you drag it from one to the other.
Optimizing images for the web
I have been using a little program called Caesium (PortableApps version) to optimize my images for the web because it really gets the file size down. The trouble is it seems to strip all the colour profile information and does not assign one for the web such as an sRGB profile. The colours of images in general and these optimized images on the web do look a lot more vivid on my Huion tablet monitor than my LG monitor because it is showing me a wider gamut of colours.
The LG monitor is showing colours closer to how they are intended, even on images which have had the colour information stripped from them- this is also because Firefox is only loading the monitors profile for the main display which I have set to my LG and usually have Firefox open on.
Images look different on my Huion if I drag the Firefox window to that display because Firefox is still using the LG monitors colour profile. I’ve tested this and after setting the Huion as the main display Firefox loads that monitor profile. The web images that have sRGB assigned then look as intended.
The problem is that the colour for images I optimized using Caesium still look wrong in Firefox on the wider gamut monitor even if it is set to the main display in the Windows display settings. They look blown out. I have to conclude that it must be important to assign sRGB colour profiles to images for the web, especially for wider gamut monitors. In my overzealous efforts to decrease file sizes for the web with Caesium I sacrificed the colour information (which is not great for an art themed website). I wouldn’t even have noticed if I hadn’t got the new monitor.
I’m writing all of this down here because
a: I want to have a record of it in case I forget and do it again, and
b: as reference for anyone else who may have the same problem.
Conclusion
I had to find another program that optimized images for the web and assigns the srgb colour information.
This afternoon I decided to try one called Darktable which is a free open source photography workflow application and raw developer.
It can also be used to resize and optimize exported images for the web and does a nice job, so I’m going to be using it from now on for my web images.
Below is a screenshot. The export and resize for the web options can be seen in the lower left hand side. I believe the colour intent setting usually used can be either be relative colorimetric or perceptual. I set sRGB (web safe) for the profile and relative colorimetric for the intent.
This was the result:
Possibly Useful Related Links:
How to setup proper color management in your web browser