size of website photographs

[Wim van Velzen]

hi all,

I am working on restructuring my website. The main focus would be my landscape photography and my thoughts about this in the articles.

I have a few things on my mind:
- reduce the number of photographs, especially the pre-digital ones (up to 2007).
- Phocus, photoshop and a bit of experience can do more now that I could years ago. I want to do process some images again.
- [ not important for now ]

Basically I want to make my own site, using html and css, although Joomla or the like could be an option.

Question for now: what do you see as a good size for landscape images on the web? The normal size I now use is 680x510, or 680x680 for squares and up to 1200 wide for panoramas. 
Seeing more and more larger screens on the one hand, and more tablets on the other, I wonder whether I should go larger or not.

Would do you think?

[RFPhotography]

Depends somewhat on how you're going to have the larger images appear on screen from the thumbnails.  If you're going to use a lightbox of some sort, you may be limited if you use a plugin for that feature depending on whether the lightbox will resize larger images and how much flexibility you have in adjusting the size of the lightbox.  If you're going to have the thumbnails open to a different page or window then it wouldn't matter as much.

Larger images take longer to load but with high speed connections that's less an issue.  There are still, I believe, many areas of the U.S. outside cities that are on dial up or lower speed cable/DSL; however. 

My desktop screen has a resolution of 1680x1050 on a 21" screen.  With that pixel density images at 720 pixels on the long side look fine.  On a tablet or phone with an HD screen, the higher pixel density makes the images look very soft.  There aren't many tablets/phones with HD screens yet but there will be more in the not too distant future and more people are viewing the web on those devices too.  I'm considering updating all the images on my site to be 1920 pixels on the long edge.  The load times won't be significantly different with high speed connections.  I've done that for images I carry on my phone and tablet and those look nice and crisp.

[Wim van Velzen]

hi Bob,

Thanks for your reply!
The site will stay pretty basic. The thumbnails (128x170 and around) work as links to the pages with the normal size photographs.

Do I understand you right, that with HD tablet or phone screens a larger size image is better for percieved sharpness? In that case, it might be wise to have the pictures at say maximum 700 high and 1400 wide?

[Slobodan Blagojevic]

One thing to consider when it comes to size is protection from stealing. Smaller-size images, say up to 800 px, are much less useful for thieves. If you are concerned about that, of course.

[RFPhotography]

Slobodan's point is very valid. 

Yes, viewing a website on a tablet with an HD screen images that are lower than HD resolution look softer.

[Graham Mitchell]

FWIW, my site switches automatically between images of different sizes to suit the size of the browser window. There are several advantages to doing this.

[Wim van Velzen]

hi Graham,

Do you feel that the images look good in all sizes?

[Graham Mitchell]

hi Graham,

Do you feel that the images look good in all sizes?

Hi Wim, there are a few possible approaches. You could choose 2 or 3 sizes, and display those images at 100%, depending on the browser window size, or you could scale the images, as I do, but only scale down, until you get to the next smallest image size, then start using that, and so on. That means you never have to deliver a large image for a small screen, which saves time and bandwidth, but if the user does have a large screen, he has the largest possible image for the best quality. You could look at my site but it all happens seamlessly so there's really nothing to see.

[Wim van Velzen]

hi Graham,

I'll have a look at your site! What software did you use to make the website?

[Graham Mitchell]

hi Graham,

I'll have a look at your site! What software did you use to make the website?

The human brain

[Wim van Velzen]

What version? 

[Graham Mitchell]

What version? 

v1.0 I guess. I haven't had any brain surgery
What I'm trying to say is that it was hand-coded.

[Wim van Velzen]

ha Graham,

I figured that out, just tried to be a bit funny 

I suppose it is in the <body onResize="window.location=window.location;" > part of the code? I'll see what I can do with that. The images on your site look fine in all sized windows indeed (as well as being very beautiful photographs).

[Graham Mitchell]

No, that part of the code just forces the page to reload if you change the window size. Otherwise you could enlarge the browser window and still be displaying one of the smaller images (and quality would suffer) or conversely you could be downloading hi res images for a small browser (and waste bandwidth and suffer longer loading times).

[john beardsworth]

Wim

There are a number of ways of matching the image size to the browser window. To give you a good answer, one would need to know how you are building your site and what skills you have. For example, you might be creating a static HTML site and need to prepare the different sizes of images in Photoshop or Lightroom, or you might be building something where there's an online database or content management system and can upload a single large image and allow the server to resize. Say a bit more about the site architecture and your skills.

John

[Wim van Velzen]

hi John,

At the moment my site is in html of my own writing. I don't have any javascripting experience, it is just simple html. That said, all options are open - simple additions to the html code, or a brand new site in I don't know yet what kind of software / template.

[Graham Mitchell]

Unless you really know what you're doing, I'd recommend sticking with a template. I'm sure there are other threads here about that.

[john beardsworth]

Have you considered WordPress?

[james-greenland]

So, currently I use 3 different screens for work/browsing - a notebook laptop (1024px wide), my home computer (1680px wide) and sometimes the new ipad when I can steal it off a friend

As I edit and upload images on my pc (the larger screen) I never have any problems with size, but have started uploading images to the site at 960px wide. This is to make sure that if people are looking at the site from a notebook they aren't going to have any problems. + as I have a lot of images on the site it means I don't have to worry as much about reaching my memory limit.

With regards to website design: I am familiar with 2 content management systems (CMSs): Concrete5, and Wordpress. I would always recommend Wordpress.

I heard Wordpress was good from a friend of mine and have never looked back. The free one is slightly limiting in that you can't install third party plugins (if you have the money and think that the website could get you enough gigs to cover the costs then I would highly recommend going for the fully editable site without the .wordpress.com extension). If you still want to go the free cheapo route then there are some fantastic templates for portfolios, though they are limited in numbers...

[james-greenland]

have a look though these templates (note the ones labelled 'premium' are the ones you pay for - the others are all free):

http://theme.wordpress.com/

I personally use a theme called 'chunk' - clear-cut and simple. Never wanted anything more. Have a looky here:
www.jamesgreenlandphotography.wordpress.com