Optimum Image Size for Website?

[Mikee_j]

Hi all,

Putting together a website for my company and wondered what the optimum image size and resolution is? Obviously my 15mb files are too big, but i still want the photos to be viewed at a decent quality as the photos are integral to the business itself. Its a property development company so the images must be excellent quality.

Any comments on this welcomed...

 

[neil_g]

depends how many images are loaded on the page.

 

[Harlequin565]

I'd say your images need to be starting at 72dpi / jpeg quality. No real reason to have anything higher if you're displaying on a screen.

As to size, the most common visitors to my site are not viewing at 1920x1080 or larger as I'd expect, but are viewing at 1024x768 and 1366x768 which look like smartphone/tablet screen resolutions! This data is available in Google Analytics if you have a website so you can track what size displays your visitors are using. Once you have some historic data, you can better tune your site to the majority of your visitors.

1000px on the longest side would probably be a good starting point. Lightroom/PS can change your big raw files down to web appropriate sizes and compress the jpegs to a few hundred K per image.

If the images are that important, you could allow them to be downloaded so that they can be examined much closer up. A simple "click to download" on a smaller thumbnail would prevent long page loads and allow visitors to get high res versions of what they want.

 

[neil_g]

you can also use something like pingdoms site speed test to see if the combination of images and code on the page loads at a reasonable speed..

http://tools.pingdom.com/fpt/

 

[Mikee_j]

Thanks for the quick replies.

I've started with 73 dp and 1000px long side. A few of the images which provide a background to the home page i've increased the size to avoid pixellated viewing when on big screens such as the 27" imac

 

[Deleted sulking member 63079]

DPI doesn't change anything! Make it 10000 DPI if you want. The file size won't be any bigger and it won't look any different on a screen.

 

[theurbanclown]

Yep, dpi is irrelevant.

800px wide is quite a nice size and quality can remain high without huge file sizes.

 

[LC2]

As to size, the most common visitors to my site are not viewing at 1920x1080 or larger as I'd expect, but are viewing at 1024x768 and 1366x768 which look like smartphone/tablet screen resolutions!

No they're not.
1366x768 is pretty much the standard resolution for 14 or 15 inch widescreen laptops.
1024x768 being the standard (4:3) laptop screen equivelent

Here's a (admitedly 1 year old) list of tablet resolutions:
http://bobmckay.com/web/tablet-smartphone-resolutions-screen-sizes/
Admittedly some match, but the vast majority don't.

 

[4wd]

800px wide is quite a nice size and quality can remain high without huge file sizes.

It looks tiny on modern wider monitors, I'd say 1024 pixels longest side with some compression if need be to keep it around 200kb (depends on how much detail is in the frame)
In dial up days the default larger image was 640 pixels/100kb or maybe (gasp) 800pixels for something a bit special.

 

[theurbanclown]

It looks tiny on modern wider monitors, I'd say 1024 pixels longest side with some compression if need be to keep it around 200kb (depends on how much detail is in the frame)
In dial up days the default larger image was 640 pixels/100kb or maybe (gasp) 800pixels for something a bit special.

800px works well for me.

I find 1024px is too wide.

 

[nass]

A lot of responsive layouts use even larger, ie 2000px on the long side, so high resolution monitors show very impactful images. The problem is always the tradeoff of filesize vs. download time unless you use CSS to cascade different size images for different px size UIXs - perfectly doable but does take a little bit of technical knowledge.

 

[Deleted member 49549]

A lot of responsive layouts use even larger, ie 2000px on the long side, so high resolution monitors show very impactful images. The problem is always the tradeoff of filesize vs. download time unless you use CSS to cascade different size images for different px size UIXs - perfectly doable but does take a little bit of technical knowledge.

You have hit the nail on the head - is the website template responsive or not and can it serve different resolutions? Also is the site needing high resolution detailed images?