0

I am a developer and I don't know much about web portfolios but:

I'm looking for standard format/size/resolution/quality/compression/file-size for a photographic portfolio website.

For instance, is there a standard defined for each device?

I can imagine a photographer image has to be larger if viewed in a big screen rather from a mobile phone with or without a retina display.

Where can I find a table with standards quality for devices/bandwidth/whatever?

1
  • 3
    I think this is a "how long is a piece of string?" question. Farcebork, Instagrump etc will compress the living daylights out of images; dedicated photographic sites will prefer the full-size original, 24mpx, png or jpg 80% quality or higher, with much smaller thumbnails self-generated for gallery/contact sheet views.
    – Tetsujin
    May 4 at 17:59

3 Answers 3

1

The answer is very specific.

Target your final user.

I think you have a loooot of homework to do.

You could say that a standard number is 1080px, either vertical size on a horizontal monitor or width in a vertical one. A lot of social media websites recommend that number in different forms, square images, vertical or horizontal ones.

Google: Instagram Do the same with some other photo-sharing websites.

  1. Define your user's most used device and resolution: https://gs.statcounter.com/screen-resolution-stats

  2. Use CSS Media queries. https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

  3. Use the picture tag.

  4. Use srcset attribute.

So, you probably need several resolutions and let the device choose for you.

0

I think this is a case of overthinking it. Aside from the aesthetics of the website presentation, a roll-your-own portfolio (as opposed to a web service) is just a website.

You will want a way to categorize the items; provide a description; provide some eye-catching thumbnail; and then provide the full-size image when the viewer's interest is sufficiently piqued. This is basically an e-commerce site (e.g. wordpress + woocommerce) without commerce elements. As a developer, you could probably make your own lightweight option, but you would find modifying an e-commerce package fairly straightforward.

If the portfolio item is a website, include screencaps of at least 1080p-sized and mobile viewports. Virtually all of your viewers will probably first interact on mobile. For still photography, something sized for 5 or 6 MB compressed file at the most lossless preset is probably sufficient, but you could go larger if you gate-keep a little to prevent front-loading massive images of things people have not yet shown interest in (clicked on).

e-commerce products will handle downsizing based on media queries for you, but if you write your own, you would make (or process on upload) several sizes (i.e. untouched (for zoom); normal (for basic presentation); thumbnail (for list presentation).

2
  • also, regardless of where you wind up putting the portfolio, if you click and can count to six, the file may be too large.
    – Yorik
    May 4 at 20:33
  • Honestly I thought that 5MB for a picture in a website is definitely too high
    – nkint
    May 5 at 10:08
0

Definitely overthinking this.

Save yourself a load of time, create a Behance account, Flickr, 500px, etc and that's a good start, just upload the photos, let the website handle the resolution and devices.

2
  • 1
    thanks for the advice, but this does not answer the question
    – nkint
    May 5 at 10:45
  • 2
    Fair enough, but I don't think there's an objective answer to your question. People build websites in many ways, upload photos in many ways, there is no given "standard". In many places, bandwidth is a non-issue nowadays. People stream music and video content all day long, what kind of bandwidth do you need for a few pictures ? If you're looking for a table which will give you exact numbers in pixels as a golden "standard", well good luck with that.
    – Lucian
    May 5 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.