Image size on website - are there estabilished guidelines?

[Dinarius]

Just wondering if there are industry-wide accepted views on image preparation for website display, and in particular in relation to image size?

Links to any relevant articles would be welcome.

Thanks.

D.

[Bart_van_der_Wolf]

Just wondering if there are industry-wide accepted views on image preparation for website display, and in particular in relation to image size?

Hi,

I don't think so, and the actual display size may vary with display DPI, when displayed at 100% zoom. Browsers may also default to different zoom settings, for legibility of fonts. Display sizes also vary (from mobile phone to large and High DPI professional displays).

A better approach would also incorporate page layout integrity (unless you are looking at a photo gallery type of presentation), by the use of adaptive style sheet settings (which may resize images or load different resolution versions depending on the required display size in pixels).

And then there is the issue of illegal repurposing of your images ...

Cheers,
Bart

[MarkM]

I agree with Bart. Almost all web development these days is aimed at making the experience work well across all display sizes, which means you need to be flexible in image sizing. You should expect traffic from everything from small mobile screens to large workstation monitors and everything in between. It's still tricky to do this without sending needlessly large images to small screens, but there are some HTML/CSS improvements in the works for responsive images that will help once they are standardized and widely adopted.

On my site I'm using relative sizes for images and trying to detect small screens with css and javascript so I can send smaller images. It's working okay, but I'm hoping for a simpler solution in the future.

[pcgpcg]

Just wondering if there are industry-wide accepted views on image preparation for website display, and in particular in relation to image size?

Yes, "responsive web design" is considered mandatory if you want your images to view at their best on all types and sizes of devices.
http://en.wikipedia.org/wiki/Responsive_web_design

Keep in mind that modern templates supplied by sites like Photoshelter will take care of all this for you.

[sbay]

If you use google analytics, there's several features that could help you determine how to size images. First, if you go to Audience > Technology > Browser & OS  you can have it show a breakdown by screen size. It turns out that the majority of people of using shockingly small resolutions (at least for me). For example, the most common size is 1366 x 768 on my website. Second, there's also a feature that will let you graphically browse your website and show the visible area to visitors (e.g. 60% of users can see this much on the page).

[Some Guy]

If you use google analytics, there's several features that could help you determine how to size images. First, if you go to Audience > Technology > Browser & OS  you can have it show a breakdown by screen size. It turns out that the majority of people of using shockingly small resolutions (at least for me). For example, the most common size is 1366 x 768 on my website. Second, there's also a feature that will let you graphically browse your website and show the visible area to visitors (e.g. 60% of users can see this much on the page).

There was some recent talk about Google making sites the load on phone screens taking preference in their search engine recently.  Seems that the direction we are heading, but some of those small screens are very high quality too, 2,500+ pixels on horizontal axis.

Personally, with my lousy slow AT&T DSL on the desktop, if a site won't load in less than 4-5 seconds I'm pretty much outta there.  I can't stand to wait while one image scrolls to load, and then another comes up, tabs are inoperable until the site fully loads in a minute, etc.  Load fast!

SG

[Oscar Avellaneda-Cruz]

With computer displays going retina and mobile devices starting to support full HD in 6" screen;
it's best to leave the work of scaling and sizing for mobile to javascript. I recently worked with
an excellent developer on a new site and was very impressed to hear just how much fun it is
for developers to optimize performance and balance image quality.