Discuss: High-Resolution Image Printing

by Ross Howard

11 Display: none

I’m curious why the article mentioned using height=“1” width=“1” instead of setting height and width to zero.

I’ve been using this technique for about a year to create print-style letterhead for web pages, and as these are usually fairly light on file size, I have not been concerned. Including large images and then crunching them down with the height and width attributes was always one of the first lessons taught in beginning HTML classes, and I’m not sure broadband is proliffic (or effective) enough to change that wisdom.

I have read that previous versions of Netscape would not download an image set to display:none, although preliminary testing has shown this is not the case in Safari 2 or Firefox 1.0.6. Do any modern browsers still do this?

Also, regarding using a <div></div> and CSS to do the job, lets not forget that most browsers do not print background images by default, so unless you’re dealing with a very web-savvy user base, you’re going to get some complaints.

posted at 10:45 am on September 6, 2005 by Ryan Cannon

12 Untitled

That was a very interesting article. I had no idea there was a difference when images are printed as opposed to viewed on screen.

posted at 11:21 am on September 6, 2005 by Yannick Lyn Fatt

13 I wrote how to do this in July 2004

I wrote about creating great looking logos with a print stylesheet back in July of 2004.

It really is a nice effect. ALA definitly wrote up a nice summary of how to accomplish relatively the same effect. The process of how to do it has been around a while, just not many people knew about it.

posted at 12:47 pm on September 6, 2005 by Bryan K.

14 Too much overhead?

I agree with an earlier comment that this would bog down the loading of a web page. If I’m loading a low-res 10k image and its high-res counterpart that is 100k then hiding the high-res image aren’t I just adding weight to the page? Wouldn’t it be easier to preload the hi-res image into cache with JavaScript and then use a separate print style sheet to replace the low-res image with the hi? Imagine this concept put to use on a gallery page. It would work fine in our little broadband world, but those still exiled to 56k land would browse away.

posted at 03:41 pm on September 6, 2005 by Alan Marchman

15 What about a separate style sheet?

Personally it seems to me to be a lot of overhead, however, I can see this technique being wildly useful in select cases where the users would want to print the page. ie: Invoices, receipts, menus, and other pages which are, generally speaking, relatively light pages.

I’m curious as to whether or not you could use a little handy JavaScript to keep loadtimes down. Add a link to the page, when pressed it changes the <img>‘s “src” attribute from image_name to image_name_hi, or whatnot. Not exceedingly accessable, but dumb enough JS that most browsers can handle it, and those that can’t are only missing the fun little extra bits.

posted at 05:51 pm on September 6, 2005 by Paul Sweeney

16 Untitled

Alan wrote: Wouldn’t it be easier to preload the hi-res image into cache with JavaScript and then use a separate print style sheet to replace the low-res image with the hi

How would this reduce the weight of the page? The larger image is still downloaded isn’t it?

posted at 08:40 pm on September 6, 2005 by Joe Mahoney

17 Silly Idea.

It’s a silly and possibly dangerous idea.
Someone recently got a top job in the UK Health Service using a faked degree certificate on which he had used a university logo taken from their web site. The logo was clearly fake but if had been a hi-res job…
(Source: The Weekly Telegraph, Issue 753, page 10)
Anyway, I am of the opinion that Web and Print are related but significantly different media and constantly referring back to printing conventions restricts what the web can and should do… not to mention the bandwidth issue (because others already have).
There are too many graphic designers and not enough information technologists in web design. Stick to glossy mags.

posted at 09:23 pm on September 6, 2005 by Mike Stone

18 RE: Silly Idea

Come on, Mike. If people want to be deceptive, they will do it. That’s why it’s called deception. There are plenty of places to find high-res/vector logos for companies online. It’s not the role of designers or information technologists to police people on the internet.

posted at 10:01 pm on September 6, 2005 by Meryl K. Evans

19 Untitled

It’s a silly and possibly dangerous idea. Someone recently got a top job in the UK Health Service using a faked degree certificate on which he had used a university logo taken from their web site.

It would seem that the solution would be to call the university to verify the degree, not to be afraid of posting logos.

As Jason points out, there are plenty available. A good graphic artist could forge their own high res logo if they wished.

posted at 10:40 pm on September 6, 2005 by Chris Johnson

20

Thanks for all of your comments.

Greg Pfeil: Your content proposal looks like the best solution. Another option would be to allow a background image size to be specified in CSS. That way browsers that are smart enough will only download images specified in the print media CSS when someone hits ‘print’. Also it would be nice is background images specified in print media CSS were printed by default – as they have been deliberately included for print.

Niek Emmen: Yup, this is a good idea. It’s how I would expect to allow users to see and print a hi-res photograph for instance. You could open a new window with only the image resized to work for print resolution.

Chris Hunt: Sorry, it might have been good to demonstrate this more :) I was using the FARK method, and simply including the image inside the <h1> tag. Hide the image in the screen css, and show it in the print one.

Susan Ottwell, Stephen Down: Unfortunately, we can’t use CSS to set the size of a background image to crunch it down. That is why we have to rely on regular IMG’s which we can resize to work as opposed to CSS background-images which we can’t.

David Ross, Alan Marchman: Yup, I agree. I still use dialup at home and I certainly hope someone wouldn’t employ this approach to do that. I hope they would allow me to click on a link to a “hi-res printable version” or something if I wish.

Matthias Willerich: I’m not sure if you could intercept a client side print request with javascript and download and swap the necessary files.

Ryan Cannon: In IE5/IE6 even when an image is set to 0 it still occupies 1×1 pixels. Firefox is smart enough to know what to do. I vaguely recall testing on Netscape that at 0×0 it just ignored the size and went fullsize. But I will need to do some more investigation into this.

Bryan K: Good for you :) I had no doubt that it had been done before. I didn’t see the need to wrap the IMG in another DIV as you suggest though. Was there a reason you didn’t just rely on the ID of the IMG? The borders perhaps?

Mike Stone: Your reservations are interesting. Would that not also rule out SVG and PDF as well?

I don’t actually regard the web as a medium as such. I think it is more a mode – a method of delivering different media – whether it be an online article such as this, an application such as Gmail, or even an animation like Homestar. I’m not suggesting or promoting burdening every page with hi-res versions of images, I’m merely discussing the techical approaches to delivering better printable documents when needed. I for one, have printed many pages off the web and think this approach has it’s uses.

Cheers

posted at 01:54 am on September 7, 2005 by Ross Howard