I’m loosing my pixels!

roxy wrote:

Is there any way to reduce an image from, say, 1260 pix wide, to 400 pix wide, without loosing image quality? It sounds impossible, but I thought I’d ask anyway.
I’m trying to make beautiful thumbnails for my website.

No. By definition fewer pixels equals lower image quality. If you’re saving jpegs Save for Web at a high quality setting. That’s about the best you can do for the web.

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html
Comics art for sale:
http://www.sover.net/~hannigan/batsale.html

roxy writes …

Is there any way to reduce an image from, say, 1260 pix wide, to 400 pix wide, without loosing image quality?

Sure … Image – Image Size, check resample and use ‘bicubic sharper’ ….

I’m trying to make beautiful thumbnails for my website

After you re-size it then do convert-to-profile to sRGB if it’s in some other working space, then do ‘Save for web’ with ‘2 up’ and adjust the quality setting for jpegs to balance the file size in Kbytes with the quality you see in the preview window.

Bill

"roxy" wrote in message

Is there any way to reduce an image from, say, 1260 pix wide, to 400 pix wide, without loosing image quality? It sounds impossible, but I thought I’d ask anyway.
I’m trying to make beautiful thumbnails for my website.

I’ve found pics come out better when reducing them this much if I first halve them – say to 600 px, sharpen lightly and then save to the smaller size. I find the smaller sizes usually benefit from increasing saturation a little and then resharpening (again lightly).

hth,
Flo

Thank you for these great ideas.

Bill, where do I find "convert-to-profile", and the ‘2-up’ option?

Also, I’d like to understand the ramifications of using different compressions for jpegs. I understand that it controls file size, and thus the download time, is that right? Is there more? My little (and larger) images look so much better with less compression. Why not save them save them at the maximum compression quality?

Roxy

roxy writes …

Bill, where do I find "convert-to-profile", and the ‘2-up’ option?

To convert do Image – Mode – Convert to Profile and pick sRGB as the destination space. This is for CS, I gather it’s moved in CS 2. This minimizes problems with saturated colors looking dull when viewed with non-color managed apps like most web browsers.

Then do File – ‘save for web’ to open ImageReady and at the top you’ll see tabs for ‘original’ … ‘2 up’ etc … make sure it’s set for jpegs instead of GIF or PNG or WBMP formats … for many images 40-50-60% ‘quality’ setting gives good enough results for the web … you can see the projected size of the jpeg at the bottom-left of the right window, 50-60 KB will download quickly for dial-up guys so that’s a reasonable target. If you’ve sharpened the files much the jpeg sizes are typically larger so don’t over-sharpen.

Also, I’d like to understand the ramifications of using different compressions for jpegs. I understand that it controls file size, and thus the download time, is that right? Is there more?

You are trading file size for quality … that’s what I like about ‘2 up’, you can see the effects of the compression side-by-side with the original.

My little (and larger) images look so much better with
less compression

Here are some of my recent images from a trip to Africa (click a thumbnail to see the big ones … I recommend the lions or cheetahs 🙂 …. most were 40-50% compression and look OK to me and even at sizes up to 800 pixels are fairly small …
http://members.aol.com/bhilton665/tanzania_2006/

Why not save them save them at the maximum compression
quality?

Then they would be too big for the web for dial-up users … if you have digital camera images try this … run a light USM on the original, say 300% amt, 0.3 radius, 0 threshold (this is Canon’s recommended preliminary USM for their pro cameras which I use), then make your edits, then reduce in size with bicubic sharper, then make several jpegs at different compression settings from 100% to 40% and compare to see how much difference you see. For typical 700 x 500 pixel web images I doubt you’ll notice the difference in quality between 100% and say 60%, but the file size will be much smaller. At any rate, with 2-up you can see the effects before you commit.

Bill

AWESOME website! Amazing photos! I have a 20" monitor (oh,lucky me) and that leopard dripping blood from his/her mouth is crispy sharp, and just a little scary.

Most of my images are created in photoshop from scratch, which may account for my woes. I usually start with a canvas of around 2100 px at a 300 resolution. My digital camera downloads photos at 180 res and 2500 px wide. This seems like a larger file to me; when I change the res to 300, the pixels multiply to a much larger number. So if I start my canvas at a res of 180 and 2500 px, will I have a better quality jpeg?

I found the convert and 2up tab, thank you. Very useful tab, this 2-up.

Thanks to Flo for your suggestions too, I tried it and it really made a difference.

Roxy

"Bill Hilton" wrote in message
….

Here are some of my recent images from a trip to Africa (click a thumbnail to see the big ones … I recommend the lions or cheetahs 🙂 … most were 40-50% compression and look OK to me and even at sizes up to 800 pixels are fairly small …
http://members.aol.com/bhilton665/tanzania_2006/

These are dynamite pictures, Bill. And bravo for overexposing the background for that one cheetah image! Now all it needs is a little touch of curves …
—

Mike Russell
www.mike.russell-home.net

"Bill Hilton" wrote in message

Here are some of my recent images from a trip to Africa (click a thumbnail to see the big ones … I recommend the lions or cheetahs 🙂 … most were 40-50% compression and look OK to me and even at sizes up to 800 pixels are fairly small …
http://members.aol.com/bhilton665/tanzania_2006/

Bill

Excellent images, I note you say you use a Canon pro camera?, I wonder if you would mind expanding on the equipment you used for those shots? including the lenses.

Harry

roxy writes …

AWESOME website! Amazing photos!

Thanks … we were really happy with the Lilac-breasted roller, elephant, cheetah and lion pics …

Most of my images are created in photoshop from scratch, which may account for my woes

In that case you may be better off saving as a GIF instead of JPEG, if you have a limited number of colors … maybe you could post a sample image? For a lot of non-photos GIF is better …

My digital camera downloads photos at 180 res and
2500 px wide. This seems like a larger file to me; when I change the res to 300, the pixels multiply to a much larger number

The "res" value only matters when you print, the 180 number is basically just a placeholder that you can change to anything you like …. you can avoid the "pixels multiply" problem by unchecking ‘resample image’ when you do Image – Image Size … this keeps your original pixel dimensions and lets you change the res …

So if I start my canvas at a res of 180 and 2500 px, will I have a better quality jpeg?

The res ONLY matters if you are printing it … on the web it will show as 100%, ie, actual pixels … in other words a 90 ppi 600×800 pixel jpeg on the web will look identical to a 360 ppi 600×800 pixel image on the web, whereas if you PRINTED them the 90 ppi image would look 4x larger in each direction. I think some of your problems might be caused by resampling when you don’t need to …

For what you are describing I’d just use an initial canvas of the size of the final image and work on that. Then if you need a smaller jpeg for the web later do the resize with ‘resample’ on using ‘bicubic sharper’ (the res won’t matter).

Bill

Thank you, you’ve clarified a lot for me.

Roxy

In article ,
"roxy" wrote:

Is there any way to reduce an image from, say, 1260 pix wide, to 400 pix wide, without loosing image quality?

No. You are removing pixels; ergo, you are removing information.

Now, there are things you can do to make that loss as unnoticable as possible. You can downsample the image using Bicubic Sharper, and you can sharpen the image after you reduce it. But you cannot reduce the image in size without reducing quality.

—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

In article ,
"roxy" wrote:

Also, I’d like to understand the ramifications of using different compressions for jpegs. I understand that it controls file size, and thus the download time, is that right? Is there more? My little (and larger) images look so much better with less compression. Why not save them save them at the maximum compression quality?

When you compress using JPEG, the image is degraded in quality. The JPEG format always reduces image quality; it makes the file smaller on disk by removing information from it and degrading its quality. JPEG was a file format invented for use in situations, such as the Web, where file size is critical and image quality is not important.

When you set the image quality in a JPEG, what you’re doing is telling the computer how much to degrade the image. The more you degrade the image, the more artifacts (such as blurring and banding) you see, and the smaller the file is on disk.

—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

Here are some of my recent images from a trip to Africa … most were 40-50% compression and look OK to me and even at sizes up to 800 pixels are fairly small …
http://members.aol.com/bhilton665/tanzania_2006/

Harry Limey asks …

Excellent images, I note you say you use a Canon pro camera?, I wonder if you would mind expanding on the equipment you used for those shots? including the lenses.

The short answer is two Canon 1D Mark II’s and a Canon 1Ds, mostly with the 500 f/4 L IS … I got asked about the gear and other details so many times I made a separate FAQ web page …
http://members.aol.com/bhilton665/tanzania_2006/digital_safa ri.htm … probably more than you really wanted to know 🙂 Glad you liked the shots, we’re going back soon for a bargain-priced "rainy season safari" that could be fantastic or could be a disaster, depending on how hard it rains.

Bill

On 26 Mar 2006 09:14:12 -0800, "roxy" wrote:

Is there any way to reduce an image from, say, 1260 pix wide, to 400 pix wide, without loosing image quality? It sounds impossible, but I thought I’d ask anyway.
I’m trying to make beautiful thumbnails for my website.

Isn’t 400pix wide a bit large for a web thumbnail?

Well, much like Bill Hilton I’ve also just come back from a holiday and have them up at my website.

http://www.metalvortex.com/myphotos/south_america_2006/

I took the photos at 3072×2048 and post-processed in Photoshop. Then I created small web-sized JPEG images at generally 550×367. Then I created JPEG thumbnails at 120×80.

The 120×80 thumbnails were applied with a moderate "Smart Sharpen" filter with JPEG compression/quality set at "High". I think that this gives a good thumbnail image quality without sacrificing too much on download speeds (I have 60 thumbnails on that page!).

Hope that helps.

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash

Kulvinder Singh Matharu writes …

Isn’t 400pix wide a bit large for a web thumbnail?

I agree. Maybe she was making banner ads or something, given the pixel sizes she mentioned. I usually go 100×100 pixels on my thumbnails and then add a 16 pixel white border but anything up to 150-180 pixels or slightly more looks great too.

I’ve also just come back from a holiday
and have them up at my website.
http://www.metalvortex.com/myphotos/south_america_2006/

You have a lot of really striking images and a well-designed web site. Nice work.

If I could offer two constructive criticisms …

The 120×80 thumbnails were applied with a moderate "Smart Sharpen" filter with JPEG compression/quality set at "High". I think that this gives a good thumbnail image quality without sacrificing too much on download speeds

I noticed these thumbs are mostly 25 KB – 30 KB in size … similar sized thumbs on my site are 2.5 KB – 4 KB (I aim for 3 KB) so mine would load about 8 – 10x faster. I think you can get very good thumbnail quality with smaller sizes with a different sharpening flow or lower jpeg compression settings … yours look really good, I’m just saying I think they *might* look equally good at 1/10 th the file size if done slightly different.

Second is a minor point but I liked the way the vertical thumbs look like slides on a lightbox … however the effect is spoiled a bit by the horizontal thumbs, which are not centered like 35 mm film slides, so if there’s a way to center those the illusion of looking at slides would be complete. Not that it will matter in the near future as those of us who actually remember what 35 mm film on a lightbox looked like are replaced by the digital guys with no such memories 🙂

Bill

Kulvinder Singh Matharu writes

I’ve also just come back from a holiday
and have them up at my website.
http://www.metalvortex.com/myphotos/south_america_2006/

I wrote …

I noticed these thumbs are mostly 25 KB – 30 KB in size … similar sized thumbs on my site are 2.5 KB – 4 KB (I aim for 3 KB)

Kulvinder, I just peeked at a couple of your other excellent galleries and noted that the thumb-nail sizes for most of them are around 3 KB with good quality, FWIW … so this 25-30 KB thumbnail flow appears to be a new thing for you.

Bill

Bill Hilton wrote:

Kulvinder Singh Matharu writes

I’ve also just come back from a holiday
and have them up at my website.
http://www.metalvortex.com/myphotos/south_america_2006/

I wrote …

I noticed these thumbs are mostly 25 KB – 30 KB in size … similar sized thumbs on my site are 2.5 KB – 4 KB (I aim for 3 KB)

Kulvinder, I just peeked at a couple of your other excellent galleries and noted that the thumb-nail sizes for most of them are around 3 KB with good quality, FWIW … so this 25-30 KB thumbnail flow appears to be a new thing for you.

I’d vote personally for somewhat larger thumbnails and larger images. Maybe 50-100% larger.

But some very fine images. What’s your rule of thumb on saturation?

—
John McWilliams

I only used the 400 pixel size as an example. The thumbs are 100×100. However, I created a mock-up with the thumbs and background as one single jpeg 900×700 at high quality compression.
Is there any drawback to this? I can just make each thumb into a hotspot, no? Wouldn’t this save some code?
I don’t think it looks too bad this way (the second from the left thumbnail is intentionally scuzzy). It seems to download fast enough on IE. What do you think?

http://roxywhite.com/

Roxy

In article ,
"roxy" wrote:

I only used the 400 pixel size as an example. The thumbs are 100×100. However, I created a mock-up with the thumbs and background as one single jpeg 900×700 at high quality compression.
Is there any drawback to this?

Yes. The resulting image is huge, and will take a long time to download.

A browser will download multiple images simultaneously, up to the maximum bandwidth available. In practice, that means that in real-world situations, a browser can often download three 3KB images faster than one 9KB image, depending on server latency and other conditions.

Also, with multiple thumbnails, your viewers can be looking at some thumbnails while the others are still downloading.

I can just make each thumb into a
hotspot, no? Wouldn’t this save some code?

It is not the length of the HTML code but the size of the images which is usually the deciding factor in how quickly a page loads, because most of the time the length of the HTML code is less than the size of the images on the page.

—
Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com

Oh, I see. That makes sense.

It would’ve been too easy to create a web page with one giant jpeg.

Thanks for the education,

Roxy

On 27 Mar 2006 06:55:11 -0800, "Bill Hilton"
wrote:

[snip]

You have a lot of really striking images and a well-designed web site. Nice work.

Thanks. I try to make an effort!

If I could offer two constructive criticisms …

[snip]

Sure.

I noticed these thumbs are mostly 25 KB – 30 KB in size … similar sized thumbs on my site are 2.5 KB – 4 KB (I aim for 3 KB) so mine would load about 8 – 10x faster. I think you can get very good thumbnail quality with smaller sizes with a different sharpening flow or lower jpeg compression settings … yours look really good, I’m just saying I think they *might* look equally good at 1/10 th the file size if done slightly different.

Good point. I was in a rush to create the thumbnails so I may not have compressed them as aggressively as the other thumbnails (as noted by you in your other post). I’ll have to re-visit that. Thanks for pointing that out.

Second is a minor point but I liked the way the vertical thumbs look like slides on a lightbox … however the effect is spoiled a bit by the horizontal thumbs, which are not centered like 35 mm film slides, so if there’s a way to center those the illusion of looking at slides

I’ve tried…I’ve really tried! I can do it but it means introducing additional html mark-up (due to a limitation in CSS) and I was reluctant to do that (due to losing some "semantic" web structure) unless someone pointed it out. And you did! So I’ll have another stab at it…it’s always good to aim for high standards!

would be complete. Not that it will matter in the near future as those of us who actually remember what 35 mm film on a lightbox looked like are replaced by the digital guys with no such memories 🙂

Well, my father used to do slides (and prints) so I have "fond" memories of his chemical development kit and slide-box!

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash

roxy writes …

I created a mock-up with the thumbs and background as one single jpeg 900×700 at high quality compression.
Is there any drawback to this? http://roxywhite.com/

This one is about 96 KB so according to the ‘save for web’ dialog box (lower left corner) it will download in about 35 sec for people with 28.8 KB modems, half that for the more common 56 KB modems, 5 sec for DSL guys … so it depends on the speed of the end user, but even 18 sec on a 56 K modem isn’t too bad. As Tacit says if you have it in pieces you can see parts of it quicker.

I can just make each thumb into a
hotspot, no? Wouldn’t this save some code?

"Image Map" is the term, probably … the code is still there and to me at least it’s harder to generate with ImageReady than cut-and-paste for separate smaller images in Notepad 🙂

I don’t think it looks too bad this way … What do you think?

Looks fine to me … I think the jpegs are choking on the large areas of flat single color and on the text so if you had more small images and less flat color area you might find you can use a lower jpeg quality setting and get a smaller file. On mine I usually watch the copyright text carefully because that’s where the jpeg artifacts are most noticeable.

You can also run slices to cut the one larger file into several smaller ones so it will load quicker, this is an option in ‘save for web’.

Good luck with your site.

Bill

On Mon, 27 Mar 2006 08:01:14 -0800, John McWilliams
wrote:

[snip]

I’d vote personally for somewhat larger thumbnails and larger images. Maybe 50-100% larger.

Thanks. Might be too much hard work to apply retrospectively to all my thumbs.

But some very fine images. What’s your rule of thumb on saturation?

I normally de-saturated by between 10% and 50%…due to the aggressive curves I put in there the saturation appears to be very deep so I have to de-saturate to get something a bit closer to reality. And with a polarising filter my skies go quite dark!

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash

On 27 Mar 2006 07:03:28 -0800, "Bill Hilton"
wrote:

[snip]

Kulvinder, I just peeked at a couple of your other excellent galleries

Thanks, again. I guess my images are quite stylised…some people like, some people don’t like!

and noted that the thumb-nail sizes for most of them are around 3 KB with good quality, FWIW … so this 25-30 KB thumbnail flow appears to be a new thing for you.

I just followed my workflow as described earlier and I’m creating thumbnails about 7kb in size…so have no idea how I created 25kb files! I must have been drunk and pressed the wrong option!

I’m glad you checked the files sizes. I’ll have to check the rest of my site to double check.

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash

Here’s another page design:

http://roxywhite.com/purplepage_illustration1.jpg

If I create separate jpegs for all these elements: background, banner, thumbs, will different browsers position them correctly? Or, should I slice the one jpeg?

I dont’ know how to use ImageReady; I read somewhere that slices were a thing of the past, but I don’t know why. I’m using Dreamweaver to make layers. If I use absolute positoning, will that do it?

How would you create the look I’m after?

Roxy

roxy writes …

Here’s another page design:
http://roxywhite.com/purplepage_illustration1.jpg
…
How would you create the look I’m after?

This page looks pretty good to me and I see it’s under 70 KB so will load in about 12 sec or so on the typical 56 KB modem. Add the Image Map links and you are good to go.

If I create separate jpegs for all these elements: background, banner, thumbs, will different browsers position them correctly?

I’m only a photographer who makes simple web pages, hand-coding in Notepad, so I’m the wrong person to ask about this 🙂

I dont’ know how to use ImageReady;

When you do ‘save for web’ from Photoshop it basically opens an ImageReady window for you for the jpeg or gif conversions. You can also do slices here and also do the image mapping and it will generate the html code for you, which is nice. This is covered in the Help files I think (I’ve done a couple of image maps and was able to figure it out from Help).

I’m using Dreamweaver

I’ve never used this but from all I’ve heard it’s even better for these web-page building tasks … though maybe not for editing individual images.

Bill

On 27 Mar 2006 10:54:02 -0800, "roxy" wrote:

Here’s another page design:

http://roxywhite.com/purplepage_illustration1.jpg

Nice.

If I create separate jpegs for all these elements: background, banner, thumbs, will different browsers position them correctly? Or, should I slice the one jpeg?

[snip]

How would you create the look I’m after?

I personally would use CSS absolute positioning…but only because I think that you can get away with a fixed-size page layout (glad you didn’t mention tables for layout!). I use a liquid/elastic layout but then I’m not too concerned about the absolute look of my pages. For example, for the my thumbnail pages, you can resize the browser window and the thumbnails will then flow to fit.

I think that IE6, Firefox, Opera and Safari should all render very similar to each other with absolute positioning. But as you code and tweak the code you may come across layout limitations in IE6 and may have to use some CSS/HTML code hacks (but I try and avoid hacks as that may cause compatibility problems with future versions of IE).

I also try and use this web design site for ideas…

http://www.alistapart.com/

and of course Eric Meyer’s site here…

http://www.meyerweb.com/eric/css/

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash

Thanks for these sites, they are so packed with info, and your advice.

I think your work is spectacular; I feel like I’m traveling without leaving my chair!

On 27 Mar 2006 07:03:28 -0800, "Bill Hilton"
wrote:

[snip]

Kulvinder, I just peeked at a couple of your other excellent galleries and noted that the thumb-nail sizes for most of them are around 3 KB with good quality, FWIW … so this 25-30 KB thumbnail flow appears to be a new thing for you.

Bill,

I know what I did wrong.

Even though I think that I’m fairly comfortable with Photoshop and should know better, I made the cardinal sin of using "Save As…" instead of "Save to Web…". This resulted in the file size being ten times bigger than it should be. I’ve corrected this now and have written a little Action to make sure that I don’t make the same mistake again!

—
Kulvinder Singh Matharu
Website : www.metalvortex.com
Contact : www.metalvortex.com/form/form.htm

"It ain’t Coca Cola, it’s rice", Straight to Hell – The Clash