21 Note on Safari

I’ve used this technique very successfully a couple months ago on a commercial website where part of the functionality involved printing a specific page that, among other things, contained the logo.

I noticed how out of the current crop of mainstream browsers (IE/Win, Firefox/Mozilla, Opera 7/8, safari, IE/Mac) Safari was the only browser that resampled the shrunken image.

I also think that setting the high-res image to a 1×1 pixel size is a bit kludgy. One is better off setting the image to display:none; in which case you have the added benefit that (some) browsers don’t download or render the image. If the browser downloads the none-displayed image, you win by not having a pixel on which your design may trip; if the browser ignores the image, you win by not creating pointless overhead.

Anyway, the special printed page of aforementioned website looked very sharp and I highly recommend the technique, although browsers downloading images whether the image is used or not may make it less practical for all pages.

posted at 06:22 am on September 7, 2005 by Willem Jeffery

22 File size?

I’m not sure wether the “hidden” images does or does not load when the display is set to none. If it does download it is an unaxceptable technique for me. We have been talking about saving 10kb by using css instead of tables for the layout. Hurray. And now we are going to put in 5mb 300dpi images? I guess I’m not.

And offering all graphics is two resolutions will be a lot of extra work.

I guess the user is used to the result of printed web pages. Maybe not all users will inderstand the difference but in my opinion it’s a different medium with different technical specifications. If you have high res pictures to offer (press or download center) it’s fair to use them. But people will know the difference.

The presented technique might be usefull though to print a header or footer above every content page you print. To “brand” the output from your site. But then you would not need all this fuss. It can be done simpler.

So the idea is nice, offering the user a high res print, but to me it seems a litle too far fetched at the moment.

posted at 08:56 am on September 7, 2005 by Martijn van der Heijden

23 Observations

The article states “The first circle looks a little nicer than the other two due to anti-aliasing. The other two images are anti-aliased, but because of the browser’s rather brutal pixel-culling when scaling, they look jagged“. The 3 circles look exactly the same to me on Opera 8.02/XP.

Lastly, when going to Print Preview in Opera 8, the sample images at the bottom do not show. I just see boxes with the ALT text in them. I can confirm that printing the page doesn’t show any images either. So the technique fails in Opera 8.

posted at 09:13 am on September 7, 2005 by Chris Hester

24 Correction

Wait – I had “Print page background” turned off. But then it only shows the top image (the Book Whitman logo). And it is low-res. The Manuscript example remains blank.

The author’s photo prints fine!

posted at 09:17 am on September 7, 2005 by Chris Hester

25 Back to front

One approach I’ve used in the past for site logos has sprung from image replacement. Create both print and screen quality logos, using the print version in your markup.

In the screen CSS size your logo as needed, but rather than displaying that to the user give the logo container dimensions and overflow:hidden. Then knock the logo out of the visible area. We now have an essentially blank area where the logo should be, but the logo itself remains in the semantic flow of the document. Now we can apply the screen logo as a background to our logo container.

For the print CSS we simply allow the print logo to show again and switch off the background image to make sure it doesn’t display in those cases where backgrounds are switched on.

This technique gets round the semantic problem of including both resolutions of image in the markup as well as background display on print. It also has the added advantage of allowing us to switch the screen logo in situations where greater contrast is required between itself and its background. For example if background colours change between site sections we can ensure our logo is still sufficiently visible.

This is perhaps only really suitable for logos and other predictable site elements rather than content images and the like. I’m even happy with knocking the actual logo out of the visible area, but would be interested to know if anyone has any strong objections to that particular aspect.

posted at 12:36 pm on September 7, 2005 by Will Howat

26 Untitled

I have the problem that the downsizing width=“1” and height=“1” for the print-image is completely ignored by Firefox (1.0.6 on WinXP) if I turn off styles. Instead the print-image is shown in it’s full size. This happens as well if I look at this article (the “Book Whitman” logo) with styles turned off, as also if I do this with my website, where I tried this.
Anyone with the same problem?

posted at 07:14 pm on September 7, 2005 by Michael van Laar

27 Untitled

The 3 circles look exactly the same to me on Opera 8.02/XP.

Opera resamples images. I wasn’t aware of this and thought Safari was the only one.

To see the mentioned effect, try it in Firefox or IE.

posted at 08:16 am on September 8, 2005 by Willem Jeffery

28 Untitled

Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?

I tried doing it this way but the hi-res image is still downloaded with the page. It also had the side effect of not actually printing either the low-res or hi-res images.

I’m using Mac Firefox 1.0.4

Ideally what is needed is a solution where the hi-res replacement image is not downloaded until it has to be printed.

So far, a separate print-friendly version of the page seems the best answer.

posted at 09:15 am on September 8, 2005 by Keith Tait

29 Silly Idea.(again)

Glad my little comment brought some responses. Yes, Jason, some people are into deception. So why make it easier for them?
Anyway, other contributors have given many good technical reasons why this idea is silly. Mainly that it does not seem to be very cross-browser, IMO that is because implementation of print style sheets is fairly abysmal at the moment, and, of course, the bandwidth issue.
Some have said that it’s OK with browsers that do not download images set to display:none.
This behaviour is wrong. It is the browsers duty to replace all replaced content in the mark-up and then decide what to do with it according to style rules and image attributes. Otherwise you think that the page has downloaded when it hasn’t and for dial-up users, still the majority I think, and others who like to work off-line, that is very annoying. Until recently Safari was an offender but now it behaves correctly.
Base Point: The purpose of the internet and the web is the dissemination and interchange of information and stuff that gets in the way, eg pretty pictures, should be kept to a minimum. (Unless the purpose of your site is to let people steal your wonderful graphics, of course ;)

posted at 05:07 pm on September 8, 2005 by Mike Stone

30 RE: Silly Idea.(again)

You do realize that “information” is not limited to just text, right? So called “pretty pictures” also fall into the category of information. You sound very bitter towards designers, have you been hurt before? Come on Mike, let the hate out and let the love in :D

posted at 05:41 pm on September 8, 2005 by Meryl K. Evans