Forums > Photography Talk > What do you feel is the ideal size for web images?

Photographer

Forrest Black

Posts: 51

Las Vegas, Nevada, US

Without trying to take bandwidth issues into account, what image sizes do you tend to feel are best? Having an image too small sometimes seems to lose a lot of detail, but having an image too big for your monitor can be really irritating. Since lots of people use different monitor resolutions, it seems like the sizes are all over the place. What do you think is the best height and width for both portrait images as well as landscape image presentation?

Jun 24 05 10:09 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by Forrest Black: 
Without trying to take bandwidth issues into account, what image sizes do you tend to feel are best? Having an image too small sometimes seems to lose a lot of detail, but having an image too big for your monitor can be really irritating. Since lots of people use different monitor resolutions, it seems like the sizes are all over the place. What do you think is the best height and width for both portrait images as well as landscape image presentation?

it's not the size; it's the impact.

At most, keep it within 1024x768. A nice rule of thumb is 600dpi on the longest side.

USM after you resize.

Convert to sRGB if it is AdobeRGB...even if you use "save for web."


Jun 24 05 10:34 am Link

Photographer

Karl Blessing

Posts: 30911

Caledonia, Michigan, US

erm you mean 600 pixels on the long side, not 600 dots per inch, as your monitor isnt exactly measured in inches in the computer's perspective.

Far as what I use, I dont normally go past 600x400 or so.

Jun 24 05 10:42 am Link

Photographer

udor

Posts: 25255

New York, New York, US

I do 600 x 400 pixels and 96dpi, which gives you and images around 100kb and loads quickly enough.

I am not sure if that is the very best for clarity... I know it's not... but it's the midrange that people can see the full picture on their monitors (even the small ones or with large settings) without scrolling!

The images are in fact sometimes pixelated but I take that into consideration... Oh... I also don't use photoshop, but Digital Images Pro 10 from Microsoft.

Jun 24 05 10:43 am Link

Photographer

Forrest Black

Posts: 51

Las Vegas, Nevada, US

DPI is kinda pointless for web presentation, so I think it makes sense to communicate the specs in pixel dimensions.

Jun 24 05 10:49 am Link

Photographer

chas fenoughty

Posts: 27

London, Arkansas, US

The two most common resolutions are 1024 x 768 and 800 x 600. IMHO whilst I prefer the larger we ought to allow for the smaller, so I set images to be no higher than 430 pixels and whatever width they like. This way they can be seen on a single screen fall in microsoft IE at a resolution of 800 x 600 (which gives a maximum window of 780 x 430) in the browser.

chas

Jun 24 05 10:50 am Link

Photographer

chas fenoughty

Posts: 27

London, Arkansas, US

oh yeah - one point about resolution.

Screen resolution is always 72dpi. It's what monitors display at, they display pixel size only.

so if you image is:

300 pixels wide
600 pixels high

it will display on screen at 300 pixels wide and 600 pixels high, whatever DPI is specified, DPI is for printing and IE, Mozilla, Opera - whatever all ignore the DPI resolution you put in.

Jun 24 05 10:53 am Link

Model

theda

Posts: 21719

New York, New York, US

I prefer no larger than 600 pixels on the longest side. Definitely no more than 600 pixels wide, as that will caus too many people to have to side scroll. And we hate that.

DPI should stay relatively low (under 100) for file size reasons.

Jun 24 05 10:54 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by chas fenoughty: 
oh yeah - one point about resolution.

Screen resolution is always 72dpi. It's what monitors display at, they display pixel size only.

so if you image is:

300 pixels wide
600 pixels high

it will display on screen at 300 pixels wide and 600 pixels high, whatever DPI is specified, DPI is for printing and IE, Mozilla, Opera - whatever all ignore the DPI resolution you put in.

72dpi is a myth. A 15-inch monitor and a 20-inch monitor have a different number of dots per inch, so it is a meaningless value.

The 300 pixels will be a different size on differnt sized monitors, so the image will never be 72dpi.

In other words, an image that is 72dpi will not be only 1 inch on every monitor.

Monitors do not display 72dpi.

Posted by theda: 
DPI should stay relatively low (under 100) for file size reasons.

If you set the longest side to 600 pixels, you can set the dpi to any value you wish without affecting image size. 600 pixels are 600 pixels no matter how many inches they take up. This is why 72dpi is a myth for the web.

Jun 24 05 10:58 am Link

Photographer

chas fenoughty

Posts: 27

London, Arkansas, US

DPI makes no difference on web anyway its all ignored

XA - PC user I presume?

PC - 96
Mac - 72

Doesn't make any difference anyway cos browser ignore it and just diplay according to pixels what ever dpi you put in

Jun 24 05 11:01 am Link

Model

theda

Posts: 21719

New York, New York, US

Posted by XtremeArtists: 

Posted by theda: 
DPI should stay relatively low (under 100) for file size reasons.

If you set the longest side to 600 pixels, you can set the dpi to any value you wish without affecting image size.

Not images size, file size. Say a 600x600 image at 75 dpi is 75K, a 600x600 image at 300 dpi would be 300k (or so). Faster loading time.

Jun 24 05 11:02 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by theda: 

Posted by XtremeArtists: 

Posted by theda: 
DPI should stay relatively low (under 100) for file size reasons.

If you set the longest side to 600 pixels, you can set the dpi to any value you wish without affecting image size.

Not images size, file size. Say a 600x600 image at 75 dpi is 75K, a 600x600 image at 300 dpi would be 300k (or so). Faster loading time.

Nope.

A 600x600 image is always 600x600 and will always display the same size on the screen regardless of what dpi value you set.

It's simple math: 600 x 600 = 600 x 600

DPI is meaningless on the web.

Jun 24 05 11:06 am Link

Photographer

udor

Posts: 25255

New York, New York, US

Posted by chas fenoughty: 
oh yeah - one point about resolution.

Screen resolution is always 72dpi. It's what monitors display at, they display pixel size only.

The newer monitors are 96dpi.

So, if you set it to 96, the old 72dpi monitors won't see a difference, but for the new ones it'll make a difference.

Jun 24 05 11:07 am Link

Photographer

chas fenoughty

Posts: 27

London, Arkansas, US

Posted by theda: 

Posted by XtremeArtists: 

Posted by theda: 
DPI should stay relatively low (under 100) for file size reasons.

If you set the longest side to 600 pixels, you can set the dpi to any value you wish without affecting image size.

Not images size, file size. Say a 600x600 image at 75 dpi is 75K, a 600x600 image at 300 dpi would be 300k (or so). Faster loading time.

A 600pixelx600pixel image will be the same file size what ever the DPI since it is 600x600 pixels. It will print to a different size and at different quality that's all.

600mm x 600mm will be different file sizes at different DPI - but that is because they will have differnt numbers of pixels.

Jun 24 05 11:08 am Link

Model

theda

Posts: 21719

New York, New York, US

Posted by chas fenoughty: 
A 600pixelx600pixel image will be the same file size what ever the DPI since it is 600x600 pixels. It will print to a different size and at different quality that's all.

That is not true. When you reduce DPI, you reduce file size.

Jun 24 05 11:19 am Link

Photographer

Glamour Studio /Gary

Posts: 1237

It's quite easy to find out in PS. If you save an image say at 405 x 265 (that's my size) at 300dpi it will be somewhere around 73k, PS tells you this.
If you change the dpi to 72dpi and bring the size back to 405 x 265 it will save it at the same exact 73k, there is no difference in loading time. Try it yourself in PS or whatever you use. PS "tells" you the "k" size when it's saved. It's that simple.

Jun 24 05 11:20 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by Udo R Photography: 

Posted by chas fenoughty: 
oh yeah - one point about resolution.

Screen resolution is always 72dpi. It's what monitors display at, they display pixel size only.

The newer monitors are 96dpi.

So, if you set it to 96, the old 72dpi monitors won't see a difference, but for the new ones it'll make a difference.

Nope.

You can set the monitor resolution to 800x400 or 1024x760 for example. There are different sized monitors too.

There is no standard dpi on the web.

I wish people would stop repeating this myth as if it were fact.

Once upon a time the was a Macintosh. It pioneered WYSIWYG computing.

On that computer, there was a standrd dpi.

This is not true any more.

There are different sized monitors running at different resolutions creating myriad DPIs.

Regrdless of what DPI you set all 600x600 images will always display at the same size on the web using the same monitor and resolution. The file size will always be the same regardless of DPI. The image size only changes based on pixel dimension, monitor resolution, and monitor size. DPI is meaningless and has no effect for the web.

Try it.

Jun 24 05 11:20 am Link

Model

theda

Posts: 21719

New York, New York, US

Posted by Glamour Studio /Gary: 
It's quite easy to find out in PS. If you save an image say at 405 x 265 (that's my size) at 300dpi it will be somewhere around 73k, PS tells you this.
If you change the dpi to 72dpi and bring the size back to 405 x 265 it will save it at the same exact 73k, there is no difference in loading time. Try it yourself in PS or whatever you use. PS "tells" you the "k" size when it's saved. It's that simple.

I've done it myself, both in PS and PSP.

Jun 24 05 11:23 am Link

Photographer

chas fenoughty

Posts: 27

London, Arkansas, US

Posted by theda: 

Posted by chas fenoughty: 
A 600pixelx600pixel image will be the same file size what ever the DPI since it is 600x600 pixels. It will print to a different size and at different quality that's all.

That is not true. When you reduce DPI, you reduce file size.

only if you tick the wrog box when doing so and thats only because it changes the pixels.

600 x 600 pixels will always be the same files size (providing you maintain the other factors, jpeg, gif, tiff, compression etc.)

600 x 600 pixels is 360000 pixelks in total - whatever the DPI you set - it doesn't make a differece. Truly - trust me. Ir better yet try it.

Jun 24 05 11:24 am Link

Photographer

XtremeArtists

Posts: 9122

Regrdless of what DPI you set all 600x600 images will always display at the same size on the web using the same monitor and resolution. The file size will always be the same regardless of DPI. The image size only changes based on pixel dimension, monitor resolution, and monitor size. DPI is meaningless and has no effect for the web.

Jun 24 05 11:27 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by theda: 

Posted by chas fenoughty: 
A 600pixelx600pixel image will be the same file size what ever the DPI since it is 600x600 pixels. It will print to a different size and at different quality that's all.

That is not true. When you reduce DPI, you reduce file size.

This is why I don't let models do Photoshop on the images I give them, but I'm surprised by the number of photogs who think dpi is used by web browsers.

Jun 24 05 11:28 am Link

Photographer

udor

Posts: 25255

New York, New York, US

Posted by XtremeArtists:   but I'm surprised by the number of photogs who think dpi is used by web browsers.

That was explained to me by a high prized owner of a web company. He told me that I should save in 96 dpi for the reason I described above.

So... you are basically saying that if I size the picture to e.g. 600 x 400... that there is NO DIFFERENCE whether I set it to 10 dpi or 300dpi.

I KNOW that the dpi is set for printing at images print excellent at 300 dpi.

But for monitor display... you say there is NO difference... I am just asking because now I really want to know what the deal is.

Udo

Jun 24 05 11:37 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by Udo R Photography: 

Posted by XtremeArtists:   but I'm surprised by the number of photogs who think dpi is used by web browsers.

That was explained to me by a high prized owner of a web company. He told me that I should save in 96 dpi for the reason I described above.

So... you are basically saying that if I size the picture to e.g. 600 x 400... that there is NO DIFFERENCE whether I set it to 10 dpi or 300dpi.

I KNOW that the dpi is set for printing at images print excellent at 300 dpi.

But for monitor display... you say there is NO difference... I am just asking because now I really want to know what the deal is.

Udo

Owners usually only know about business. Anyone who has written HTML knows you set up the dimensions of a window for an image (600x600) without any regard to dpi.

If you try it yourself, you will not have to take my word for it, but you have paraphrased me correctly.

Jun 24 05 11:41 am Link

Photographer

udor

Posts: 25255

New York, New York, US

Posted by XtremeArtists:
Owners usually only know about business. Anyone who has written HTML knows you set up the dimensions of a window for an image (600x600) without any regard to dpi.

He wrote code for then for years before he bought the company last year.

Jun 24 05 11:56 am Link

Photographer

XtremeArtists

Posts: 9122

Posted by Udo R Photography: 

Posted by XtremeArtists:
Owners usually only know about business. Anyone who has written HTML knows you set up the dimensions of a window for an image (600x600) without any regard to dpi.

He wrote code for then for years before he bought the company last year.

Did you try it yet?

Maybe he wrote C++ for the backend servers and has no clue...

Jun 24 05 11:57 am Link

Photographer

udor

Posts: 25255

New York, New York, US

Posted by XtremeArtists: 

Posted by Udo R Photography: 

Posted by XtremeArtists:
Owners usually only know about business. Anyone who has written HTML knows you set up the dimensions of a window for an image (600x600) without any regard to dpi.

He wrote code for then for years before he bought the company last year.

Did you try it yet?

Maybe he wrote C++ for the backend servers and has no clue...

No, he is a webdesigner and has government contracts (and defense contractors) for building and maintaining their websites.

I didn't do it yet... I have to edit images shortly... but I also have to run to an assignment (Hollywood director at the World Urban Film Festival), got to cover the screening this afternoon and the interview.

Jun 24 05 12:02 pm Link

Photographer

XtremeArtists

Posts: 9122




Here is an article I Googled on the DPI myth.

The author has an example of the same photo at 100 DPI and 1 DPI.

The author attempts to answer the OP's question. However I disagree with the author on the final size of the image:

"I make horizontal images about 360 pixels wide, vertical images 240 pixels tall. I find that those sizes appear not too large on 800x600 monitor displays, but not too small for 1280x1024."

Personally, I think 600 on the longest side is a good rule of thumb for now.

Jun 24 05 12:04 pm Link

Photographer

udor

Posts: 25255

New York, New York, US

Posted by XtremeArtists: 
Here is an article I Googled on the DPI myth.

Thanks... that is outstanding!

Now I don't have to worry anymore that people download my pix for their portfolio and really have to order from me!

Excellent info!

Udo

Jun 24 05 12:06 pm Link

Photographer

XtremeArtists

Posts: 9122

Posted by Udo R Photography: 

Posted by XtremeArtists: 
Here is an article I Googled on the DPI myth.

Thanks... that is outstanding!

Now I don't have to worry anymore that people download my pix for their portfolio and really have to order from me!

Excellent info!

Udo

If you post an image 600 pixels tall to the web, someone could print it from 2" to 5.25" tall depending on the method and get an acceptable print. Of course the 5.25" print would not look as good as a print you made from a hires file, but some might not care. I don't think they could get an acceptable 9x12 print from your web image unless the CIA or FBI came in to help.

I was a bit surprised when I found out 72dpi was not imprtant. It seems to be an idea that is held over from when there was one monitor size and resolution on the original Macintosh.


Jun 24 05 12:20 pm Link

Model

theda

Posts: 21719

New York, New York, US

I take it back. I get confused somewhere between inches and pixels.

I was first told the 72dpi thing by a presentation graphics designer. Should he demand his money back from SVA?

Jun 24 05 12:28 pm Link

Photographer

Brian Diaz

Posts: 65617

Danbury, Connecticut, US

The easiest way to think of it is that monitors think in pixels and paper is measured in inches.  The only time ppi is a factor is when you are taking a piece of paper and making a file so you can view it on your monitor; or when you are taking an image on your monitor and putting it on paper.

Jun 24 05 12:29 pm Link

Photographer

XtremeArtists

Posts: 9122

Posted by theda: 
I take it back. I get confused somewhere between inches and pixels.

I was first told the 72dpi thing by a presentation graphics designer. Should he demand his money back from SVA?

It was true once. Technology changes, so the truth changes. What the designer or SVA should have done is to stay current with tech if passing out advice.

Jun 24 05 12:34 pm Link

Photographer

jpsc

Posts: 22

Santa Clara, California, US

My rule of thumb for picture - make the pixel (w or l) divisible by 8.  That way upsize and downsize is simple and retain the even sharpness.  Beside your camera CCD pixel size is divisible by 8 (for W or L)

So for web, my standard size is 800 or 640, and I let photoshop scale the short size for me.

Jun 24 05 12:48 pm Link

Photographer

Forrest Black

Posts: 51

Las Vegas, Nevada, US

Yeah, DPI has a lot more to do with printed media and/or print production and is important to take into consideration when it comes to linescreen and all that junk magazine and newspaper production people care about. On the web, DPI is somewhat meaningless. I have found that DPI can have an effect on font sizes if you are trying to put a copyright notice on an image or something, and for that sort of task it can make your life easier to work at a DPI that is at least close to standard monitor specs. That is where the 72 or 96 DPI tends to come into play.

However, now that we've gotten that out of the way, it looks like some folks like a 600x400 and some folks like an 800x600, or thereabouts. Depending of film format/dimensions, we can simply say longest side around 600 to 800. Is that about right?

Jun 24 05 04:12 pm Link

Photographer

XtremeArtists

Posts: 9122

Posted by Forrest Black: 
Yeah, DPI has a lot more to do with printed media and/or print production and is important to take into consideration when it comes to linescreen and all that junk magazine and newspaper production people care about. On the web, DPI is somewhat meaningless. I have found that DPI can have an effect on font sizes if you are trying to put a copyright notice on an image or something, and for that sort of task it can make your life easier to work at a DPI that is at least close to standard monitor specs. That is where the 72 or 96 DPI tends to come into play.

However, now that we've gotten that out of the way, it looks like some folks like a 600x400 and some folks like an 800x600, or thereabouts. Depending of film format/dimensions, we can can simply say longest side around 600 to 800. Is that about right?

If your image was 800 pixels high, I'd have to scroll vertically on my laptop.


Jun 24 05 04:16 pm Link

Photographer

Forrest Black

Posts: 51

Las Vegas, Nevada, US

Posted by XtremeArtists: 
If your image was 800 pixels high, I'd have to scroll vertically on my laptop.

Yeah, that's kinda why I asked. I tend to run my monitor at 1020x1280, and that's not even the highest resolution setting it can run at, so 600x400 images look pretty small these days. I used to do them at that size, but that was years ago. I know the MM tech folks could take a peek at their server stats (depending on what they were using) and figure out what the average resolution their visitors monitors were set at, but suffice to say it's really variable on the web these days.

Jun 24 05 04:23 pm Link

Photographer

XtremeArtists

Posts: 9122

FYI...I just did a screen capture on my iBook running Firefox. With tabs and all the other real estate eating GUI elements activated, there are exactly 596 vetical pixels visible without scrolling.

Jun 24 05 07:44 pm Link

Photographer

Forrest Black

Posts: 51

Las Vegas, Nevada, US

Posted by XtremeArtists: 
FYI...I just did a screen capture on my iBook running Firefox. With tabs and all the other real estate eating GUI elements activated, there are exactly 596 vetical pixels visible without scrolling.

Yeah, with extra toolbars and scrollbars, I still have about 1260w x 900h as far as clear browser space at the resolution I'm running my monitor, and it's a fairly standard off the shelf model.

Jun 24 05 08:05 pm Link

Photographer

Marcus J. Ranum

Posts: 3247

MORRISDALE, Pennsylvania, US

With the plummeting cost of monitors, most people who are remotely serious about imaging are on 17" or 19" panels or CRTs. I mean, seriously, this is a modelling site for crying out loud. If your display can't handle a 1000x1000pixel image then your future's going to be full of side-scrolling anyhow - in 2 years 17" will be standard and 19" will be "prosumer" - the rest of us will be using 24" flat panels.
19" flat panels are getting cheap enough that I've got 2 on my desk and am thinking of adding a 3rd as soon as I can find a billable customer to justify it for tax purposes. wink

I get irritated by sites that put so much spacing or clutter around the side of images that it's even an issue - that's why I bailed out of AllModelZone; too visually cluttered. Fancy bells and whistles are going "out" in web design and it's about time.

mjr.

Jun 24 05 08:18 pm Link

Photographer

XtremeArtists

Posts: 9122

Laptops are selling faster than desktops with CRTs.

I guess it depends on who your target audience is and which is the lowest res display you want to design for.


Jun 24 05 08:34 pm Link