optimising digital images for web
Discussion
I've got to do an overhaul of a website soon which will involve replacing all the images throughout the entire site.
What I'm wondering is whether anyone can give me "best practice" advice on preparing images of cars (nice cars - a 360 spider and a murci) so that I achieve the best balance of quality vs file size.
Similarly are there any effects and filters anyone thinks will improve car images - I noticed that the images that Trackdemon posts are always very distinctive - sure enough someone pointed out that this was to do with "saturation", and i've messed about with this and can see how if it's used appropriately it can enhance a cars colour.
Any other advice? Thanks all!
What I'm wondering is whether anyone can give me "best practice" advice on preparing images of cars (nice cars - a 360 spider and a murci) so that I achieve the best balance of quality vs file size.
Similarly are there any effects and filters anyone thinks will improve car images - I noticed that the images that Trackdemon posts are always very distinctive - sure enough someone pointed out that this was to do with "saturation", and i've messed about with this and can see how if it's used appropriately it can enhance a cars colour.
Any other advice? Thanks all!
Normally they do, depending upon the manufacturer/type of camera. Some graphics manipulation programs, however, will upsize dpi as you reduce image size so you have to be careful of that (as most cameras these days also capture sizes MUCH larger than 640x480).
Get to know your graphics program well and try to avoid "automatic" settings (except for photoshop which has a very nice "save for the web" default setting)
ErnestM
Get to know your graphics program well and try to avoid "automatic" settings (except for photoshop which has a very nice "save for the web" default setting)
ErnestM
Hi,
I often have to do batch image processing for the web for one of our clients (an online windsurfing magazine). We simple optimise the jpegs to 60% in adobe imageready. We find this produces a satisfactory level of quality with a sensible download time. The magazine with the images on for reference is here:
www.boardseekermag.com/newsletters/nov_04/
www.boardseekermag.com/gallery/index_004.htm
Re car photos, i generally find that good contrast and colour saturation gives a nice punchy image a la trackdemon.
Hope this helps
Matt
I often have to do batch image processing for the web for one of our clients (an online windsurfing magazine). We simple optimise the jpegs to 60% in adobe imageready. We find this produces a satisfactory level of quality with a sensible download time. The magazine with the images on for reference is here:
www.boardseekermag.com/newsletters/nov_04/
www.boardseekermag.com/gallery/index_004.htm
Re car photos, i generally find that good contrast and colour saturation gives a nice punchy image a la trackdemon.
Hope this helps
Matt
dpi refers to printer output resolution, and is often confused with ppi which is pixel resolution, most monitors display at 72ppi (which was the mac standard) whereas most PC's display at 92ppi. however it still seems most people when resizing for the web, use 72dpi/ppi... how confusing is that??
also when resizing down in photoshop.. bicubic sharper seems to work best on completed images.... as bicubic smoother when sizing up... be aware more USM is required on a larger image... more confusion??
>> Edited by bacchus180 on Friday 22 October 10:42
also when resizing down in photoshop.. bicubic sharper seems to work best on completed images.... as bicubic smoother when sizing up... be aware more USM is required on a larger image... more confusion??
>> Edited by bacchus180 on Friday 22 October 10:42
Uh - OK. I do it in a completely non-confusing way 
1) Resize picture as required, ie X x Y pixels.
2) Save As and whilst doing so apply JPEG compression to get file size suitable for the internet (PS gives a range from 0-10 and also shows you estimated file size as you move the slider).
My rule for 800 x 600 pixels is to get 100Kb or less - it depends on the subject matter. For thumbnails 10-20Kb is about right I think. Remember that dial-up folk need 4 minutes to get a 1Mb image...
However try to avoid compression of 3 or less as it does visibly mangle the image, even on the internet.
Once the image is reduced in size, it looks degraded: 3006 pixels to 800 is a big drop. So I use Filter > Sharpen to crisp it up nicely. I know this isn't how the pros do it, but in this situation it works for me.
1) Resize picture as required, ie X x Y pixels.
2) Save As and whilst doing so apply JPEG compression to get file size suitable for the internet (PS gives a range from 0-10 and also shows you estimated file size as you move the slider).
My rule for 800 x 600 pixels is to get 100Kb or less - it depends on the subject matter. For thumbnails 10-20Kb is about right I think. Remember that dial-up folk need 4 minutes to get a 1Mb image...
However try to avoid compression of 3 or less as it does visibly mangle the image, even on the internet.
Once the image is reduced in size, it looks degraded: 3006 pixels to 800 is a big drop. So I use Filter > Sharpen to crisp it up nicely. I know this isn't how the pros do it, but in this situation it works for me.
Interesting: I've tried it both ways on the Lady Street image.
This is my usual way: resize and then compress to suit:
This is using 'Save for Web', with the quality set to 62 which gave the same file size as above (about 120Kb):
There's no visible breakup around the writing, and more detail in the shadows.
So that's a win for Bacchus I think
>> Edited by simpo two on Friday 22 October 12:10
This is my usual way: resize and then compress to suit:
This is using 'Save for Web', with the quality set to 62 which gave the same file size as above (about 120Kb):
There's no visible breakup around the writing, and more detail in the shadows.
So that's a win for Bacchus I think
>> Edited by simpo two on Friday 22 October 12:10
I always save for web at 72 dpi - usually squashing to 75%(ish)
Alternatively xat.com do a free optimiser and Arles Image web page creator is fab (free trial - small fee after 30 days)... it optimised all photos and made this site with thumbnails and all the links in about 30 seconds (I then made one or two tweeks). I just had to upload the entire folder.
www.stevecarter.com/charliethedog/index.htm
Steve
Alternatively xat.com do a free optimiser and Arles Image web page creator is fab (free trial - small fee after 30 days)... it optimised all photos and made this site with thumbnails and all the links in about 30 seconds (I then made one or two tweeks). I just had to upload the entire folder.
www.stevecarter.com/charliethedog/index.htm
Steve
Just going back to the DPI question....
Resolution is a very misunderstood subject indeed. To quote a pixel size (e.g. 600x400) in relation to a resolution (e.g. 72DPI) has absolutely no meaning when the image is being displayed on a computer screen. A 600x400 picture is EXACTLY the same whether it is 1 DPI or 1000 DPI - it is always 600x400 pixels.
This is not the same if you are quoting the picture size in physical dimensions, i.e. inches/centimetres/whatever. For example, a 6"x4" print at 10 DPI is made from a 60x40 pixels photo, whereas the same print at 300 DPI is made from an 1800x1200 pixel image. Obviously the higher DPI image is a better quality in this instance.
The difference is due to the fact that a pixel is not a set size, whereas an inch obviously is.
I know this doesn't help with the original question, but I think it's useful for people to know.
With regards to that question, I usually save at 600x400, quality 9 or 10 in photoshop. Don't forget to do your sharpening after the image has been resized! GIFs are good for thumbnails that don't need to be too good quality, and when there will be lots of them on a page. Careful if you use GIF on larger photos, it is easy to get nasty posterization by mistake.
Spelling edit....
>> Edited by dcw@pr on Friday 22 October 16:24
Resolution is a very misunderstood subject indeed. To quote a pixel size (e.g. 600x400) in relation to a resolution (e.g. 72DPI) has absolutely no meaning when the image is being displayed on a computer screen. A 600x400 picture is EXACTLY the same whether it is 1 DPI or 1000 DPI - it is always 600x400 pixels.
This is not the same if you are quoting the picture size in physical dimensions, i.e. inches/centimetres/whatever. For example, a 6"x4" print at 10 DPI is made from a 60x40 pixels photo, whereas the same print at 300 DPI is made from an 1800x1200 pixel image. Obviously the higher DPI image is a better quality in this instance.
The difference is due to the fact that a pixel is not a set size, whereas an inch obviously is.
I know this doesn't help with the original question, but I think it's useful for people to know.
With regards to that question, I usually save at 600x400, quality 9 or 10 in photoshop. Don't forget to do your sharpening after the image has been resized! GIFs are good for thumbnails that don't need to be too good quality, and when there will be lots of them on a page. Careful if you use GIF on larger photos, it is easy to get nasty posterization by mistake.
Spelling edit....
>> Edited by dcw@pr on Friday 22 October 16:24
dcw@pr said:
Just going back to the DPI question....
Resolution is a very misunderstood subject indeed. To quote a pixel size (e.g. 600x400) in relation to a resolution (e.g. 72DPI) has absolutely no meaning when the image is being displayed on a computer screen. A 600x400 picture is EXACTLY the same whether it is 1 DPI or 1000 DPI - it is always 600x400 pixels.
This is not the same if you are quoting the picture size in physical dimensions, i.e. inches/centimetres/whatever. For example, a 6"x4" print at 10 DPI is made from a 60x40 pixels photo, whereas the same print at 300 DPI is made from an 1800x1200 pixel image. Obviously the higher DPI image is a better quality in this instance.
The difference is due to the fact that a pixel is not a set size, whereas an inch obviously is.
Good explanation of an almost universally misunderstood topic
Now, for an encore, explain colour profiles
srider said:
Good explanation of an almost universally misunderstood topic
Now, for an encore, explain colour profiles
Hmm colour profiles...
They, err, hmmm, err... Something to do with screens and printers?
EHASLER WHERE ARE YOU - SURELY YOU HAVE FINISHED THAT BOOK ON COLOUR PROFILES BY NOW?Gassing Station | Photography & Video | Top of Page | What's New | My Stuff