You in all probability already know use media-specific CSS to offer an acceptable structure for the printed web page.
Article Continues Beneath
However how nice would it not be to have the ability to go additional and supply a greater print various by means of the usage of particular high-resolution pictures particularly for print? Superior? Right here’s how.
HTML and CSS permit us to drive pictures to show in a distinct dimension than their native dimensions. I just lately started questioning whether or not larger decision gadgets like printers would possibly have the ability to use the pixels omitted by the comparatively low resolutions meant for display viewing.
So I started an experiment to match the way in which resized pictures look on display to their look in print.
I made the next pictures:
| 10×10 pixel anti-aliased GIF | 50×50 pixel anti-aliased GIF | 100×100 pixel anti-aliased GIF |
|---|---|---|
 |
 |
 |
Then I added these three pictures to an HTML web page and used the img tag to drive all three pictures show 10×10 pixels.
<img alt="" peak="10" width="10" />This left three circles that, whereas the identical dimension, all appeared barely completely different:
| 10×10 pixel GIF displayed at 10×10 pixels (file dimension 85 bytes) |
50×50 pixel GIF displayed at 10×10 pixels (file dimension 323 bytes) |
100×100 pixel GIF displayed at 10×10 pixels (file dimension 706 bytes) |
|---|---|---|
|
 |
 |
The primary circle seems to be a little bit nicer than the opposite two because of anti-aliasing. The opposite two pictures are anti-aliased, however due to the browser’s fairly brutal pixel-culling when scaling, they appear jagged.
The file sizes differ between the three pictures (85b to 706b). For easy GIFs like these, the actual distinction is negligible, however it is very important notice that in bigger JPEGs and PNGs the distinction could be vital.
I printed the HTML web page that contained the three pictures and found that the print outcomes had been truly the other of the display outcomes. The primary circle gave the impression to be of the bottom high quality, whereas the second and third circles appeared higher.
| 10×10 pixel GIF (file dimension 85 bytes) |
50×50 pixel GIF (file dimension 323 bytes) |
100×100 pixel GIF (file dimension 706 bytes) |
|---|---|---|
 |
 |
 |
That is occurring as a result of the picture sizes are being pressured down whereas their decision (dpi) is being pressured up. The primary picture is made up of 100 pixels (102), whereas the second crams in 2500 pixels (502), and the final a whopping 10,000 pixels (1002) into the identical house. Printers can make the most of these additional pixels to supply a better high quality picture as a result of print decision sometimes ranges from 300dpi as much as 1200dpi, whereas display decision is normally solely 72dpi to 96dpi.
Whereas we will create pictures to be used on display, we will additionally create bigger pictures and drive their dimension down (and their dpi up) to be used by printers. We will make hi-res logos and headings, 300dpi images, and even pictures particularly wanted for printed pages—and serve up these print-specific pictures utilizing print-media CSS.
Placing it into apply#section4
We wish to make a header for a web site that features a white brand on a darkish background, however will print out as a strong black on white at a better decision.
We begin by making a lo-res/display model of the emblem (130×100px GIF at 3KB). We then make a particular hi-res/print model of this brand by growing the pixel depend by 5 (650×500px GIF at 10KB).
We put each the display model and print model on the web page and set the scale of the print model to be the identical because the display model. Then CSS permits us to cover the print model of the picture when displaying the web page on a display after which use it to exchange the display model when the web page is printed.
Hiding the print model with out CSS#section5
We will additionally use HTML’s img aspect, along with its peak and width attributes, to drive resize any picture—even a big, hi-res picture—all the way down to a 1×1px dot on an online web page:
<img alt="" peak="1" width="1" />We will then override these peak and width settings within the print-media CSS:
img { peak: 30px; width: 30px; } Even when CSS is turned off, the HTML peak and width attributes we utilized to the img aspect make that picture simple to miss. (In any case, it’s solely a one-pixel “dot” on the web page.)
Be aware: Most browsers don’t resample a picture whether it is scaled—in order that one pixel “dot” is definitely a pixel chosen immediately from the unique picture. For those who handle to find this pixel and make it the identical colour because the web page or background, then it’s fully invisible. For some headers, I would use the one-pixel dot as a “skip to content material” hyperlink.
I’ve experimented with varied picture alternative (IR) methods. The model I’m utilizing right here works as you’ll anticipate: embrace the picture contained in the HTML tag together with the textual content with the intention to overpaint the standard background picture that’s the display model. Relying in your wants and undertaking necessities, you may combine the method with many different common IR strategies.
Like many CSS methods that stretch internet performance, this method can pose some issues. Relying on the calls for of your undertaking, chances are you’ll discover that together with an extraneous picture alongside the display model is an excessive amount of of a semantic compromise. You might also decide that it’s an excessive amount of work for too little achieve or take difficulty with the combination of display and print content material right into a single doc construction.
These are all legitimate factors, and it’s as much as you to resolve if and when this system shall be helpful for you. Another technical elements to contemplate:
- Resizing doesn’t work for CSS background pictures.
- “Hidden” pictures will present up with CSS turned off (until you management the scale within the
<img>tag). - Additional pictures will enhance bandwidth utilization.
On the plus aspect, I’ve but to discover a trendy browser that this system doesn’t work in. Any browser that understands CSS media sorts ought to have the ability to assist this system. Moreover, this system just isn’t doing something like cloaking textual content or HTML parts with colour or visibility in a approach that’s more likely to look deceitful to serps.
One query that also intrigues me is whether or not all browsers obtain picture information which are referenced in a print model sheet however not within the display model sheet or within the markup? The restricted variety of browsers I’ve examined do seem to obtain the photographs whether or not the person prints the web page or not.
Attempt it, you’ll prefer it#section7
Right here’s a colour brand that prints out as high-resolution black and white line-art (utilizing picture alternative in CSS):
And right here’s a JPEG thumbnail that prints out as a high-resolution full colour picture (utilizing two pictures):
