Image size for web site

[monkey44]

The tech guy who's helping me build a website want to know what size images I should send him so he can create a thumbnail that will enlarge to page size on the site when someone clicks on it.

Can anyone give me the specs for the right size image? Size or length / width ... I'm not very "tech smart" so want to give him the best size to see a good image when it's open, but not so large it takes forever opening it.

I know there is a fine line there, and I have no idea what that is ... thanks BD

 

[ajfotofilmagem]

Right size? For what use?
I suggest you search the sites considered "ideal" and save images to analyze their resolution.

In general, computer monitors show up to 1920x1080. So I see no need for pictures with more resolution than 1800 lines at the longest side.

 

[markhadden69]

Hey there, I never really comment on forums but I saw this and thought I would share my experience.
I have a lot of research for my own websites and this seems to be working for me now at last.. This is what do:

1 Rename the images with keywords so that they fit in the "google search world"; and that you will exist on the internet. For example: amsterdam-modern-architecture-facade-IJ-black-white-mark-hadden-photography-009.jpg
2 Resize images to 72 dpi, 1500 pixels on the vertical edge, srgb (for monitors) and 100% quality. This seems to work perfectly for my squarespace portfolio sites.
3 Resize/compress the files with jpeg mini. This little bit of software compresses jpegs incredibly without quality loss at all and this keeps the website loading fast. Websites need to be responsive and theres nothing worse than large files slowing page loading.

I am not an expert but this is really working for me now.
hope it helps.
mark
www.markhadden.co.uk
www.markhaddenphotography.com

 

[Marsu42]

The tech guy who's helping me build a website want to know what size images I should send him so he can create a thumbnail that will enlarge to page size on the site when someone clicks on it.

The latest development with html5 (newer browsers) and slideshow modules like juicebox is to provide *multiple* image sizes that are automatically chosen according to the output device.

For old-school sites, you usually don't want a pop-up to fill the entire screen obscuring navigation elements, but only a nice frame in the center. Afaik you should be fine with 1024x683 (a standard flickr size) pixels as this is nearly "full screen" for people using wide-screen tablets or laptops. If you expect the browser to downsize the shot, go for full hd - for dimensions see the other posts.

 

[monkey44]

Me = not very tech smart with web-stuff, so will pass this info on to the web guy helping me -- and he will know what it means. I'll send a couple images to him with this size, and see what it does.

Trial and error ... works every time. Thanks BD

 

[helpful]

One of the most common frustrations in bad website design is extremely "high quality" images that actually provide an extremely low quality user experience.

I agree with the suggestion earlier to use 1080px (or 1200px) as the longest dimension for images. A larger image size could/should be available as a download individually, but not as part of the content loaded into the regular web page.

Also, it is useless to save images used within a web page at the highest JPEG quality setting. JPEG exports are mostly based on two technologies. First, libjpeg, for which 85% quality is excellent for high quality web use like photo galleries, while 95% would be good for individual high quality downloads, and 75% is sufficient for general web use. Secondly, Adobe products use a different compression scale, and 50 is good for general use, 60-70 good for high quality use, and 80 or more for individual high quality downloads.

Here is an analysis:

http://regex.info/blog/lightroom-goodies/jpeg-quality

 

[monkey44]

One of the most common frustrations in bad website design is extremely "high quality" images that actually provide an extremely low quality user experience.

I agree with the suggestion earlier to use 1080px (or 1200px) as the longest dimension for images. A larger image size could/should be available as a download individually, but not as part of the content loaded into the regular web page.

Also, it is useless to save images used within a web page at the highest JPEG quality setting. JPEG exports are mostly based on two technologies. First, libjpeg, for which 85% quality is excellent for high quality web use like photo galleries, while 95% would be good for individual high quality downloads, and 75% is sufficient for general web use. Secondly, Adobe products use a different compression scale, and 50 is good for general use, 60-70 good for high quality use, and 80 or more for individual high quality downloads.

Here is an analysis:

http://regex.info/blog/lightroom-goodies/jpeg-quality

Altho' my tech level IQ (Brain IQ, not image quality )probably runs in negative numbers -- that was a pretty interesting link. I've often looked at the save levels of various settings, and find little difference between "data numbers" used to define "top to bottom" quality - but have always chalked that up to my own lack of 'tech knowledge' and generally just "use my eyes" to decide if the quality and detail meets the requirements of the project. Looks like the best way to save all that hassle is pick one in the middle range and save lots of file storage space. Altho', I generally shoot in RAW and save both the RAW file and the processed .Tiff file in an "originals" folder. I rarely use .jpeg except for web page or samples over ISP servers ...

I'm pretty basic in tech needs, fortunately, and find myself 'winging it' as far as the actual technical details in determining how I use an image -- it always comes down to 'my eyes' versus any other value because of that lack of tech knowledge. I learn what I have to learn to survive, and that's worked thru a lot of years, starting way back when film and slides prevailed, and no one ever heard of a DSLR or a data bit, or a pixel.

When I need advice -- I jump on a forum, and usually find the exchange of information both interesting and informative every time. And the idea of sharing, instead of secretive is pretty refreshing as compared to the normal and competitive business world ... So, will tip my cap to all the contributors here and on other forums ... makes the world a much smaller and more friendly place to live. Cheers BD = Monkey44

 

[Marsu42]

http://regex.info/blog/lightroom-goodies/jpeg-quality

Altho' my tech level IQ (Brain IQ, not image quality )probably runs in negative numbers -- that was a pretty interesting link. I've often looked at the save levels of various settings, and find little difference between "data numbers" used to define "top to bottom" quality

I also read this link some time ago and find it a bit unfortunate Adobe chose their own homebrew scale for jpeg export. The most important lesson learned is that their jpeg exporter doesn't have a continuous scale, but just some discrete settings - I've pre-programed some of these levels into LR export settings so I don't need to look them up again and again.

As demonstrated on that site, anything above the medium threshold just increases file size except for some shots with gradients. When in doubt, I'd rather go really lossless tif (converted to lossless jp2 to save disk space) for archival.

 

[mnclayshooter]

The tech guy who's helping me build a website want to know what size images I should send him so he can create a thumbnail that will enlarge to page size on the site when someone clicks on it.

Can anyone give me the specs for the right size image? Size or length / width ... I'm not very "tech smart" so want to give him the best size to see a good image when it's open, but not so large it takes forever opening it.

I know there is a fine line there, and I have no idea what that is ... thanks BD

Let's ask a little different question.

What is the purpose of the website. Is it a gallery to sell your photographic services? if so, you don't need huge files, just very nicely culled/selected files. Like others have said... the monitor of the end user is what you have to consider. Most home users aren't graphics nerds so they will have monitors that are probably one of about three resolutions: 1024x768 (older but not ancient CRT's), 1600x1200 (larger CRT's) or 1920x1080/1200 (more modern LCD). Imagine the browser window takes up some of that screen real estate. Like said elsewhere in the responses you want a nice frame for navigation buttons, captions, etc etc.

If you're using it to post images for download as professional sales for example - I've seen bike race photographers sell photos that they set up to take along the race course. They have big gallery of small thumbnails and you as a customer can click to download and purchase a large version. In that case, you don't need the large display version, just the thumbnail, or an intermediate postcard-size to give the customer an idea what they want to buy - likely still with a watermark etc to deter them just saving the large thumbnail. In this case, you just need the final large-format file for download via link and a reasonable thumbnail.

 

[Tabor Warren Photography]

If you want a little reference, you can head over to my site; http://photosbytabor.com

The largest images I use are 1,500 x 1,000 These are the top photos on my posts and part of the highlight reel on my homepage.

The other pics in each post are 900x600 which is also the size I use on my wedding photography page; http://photosbytabor.com/tulsa-wedding-photographers/

Lastly, the thumbnail images I use, also on the wedding photography page, mid-way down are 300x200.

I hope this helps!
-Tabor

 

[monkey44]

Just popped in here to say thanks for the insight ... we got it figured out, and are now putting the gallery together.

Someone asks the use -- I'm primarily a writer / photographer -- we write wildlife / travel / sports documentaries and our publishers want a 'web site' to illustrate who we are and examples of what we produce. SO, it's not a true 'sales site', as it sends clients to our 'buy site' on another venue.

But, the publishers want an "author page" describing our work. So, nothing tricky, nothing secret, just some samples of our written projects and some image samples ...

SO, thanks for all the advice -- will post a link to the site when finished, for anyone interested.

 

[jepabst]

For my wedding work - our blog is a max of 700px wide, so I re-size all images to be 700px wide.

My architectural photography website works a little differently and the images are often nearly full screen size - so I make them 1080px tall - this means they are perfect on 1080p monitors. Also, know that the most common resolution is currently 1366x768.

 

[Marsu42]

For my wedding work - our blog is a max of 700px wide, so I re-size all images to be 700px wide.

What do you know - after some trial & error, I've discovered this is just the size for this CR forum.