Posted by Jack Garrett on November 8, 2008 at 10:00 AM
I've got a couple questions. Can somebody give me an idea of the best way to get images up on my new website. I loaded a couple at just over 1MB and 240ppi and they load slow. I want to get the best quality images but something that loads fast and when I click to enlarge, the image still shows clearly. I use Lightroom2 for most of my editing...I also have CS3. I also understand they should be Srgb, is that correct? Any suggestions or instructional links appreciated.
Thanks,
Jack
Posted by Brent Murphy on November 8, 2008 at 10:46 AM
Let's see.... not really sure where to start.
I'm not sure what other here will say about image size, but I wouldn't recommend putting images on your web site larger than 200k. I just checked and most of mine are under 100k. You need to figure out how large you want them to appear on the web site and resize the images to that size. Then you can adjust jpg compression to determine what kind of trade-off you want to make between quality and file size. You can do this with either Save As or Save for Web in Photoshop.
If you want to have a small file size that people can then enlarge so people can look at more detail, you could try the Zoomify tool in Photoshop. I won't explain it here, and I've never used it, but I've seen results and it looks like it should do what you want.
If you just want to have a small image that loads quickly, and then a larger image when you click a link, you probably want to make two separate image files. I actually have each image on my site in 3 different sizes (thumbnail, main image, and a smaller size for a "Buy me" page). I set up a Photoshop action that creates all the images at once. Piece of cake.
the "ppi" makes no difference at all. This could be anything you want. This only makes a difference for printing. Changing this value make no difference in file size. The actual pixel dimensions are what matters.
For web display, I would recommend converting to sRGB as you mentioned, since many browsers still lack color management.
Posted by Nat Coalson on November 8, 2008 at 11:23 AM
Unfortunately Lightroom doesn't show the anticipated file size in the Export dialog. So you'll have to do a few tests.
For your "large" images, try starting somewhere around 500 pixels on the longest side and use a JPG level of around 70.
I agree with Brent that the files shouldn't be more than around 200-300kb.
And the ppi doesn't matter.
Try to strike a balance between pixel size and compression level to get the largest, best-looking images you can while still having them load fast.
Posted by Scott Borger on November 8, 2008 at 3:26 PM
In CS3: Flatten image, reduce image size to 600 pixels on long side (at 72dpi), change mode to 8-bit, change color profile to sRGB, File --> Save As--> .jpg at around 70%.
Posted by Jody Grigg on November 8, 2008 at 7:52 PM
Images should not be 240ppi for web you 72dpi or ppi whatever you want to call it.
Posted by Rick Dunn on November 9, 2008 at 8:05 AM
Jack - how large (in pixels) are the images you're posting?
Typically, you won't see any significant benefit saving at a quality setting above 80, it'll just increase the file size. Images with tons of fine detail are notoriously difficult to save at reasonable file sizes, so some compromise is necessary. I agree with the 200-250kb limit on file size, and that should work very well even on images that are 650-700 pixels on the long side. The Save For Web function in CS3 will let you see the file size as you adjust the quality slider.
dpi has no significance for web display, only for printing.
Posted by Brent Murphy on November 9, 2008 at 10:14 AM
Scott and Jody - Changing to 72dpi (ppi) will have no effect for what he is doing.
[edit: Actually, changing the ppi does affect one other area besides printing. If you are adding text onto your images, and you have your settings so that you add text by points, instead of pixels, then having the correct ppi will make a difference in how that text displays.]
Discussion
6 repliesThanks,
Jack
I'm not sure what other here will say about image size, but I wouldn't recommend putting images on your web site larger than 200k. I just checked and most of mine are under 100k. You need to figure out how large you want them to appear on the web site and resize the images to that size. Then you can adjust jpg compression to determine what kind of trade-off you want to make between quality and file size. You can do this with either Save As or Save for Web in Photoshop.
If you want to have a small file size that people can then enlarge so people can look at more detail, you could try the Zoomify tool in Photoshop. I won't explain it here, and I've never used it, but I've seen results and it looks like it should do what you want.
If you just want to have a small image that loads quickly, and then a larger image when you click a link, you probably want to make two separate image files. I actually have each image on my site in 3 different sizes (thumbnail, main image, and a smaller size for a "Buy me" page). I set up a Photoshop action that creates all the images at once. Piece of cake.
the "ppi" makes no difference at all. This could be anything you want. This only makes a difference for printing. Changing this value make no difference in file size. The actual pixel dimensions are what matters.
For web display, I would recommend converting to sRGB as you mentioned, since many browsers still lack color management.
For your "large" images, try starting somewhere around 500 pixels on the longest side and use a JPG level of around 70.
I agree with Brent that the files shouldn't be more than around 200-300kb.
And the ppi doesn't matter.
Try to strike a balance between pixel size and compression level to get the largest, best-looking images you can while still having them load fast.
Typically, you won't see any significant benefit saving at a quality setting above 80, it'll just increase the file size. Images with tons of fine detail are notoriously difficult to save at reasonable file sizes, so some compromise is necessary. I agree with the 200-250kb limit on file size, and that should work very well even on images that are 650-700 pixels on the long side. The Save For Web function in CS3 will let you see the file size as you adjust the quality slider.
dpi has no significance for web display, only for printing.
[edit: Actually, changing the ppi does affect one other area besides printing. If you are adding text onto your images, and you have your settings so that you add text by points, instead of pixels, then having the correct ppi will make a difference in how that text displays.]