PDA

View Full Version : What size stock photos do I need for good quality


fool32696
10-02-2008, 11:27 PM
Here's my work in progress to see how big the pics will be: www.centralfloridalandscape.com/MnGhome.html

I'm debating between buying small files (847x567) and medium files (1694x1133). I'm thinking that the medium file will be overkill for the pic size on the site and be a waste of money. What do you guys think? I don't have any experience in buying stock photos.

Feel free to tear my site apart while you're at it.

Turboguy
10-03-2008, 07:02 AM
The internet displays photos at 72 pixels per inch. Your 847x567 would display at roughly 12" x 8" and you will likely have to reduce them in size to use them. You would be wasting your money to buy the larger size. They too will have to be reduced even more and you would not gain anything.

Turboguy
10-03-2008, 07:05 AM
Just as a little example of what I was talking about is the photo with the boys and dog is at 389 x 280 pixels. Whatever size you buy it in would need to be reduced to 389 x 280 so no sense buying something you can't use.

The photos seem nice by the way.

fool32696
10-03-2008, 03:23 PM
thanks for the advice, exactly what I was looking for

Jb3NH
10-06-2008, 10:50 PM
if you have the time to edit your photos, croppin and what not, i'd suggest using the .bmp (bitmap) format for your pictures. Saves space, and loads a heck of alot faster for your viewer. theres a common function "save for web" that'll do that for you.

Turboguy
10-08-2008, 07:27 AM
JB, since you do website work part time I am assuming you know what you are talking about but it goes against what I always thought. My impression was always that BMP files were larger than JPG and did not work as well as photos. I was under the impression that JPG was the choice for photos, GIFs for solid colors and things like logos and TIF for printwork. Click on almost any photo on the internet and it is a JPG.

Assuming he is using a digital camera the native format would be jpg and I also thought it was better to not convert format's any more than you have to. Truthfully I didn't even think a Bitmap photo would display on the internet.

steveparrott
10-08-2008, 11:32 AM
The only file formats that will display properly in a web browser are .jpg, .gif and .png. Jpg is the best format for these types of photos.

When you buy stock photos, you should only purchase .tifs since they can be retouched, resized and saved without losing quality.

amtrucker22
10-08-2008, 11:48 AM
Site looks good. I would like to meet the girl in the picture on the Contact Us page :D

cbscreative
10-09-2008, 11:05 PM
if you have the time to edit your photos, croppin and what not, i'd suggest using the .bmp (bitmap) format for your pictures. Saves space, and loads a heck of alot faster for your viewer. theres a common function "save for web" that'll do that for you.
I recommend against this. The BMP format is PC based and Macs will most likely choke on them unless they have some kind of add-on to view BMP images. The advice to use JPEG for photos, and GIF for images like logos that have solid areas of color, is good advice. If you're concerned about file size, you need software that has a save for web option. Unless you're doing high end work, Paint Shop Pro form Corel is a great program for the price and will suit your needs nicely.

As for the question of what size to buy, the advice given so far is pretty accurate, but I would advise thinking about whether you might need the images for other uses. If you want to also use them on printed materials, they need to be at least 300 pixels per inch (ppi) for good quality printing. The larger the better when you are printing (you can always go down in size, but they look horrible if you try to go up in size). For the web, 72 ppi is enough, and 300 pixels or less on the longest dimension is good for most page images.

Turboguy
10-10-2008, 09:46 AM
When CBS said 72 dpi is enough he is correct but let me clarify that a bit. Whatever the dpi is on your photos they will display on the internet at 72 dpi. To make what I am trying to say clear if you had a 2 x 2 photo at 144 dpi (exactly twice the 72 just to explain) then it would appear on your web page at 4 x 4. If it was a 2 x 2 photo at 288 dpi then it would display as 8 x 8. If you want the photo to appear as 2 x 2 having the wrong dpi could mess up your layout.

If you want to do print, print is usually done at 300 DPI in a TIF format. The colors on the web use an RGB display (Red Green Blue). For print they use a CMYK color scheme Cyan, Magenta,Yellow, and Black. (Don't ask me why K= Black) Many photo editing programs will let you set the mode to either RGB or CMYK.

cbscreative
10-10-2008, 12:56 PM
Turbo, it seems like you are saying that the browser will size an image as 72 ppi only. Personally, I disagree with conventional wisdom that states that all web images should be set to 72 ppi. I've had many cases where the image looks too distorted this way and using a higher resolution sharpens the image even in the browser that is not supposed to know the difference. The browser is smart enough to know what the resolution is set at, and will display the image at the correct size on a web page.

In reality, the clarity of the image is determined by the resolution setting of the computer that is viewing the page. The vast majority of computers are now set at 1024x768 meaning that your screen has 1024 pixels across and 768 pixels from top to bottom. The lower you set the resolution, the bigger the pixels get. That's why bigger screens can have higher res settings without making things too tiny on the screen.

As for file size, a 72 ppi image will definitely be smaller than a 300 ppi image, but programs like Photoshop can take down a higher res image to reduce the file size while preserving the quality. The biggest reason to use 72 ppi is if you don't want someone getting nicer quality images from your site that can be printed. At 72 ppi, the only thing they are good for is screen display. With modern computers, you'll be able to see better clarity in your images if you use a higher res for web images. That's why I don't agree with the 72 ppi rule for every case.

Turboguy
10-10-2008, 04:42 PM
I agree with you in some ways and disagree with you in others. The determining factor is what resolution the web page is designed for. If the web page is designed for a screen with a resolution of 1024x768 a photo that is 72 pixels by 72 pixels will appear to be one inch by one inch on the screen.

Yes, that is the most common resolution with 48 percent of all users set for that. Of course 38 percent have a higher resolution and only 8 percent still use the 800 x 600.

Screen resolution can cause the pixels to change from square to rectangular which distorts the image.

cbscreative
10-11-2008, 01:44 AM
I think I understand what you are getting at, Turbo, but it's more to do with printing than screen dimensions. For instance, a computer set at 800x600 will show an image at twice the size on the screen as one set at 1600x1200. In printing, if the resolution is 300 ppi and the image is 600 pixels wide, it will print 2" wide. On your point about distorting the image, all those off beat resolution settings will definitely do that. For example, 640x480, 800x600, 1024x768, 1280x960 and 1600x1200 are all identical proportions which don't distort images, while 1152x864, 1280x1024, and many other res settings do distort images. It is also important to note that 1280x800, 1440x900, and others with the same ratio are standard wide screen resolutions which are proportioned to not distort images.

Turboguy
10-12-2008, 07:30 AM
Well, yes, but in printing a photo that is 1" x 1" and 150 DPI will print the same size as a photo that is 1" x" 1" and 300 D.P.I. On the web a photo that is 1" x 1" and 144 dpi will display as twice the size of the same sized photo that is 72 dpi. I agree with you that how large the photo will appear depends on the monitor settings and I agree that a 1" x 1" photo will not appear at that size on all computers.

steveparrott
10-19-2008, 03:57 PM
cbs,

Are you saying that you will put a higher resolution image on a web page and set the size smaller? For example would you href an image with dimensions of 144 x 144 and set the size to 72 x 72?

I always avoided that because of the concern that the page might briefly blow out since the image's full size might momentarily display before the 72 x 72 command kicked in. I've seen this. Also, wouldn't the browser degrade the image as it scales down the image?

One advantage of doing this might be to counter users who use the zoom-in command - in that case the zoomed image might maintain it's clarity. I don't know.

cbscreative
10-21-2008, 02:41 PM
cbs,

Are you saying that you will put a higher resolution image on a web page and set the size smaller? For example would you href an image with dimensions of 144 x 144 and set the size to 72 x 72?

I always avoided that because of the concern that the page might briefly blow out since the image's full size might momentarily display before the 72 x 72 command kicked in. I've seen this. Also, wouldn't the browser degrade the image as it scales down the image?

One advantage of doing this might be to counter users who use the zoom-in command - in that case the zoomed image might maintain it's clarity. I don't know.
If I understand your question correctly, this is something I avoid doing. If the image is 144x144, that's what I set it at. Whenever you force the image into a different size in the code than what the image really is, it looks very distorted. Besides, if it is 144x144 and I tell the HTML to display it at 72x72, it also is still the same file size in kilobytes. If I use Photoshop to change it from the larger to the smaller, not only does it display clearly, it will reduce the file size (most likely to about 25% of the larger image).

I would also note that I always include the dimensions in the HTML. If you've ever seen things jump around on the screen while a page is loading, one reason is when the dimensions are not set in the img tag.

We are also talking about size vs. resolution. A digital camera takes pictures at a certain resolution as well as size. Let's use the example of 180 ppi resolution with 1600x1200 image size. When you open the digital picture with a program such as Photoshop, that's the size it would be. You can tell Photoshop to scale it down to 300x225 for a web page, but unless you specifically change the resolution, it will still be 180 ppi, not 72. The browser will still display it at 300x225 even if you don't change the res to 72 ppi. The 180 ppi just means it will print nicer than if the res were 72 ppi.

Kiril
11-11-2008, 09:45 AM
My impression was always that BMP files were larger than JPG and did not work as well as photos.

Your impression is correct. Keep/take your original photo at the highest resolution possible and store in a uncompressed format (like raw, bmp, or uncompressed tiff) if possible. ALWAYS keep the original intact, and save any changes to it as copies. When editing, always do the resize and compression LAST!

I was under the impression that JPG was the choice for photos, GIFs for solid colors and things like logos and TIF for printwork. Click on almost any photo on the internet and it is a JPG.

.png is quickly becoming the preferred format for the internet. Not really sure where you got the 72 dpi restriction.

Kiril
11-11-2008, 10:04 AM
I would also note that I always include the dimensions in the HTML. If you've ever seen things jump around on the screen while a page is loading, one reason is when the dimensions are not set in the img tag.

Boooo .... do it in your CSS. Things jumping around on the screen usually is a result of poorly written code or CSS positioning. The image attributes should not make any difference unless you are resizing the image via CSS or HTML, which as you have noted, is generally not a good idea unless you do a proportional resize.