|
Posted by Helmut Richter on October 15, 2007, 5:39 am
Please log in for more thread options
A Web page containing images can both been viewed on a screen or
printed. For the two purposes, different resolutions of images are needed,
typically 72 dpi for the screen and 300 dpi for printing. One solution of
this dilemma is to provide a totally independent print version of the
article which contains images with higher resolution. I want to ask this
group whether there are good alternatives. I thought of the following
solutions but each has also serious drawbacks. Have I failed to notice a
better solution?
1. Use low-resolution images.
Benefit: simple; good images on screen.
Drawback: bad images in print.
Summary: good enough for articles that are normally used only online.
2. Use high-resolution images, scale them down in the <img> tag.
Benefit: good images in print.
Drawback: extremely bad images on screen because browsers have poor
algorithms for rescaling images; long load time.
Summary: unusable.
3. Use two images, select by "media" in CSS stylesheet (see code example below).
Benefit: good images.
Drawback: users not using stylesheets get two images, one of them
oversized on the screen; long load time.
Summary: should work.
4. Two versions of article, let user choose a version "print" vs. "screen".
Benefit: good images.
Drawback: too complex.
Summary: clumsy.
Are there better solutions?
At present I like solution 3 best, enhanced with the option of viewing the
better image on the screen as well:
<span class="screen-img">
<a href="hi-res.png">
<img src="lo-res.png" title="click for larger image" alt="content-descr">
</a>
</span>
<span class="print-img">
<img src="hi-res.png" alt="content-descr">
</span>
--
Helmut Richter
| 
XML Sitemap