I just came across this cool effect (in the linked article) whereby hovering over an image changes it to color. In this case it’s just a silly novelty as the unhovered presentation would use copious black ink. But apparently this technique /could/ be used to create a page that loads fast using small bilevel images. The images could be dithered with printing in mind in a way that minimizes ink/toner consumption. The color varients of images would of course be the last to get fetched. A well designed server could even give an extra low priority to the color variants when traffic is high.
You can just use a print-specific stylesheet.
Both firefox and chrome’s developer mode has a preview mode that will allow you to demo the print stylesheet too while you’re working on it.
Also be sure to use a physical measurement for your sheet like points, picas, or em’s. Percentages, vh/vw, and pixels will behave unexpectedly in print. Like a pixel is 1/96th of an inch which will look much smaller than it does on screen. No one asked, but as someone who has written css since the early 2000’s, the rem unit is the best kind of magic, though it has a learning curve if you are unaccustomed to it.
I like the idea. I can’t see this being too difficult to implement. I imagine images that show smaller and with less saturation on the first load/print version. But I rarely end up printing websites, it’s mostly PDFs already designed for print - we should be designing these with ink savings in mind, I don’t need a colourful logo, huge pics in colour and big fat titles. Personally I sometimes just copy a text from somewhere too designy, paste in a text file and then print that.
So what about mobile users? My guess is that hovering is getting niche.
Also, printers are getting niche. Personally I would just save as a pdf if I want to keep a copy.
Applying some filter afterwards might make more sense.
