How can I optimize pictures for websites without loosing quality?: optimize, photos, web

by: oceanbeachPosted on 2007-05-22 at 05:29:08ID: 19133257

Hello webprouk,

Displaying well on screen & printing well are two different critters. Screen resolution's are typically less than 100 dpi whereas print resolutions are typically more than 200-300 dpi. Printers require larger, more detailed images to print well or else it has to "fill in the blanks" as far as the difference in resolution. I am not sure what you are doing, but you could do is make a print style sheet and use higher quality images for that style sheet.

I hope this helps!

oceanbeach

by: oceanbeachPosted on 2007-05-22 at 05:39:01ID: 19133310

I forgot...A very general way to think of it is images for web should be as small as possible (for page loading times, bandwidth usage, etc.) and images for print are to be as detailed or large as possible.

For arguments sake, if print resolution is 3 times that of screen resolution, or 3 pixels for every 1 pixel, then the printer must "guess" what the other 2 pixels should be.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

by: traxionPosted on 2007-05-22 at 08:04:03ID: 19134522

Pages for web should be a 72dpi (native screen resolution). If you are using Photoshop, use the Save For Web feature which will save it as a 72dpi image without resampling the actual pixel size. If you're using another program, first change the resolution to 72dpi.

As for Quality control....this is going to depend on the format you are saving. If you are saving simple graphics (charts / logos / etc) that do not have a wide range of colors, you may save is a GIF. GIF's are "lossy" because they support a limited number of colors, however, if you're image doesn't have many colors, it's a good format. Use this if you're image is in the 128 color or less range. You can create 256 color gif's, but JPegs will give you a better file size.

As for JPG's, there are tradeoffs. Jpeg compression uses color averages to reduce the filesize. For instance, if you have two "Reds" near eachother, but with very close color values, it may use an average of the two colors and just pick one. This reduces the overall color pallette that he image uses. JPegs support 16.7 million colors, however, the more compressed the image, the less it will actually use. Because of this, jpegs with a high degree of compression will also create "artifacts" or little mosaic like squares on the image. In Photoshop I usually use a compression level around "8" or 80% of the original. While this may result in a slightly larger file size, it results in less artifacts and less color compensation. I've found the Save For Web feature to change Blues more dramatically than other colors in Photoshop, an a level of 8 reduces these changes.

Another general rule, if you have smooth gradients (like dropshadows, etc) where there is a high degree of change, use Jpegs as they will do better with the color transition than a GIF Format.

by: RipinPosted on 2007-05-23 at 12:59:53ID: 19144502

If opimized for windows then use 96 dpi. Thats windows screen resolution. optimized for print then use 150 dpi. that will print pretty good and give you nice small files. Dont use jpg for images less than 256 colors. Use jpg only photos.

by: webproukPosted on 2007-06-04 at 09:01:08ID: 19209603

Thanks for your comments,

I know that resolution for web is 72 and print should be 300, the problem is that I cannot replace the image for printing, I am working with Joomla, not sure I can create two styles for printing and display there.

Plans are only black and white but when saved as gif the print quality is horrible.

Do you know of any way to use two styles in Joomla?

Thanks

by: pcumberbatchPosted on 2007-06-05 at 13:07:38ID: 19220234

Can you place a print link on your page which prints out the high resolution image rather than the one displayed on screen? I am sure I saw some script somewhere which allows you to print something other than what is being displayed on screen.

Also any other reason for using gif format, other than size considerations?

by: snapdragonPosted on 2007-08-02 at 18:07:04ID: 19622007

I would sure be interested in finding out about that script, pcumberbatch! Anyone have any idea what it is?

by: webproukPosted on 2008-01-18 at 02:47:59ID: 20689210

Does anyone know of that script? This question has not been resolved yet.

Thanks

by: pcumberbatchPosted on 2008-07-23 at 07:02:32ID: 22069387

Apologies for long absence from this question - script attached
1)Simple print version document - html
2) Detailed script picked up on the webdeveloper site. This one handles frames - javascriot

Hope these are of some use.

1) 
<link rel=alternate media=print href="printversion.doc">
 
2)
------------ Frameset -----------
<HTML>
<Head>
<Link rel='alternate' media='print' href=null>
<Script Language=JavaScript>
 
function setPrintPage(prnThis){
 
prnDoc = document.getElementsByTagName('Link');
prnDoc[0].setAttribute('href', prnThis);
window.print();
}
 
</Script>
</Head>
<frameset rows="80,*" frameborder="yes" border="1" framespacing="0">
<frame name="topFrame" scrolling="yes" src="Top.html" >
<frame name="bottomFrame" scrolling="yes" src="Bottom.html">
</frameset>
</HTML>
 
----------- Top.html & Bottom.html ------------
<HTML>
<Body>
Click to print Test.hmtl
<img src="print.gif" onClick="parent.setPrintPage('Test.html')">
</Body>
</HTML>
 
 
-----------------
 
----------- Not using a Frameset -------------
 
<HTML>
<Head>
<Link rel='alternate' media='print' href=null>
<Script Language=JavaScript>
 
function setPrintPage(prnThis){
 
prnDoc = document.getElementsByTagName('link');
prnDoc[0].setAttribute('href', prnThis);
window.print();
}
 
</Script>
</Head>
<Body>
Click to Print Test.html
<img src="print.gif" onClick="setPrintPage('Test.html');">
</Body>
</HTML>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:

Select all Open in new window

Question

How can I optimize pictures for websites without loosing quality?

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

optimize

photos

web

Web Images

Web Graphics Software

Adobe Photoshop

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press