What Is The Optimal Photo Resolution For Web Displays?

[Lopburi99]

I am developing a new website which will eventually have many hundreds, possibly thousands of photos of classic cars.

Does anybody know how I should resize my photos in terms of resolution so I don't pixel them to death? Years ago I knew but I don't now given the higher resolution monitors. My intent is to have the best web display quality but minimal size to hold down on upload/download times.

Thanks.

[PoorSucker]

Try jalbum.

Makes thumbnails and resizes pictures.

[bino]

72 DPI results in decent quality images that will be a small file size / load quickly.

[cpofc]

You can still use 300 DPI for web images. 300 DPI is suitable for print quality which is a bonus. 72 DPI was more applicable in the days of older algorithims. Yes, you can knock down the byte size a little further, but with more modern advanced image optimization programs, coupled with higher internet speeds you really don't need to worry too much these days.

When I first started building websites in 97 the Pioneers of image optimization were ULEAD, they produced the first and the best of these. Uleads Smart Saver entered the market back in the mid 90's or so. Well before Adobe's photoshop even considered it! I think it was Photoshop Version 5 that first provided image optimazation

So you can use 300 DPI, run it through Photoshop's 'Save For Web' Feature and you will knock it down to a more than reasonable size without any discernable loss of quality. And it will be there for use as 'Print Quality'.

[richardt1808]

In the broadcast field, the best viewable depth is still 72 DPI and we also follow this for web use since the human eye is not able to discern higher resolution on a standard monitor. In any case, your website should cater for the lowest common denominator as not every user in a far off place will have a high quality modern LCD screen or fast internet connection.

Cheers

[cpofc]

well there are two ways of looking at that, not that 72, 100 or 300 DPI makes alot of difference these days when optimizing images for the www

But I always advocated, and taught, that you build UP to technology, not down.

The web would never have evolved the way it has if we all stuck to the principal of building down to the lowest common denominator.

I had the same problem when I was webmaster for a large government entity in Aust. It held them back for years.

[astral]

As I understand it 72dpi for viewing on the screen.

Anything larger allows for printing and pirating of images.

[siamect]

One thing to keep in mind is that when you upload your pictures you most likely have lower speed than what your visitors have when they look at you page. You also have to wait for every single picture and the visitors only wait for the ones they want to see...

So from that point of view it is best to convert them before you upload them.

On the other hand you anyway need to create thumbnails on the fly... so if you don't care about how long time you have to wait for uploading you can upload highres and then resize on the fly both for thumbnails and the viewable pictures. You can let interested people download the highres picture too.

Highres conversion on the fly can take some processing time, but you probably have small number of visitors in the beginning. I think joomla have a cache system that you can enable to reduce the processing time.

I have bad experience with upload speed to One.com (ftp with only 4 simultaneous connections possible) but to 34sp.com speed is ok both ftp ok and ssh very ok...

Both one.com and 34sp.com has ok speed and uptime for the visitors although my sites are really low traffic ones so it is difficult to say.

The test page you have on your site now, loads relatively quickly and I think the resolution is ok for viewing.

Martin

[welo]

AFAIK dpi is pretty irrelevant for displaying images on a computer screen.

The browser will (usually) display the picture by matching one pixel of the image to one pixel of your screen. The dpi information is merely additional meta data that is used to calculate width and length in inch when the picture is printed on paper.

Adobe Photoshop even removes the information on dpi when using the 'save for web' option. The quality of a picture always depends on the actual number of pixels (as well as compression quality in case of non-lossless formats). Just look at modern digital cameras - when choosing the picture quality it is always about pixels (plus compression quality), never about inch or dpi.

http://apptools.com/examples/dpi.php

http://www.scantips.com/no72dpi.html

Websites that focus on photos usually provide the same image in different resolutions (=pixels) depending where/how it is used on the website:

thumbnails

'full screen' view

high-resolution file for download and printing.

The web designer usually creates the website design for a certain minimal screen resolution (for instance 1024x768). Your 'full-screen' picture resolution should then be chosen to fit on a screen of this 'size' displaying all user interface components AND the image.

More sophisticated websites might provide the full-screen size depending on the users screen resolution to improve user experience or allow the user to choose the resolution.

Web album software usually takes care of generating the various formats from the original file. That might happen on the fly, on upload or triggered from the administration interface. The generated images are usually cached on the server since CPU power and response times are more valuable than storage space.

As already mentioned on this thread, you should think about what maximum quality (high-res, for download) you want to provide to the user. For the user it's usually the bigger the better, but many times photographers don't want to give away their high-res pictures for free.

This brings up the copyright question - if you don't 'own' the pictures (through purchase, or because you took them yourself) you cannot just collect images on the web and publish them on your website.

So back to the OP's original question about the pixel resolution:

Learn from others. Have a look at flickr and Co and see how they handle the full-size format on different screen resolutions

welo

[Crushdepth]

Image resolution is irrelevant on the web as browsers ignore it, it's only useful in print publishing. On the web images will be displayed at their *actual size in pixels*, unless you scale them which is a waste of bandwidth.

Basically you need to figure out how big you want your website to be in pixels. 1024 pixels wide will fit on most recent monitors. You could offer links to larger versions of the photos opening in a new window for people with widescreens or who don't mind scrolling.

To optimise file size, have a play with the 'save for web' feature in Photoshop. For cars you'll want to save as .jpg, experiment with quality settings between about 49-70% until you find a tradeoff in file size / quality that you like.

[Lopburi99]

I continue to be impressed at the wide spectrum of in-depth knowledge of ThaiVisa members. Thanks a lot guys, I'll check out the references and consider all your input.

BTW, my site (now in the initial stages of Joomla development) is called CarLoversJournal.com. It will have not only photos but eventually video of car events and owner interviews (in the U.S. and Canada). This will be a no subscription, casual style site for auto enthusiasts (and later bikers) to browse from time to time. Cars with custom painted flames or decals are a specialty because of my previous flames-related business in 2002-2005 and the many photos taken at shows during those years. This will be my retirement activity after I return to California to live this month - many many great car shows there.

[kmj]

If you are allowing people to upload images I use this [ phpthumb gxdlabs ] php class library, you need PHP 5 and GD 2.0+.

You can find on google and it's open source so free, great for re-sampling, re-sizing and generating thumb nails ++

Edited June 3, 2010 by kmj

[innerspace]

As Crushdepth mentioned, 72dpi or 300dpi is irrelevant for web. These are print terms only.

Get your web paid designed and figure out what image size suits your site.

Then resize your images (in pixels) to exactly that size so that browsers don't have to do any resizing.

If you want a higher quality image when you click on the picture then save 2 versions, one at the smaller in page size and one around 800-1024 maximum dimension (width or height). Save one as picture.jpg and one as th_picture.jpg

If you just have a few images the "save for web"feature in photoshop will get the best quality/filesize compromise.

If you have hundreds then the software I use is EZ thumbnails, which is free but results in slightly larger images

[Lopburi99]

AFAIK dpi is pretty irrelevant for displaying images on a computer screen.

The browser will (usually) display the picture by matching one pixel of the image to one pixel of your screen. The dpi information is merely additional meta data that is used to calculate width and length in inch when the picture is printed on paper.

Adobe Photoshop even removes the information on dpi when using the 'save for web' option. The quality of a picture always depends on the actual number of pixels (as well as compression quality in case of non-lossless formats). Just look at modern digital cameras - when choosing the picture quality it is always about pixels (plus compression quality), never about inch or dpi.

http://apptools.com/examples/dpi.php

http://www.scantips.com/no72dpi.html

Websites that focus on photos usually provide the same image in different resolutions (=pixels) depending where/how it is used on the website:

thumbnails

'full screen' view

high-resolution file for download and printing.

The web designer usually creates the website design for a certain minimal screen resolution (for instance 1024x768). Your 'full-screen' picture resolution should then be chosen to fit on a screen of this 'size' displaying all user interface components AND the image.

More sophisticated websites might provide the full-screen size depending on the users screen resolution to improve user experience or allow the user to choose the resolution.

Web album software usually takes care of generating the various formats from the original file. That might happen on the fly, on upload or triggered from the administration interface. The generated images are usually cached on the server since CPU power and response times are more valuable than storage space.

As already mentioned on this thread, you should think about what maximum quality (high-res, for download) you want to provide to the user. For the user it's usually the bigger the better, but many times photographers don't want to give away their high-res pictures for free.

This brings up the copyright question - if you don't 'own' the pictures (through purchase, or because you took them yourself) you cannot just collect images on the web and publish them on your website.

So back to the OP's original question about the pixel resolution:

Learn from others. Have a look at flickr and Co and see how they handle the full-size format on different screen resolutions

welo

Are you able to suggest web album software which I should consider now? I am not beholden to Joomla development if software already exists. I have just started searching for a suitable Joomla template for hundreds of photos so it is a good time to consider alternatives.

Edited June 5, 2010 by Lopburi99

[siamect]

Are you able to suggest web album software which I should consider now? I am not beholden to Joomla development if software already exists. I have just started searching for a suitable Joomla template for hundreds of photos so it is a good time to consider alternatives.

I think there are modules in Joomla that does it...

If you need something really simple...

http://sye.dk/sfpg/

Single File PHP Gallery 4.0.0

by Kenny Svalgaard

yes it is just one file you put in the folder... there are some settings inside the file and then you just create sub folders and put the pics in. You can have comment files to the pics too....

But license suck, no fee for non commercial use but otherwise...

Only if Single File PHP Gallery is used for private non commercial use, and the script is not modified or changes in any way outside the configuration part of the script as described in the documentation then Single File PHP Gallery can be used for free. If Single File PHP Gallery is used for any other purpose a donation for at least 10$ must be made per domain where it is used.

It's worth it!

Drupal has modules that does it but I have no experience with those although I run a couple of Drupal sites...

I run Open Atrium that is built on Drupal on two sites. One is just a test site that I just opened a few days ago.

To my happy surprise it requires just one setting and it takes care of the resizing when you upload the pics.

You get something like this when you try to upload something.

Images are larger than 1000x1000 will be resized. The maximum upload size is 1 MB. Only files with the following extensions may be uploaded: au avi bzip2 csv doc docx flv gif graffle gz htm html iso jpeg jpg kml kmz mov mp2 mp3 mp4 odp ods odt pages patch pdf png pps ppt pptx psd rar svg swf template tif tgz txt vsd wav wmv xls xlsx zip.

You can set the limits as you like.

But this woks fine if you upload one by one... If you have a few hundred pics... nother story...

Martin

Edited June 5, 2010 by siamect

[welo]

Are you able to suggest web album software which I should consider now? I am not beholden to Joomla development if software already exists. I have just started searching for a suitable Joomla template for hundreds of photos so it is a good time to consider alternatives.

Sorry, don't have hands-on experience with any gallery software myself, but used to work as a software engineer on a Content Management System and Media Management System.

I guess it depends what you want to achieve. If you plan to combine written content (articles) with galleries than I'd look for an addon to your CMS or a standalone gallery system that integrates well with your CMS via a plugin.

If you want to create a community around your site focus on the community features like user registration, comment system and rating system. Don't just check if those features are present but how they work in detail and if they are convenient enough. Since you will most likely not kick of the next thaivisa (who knows? ) plan for a lower number of visitors and comments, e.g. allow listing of recent comments, or sort photos with most comments at the beginning, allow comments per album, etc (just a view ideas) so people's contributions don't get lost.

Well, I guess I am going a bit over the top here

Otherwise, if you just plan to share some (or many) photos, I guess you will find that you have an awful lot of choices

http://www.hotscripts.com/category/php/scr...mage-galleries/

This lists hundreds of PHP based gallery products (free and commercial) and often provides a demo link to check it out in action.

Single File PHP Gallery looks like a straight-forward gallery probably perfect for getting something running quick.

Have a look at TinyWebGallery to get some ideas about possible features of web gallery solutions, like slideshows, file download, comments, voting, etc

EDIT: Oh well, here a list of Joomla photo gallery extensions - http://extensions.joomla.org/extensions/ph...s/photo-gallery

welo

Edited June 5, 2010 by welo

[Lopburi99]

If you need something really simple...

http://sye.dk/sfpg/

Single File PHP Gallery 4.0.0

by Kenny Svalgaard

yes it is just one file you put in the folder... there are some settings inside the file and then you just create sub folders and put the pics in. You can have comment files to the pics too....

But license suck, no fee for non commercial use but otherwise...

Only if Single File PHP Gallery is used for private non commercial use, and the script is not modified or changes in any way outside the configuration part of the script as described in the documentation then Single File PHP Gallery can be used for free. If Single File PHP Gallery is used for any other purpose a donation for at least 10$ must be made per domain where it is used.

It's worth it!

Martin

I downloaded it Martin, and it certainly looks about ideal. Unfortunately <this is embarrassing> even something as simple as this I have questions with because I have done so little web stuff. Such as: after I load my photos into a folder, where do I FTP it? Where does the Index.html file go? Will that interfere with the Index.html I already have? How do I embed the call to the Gallery in a Joomla article page? Those type things. Simple for people having driven around the block, but difficult if not impossible for me to figure out. I am a just little short of having the required knowledge/experience.

Also, I checked out Jalbum and it is quite nice too. But it appears to require a plug in and other magical things to integrate into my site, and I think navigation between screens/menus could be awkward.

Welo had some suggestions I am also looking into, but I think Single File Gallery is the best choice so far if I can get the puppy installed. Once I get the gallery feature operational I can concentrate on loading photos etc, which even I can handle.

[welo]

I downloaded it Martin, and it certainly looks about ideal. Unfortunately <this is embarrassing> even something as simple as this I have questions with because I have done so little web stuff.

Not embarrassing, the word is 'ambitious'!

Welo had some suggestions I am also looking into, but I think Single File Gallery is the best choice so far if I can get the puppy installed. Once I get the gallery feature operational I can concentrate on loading photos etc, which even I can handle.

Nothing wrong with keeping it simple. However, if you have Joomla up and running already, it might be easier to setup one of the gallery addons. Just speculating here, since I don't know how Joomla works. Maybe Martin knows..

welo

[Lopburi99]

Now I am thinking about going super simple for the time being. I just loaded a few photos directly by using standard Joomla image inserts. Then put in a page break and added some more. I can have a simple menu for each car show, or owner photos, whatever. One size only. Not high tech but who cares for a simple site until I come up with a better long term plan, probably paying some techie to build the gallery software into it for me.

[siamect]

I downloaded it Martin, and it certainly looks about ideal. Unfortunately <this is embarrassing> even something as simple as this I have questions with because I have done so little web stuff. Such as: after I load my photos into a folder, where do I FTP it? Where does the Index.html file go? Will that interfere with the Index.html I already have? How do I embed the call to the Gallery in a Joomla article page? Those type things. Simple for people having driven around the block, but difficult if not impossible for me to figure out. I am a just little short of having the required knowledge/experience.

Also, I checked out Jalbum and it is quite nice too. But it appears to require a plug in and other magical things to integrate into my site, and I think navigation between screens/menus could be awkward.

Welo had some suggestions I am also looking into, but I think Single File Gallery is the best choice so far if I can get the puppy installed. Once I get the gallery feature operational I can concentrate on loading photos etc, which even I can handle.

The Joomla framework is completely separated form the Single file gallery thing.

If you want a nice integration you can use a Joomla plugin. There are some install procedures for the plugins (think you load the plugin folder and files into the components folder of joomla and enable/configure them from the joomla panel)

If I wanted to avoid the plugin thing and use the single file gallery instead, I would do it like this:

Edit the index.php file of the single file gallery like this:

// ----------- CONFIGURATION START ------------

define("GALLERY_ROOT", "./pics/");

This will tell the system to look for pictures in a folder named pics. it is set to ./ dafult...

Now we shall put the index.php file on the server

There is a folder in your server called httpdocs or something similar. That is you root directory of you site.

Now create a sub folder called carshow_detroit_2008 or something like that inside the httpdocs folder.

Put your Single file gallery index.php file there. (httpdocs/carshow_detroit_2008/index.php)

Create a subfolder under the single_file_gallery folder called pics

Now you should be able to go to the http://carloversjournal.com/carshow_detroit_2008 and see the empty gallery.

So now in your httpdocs/carshow_detroit_2008/pics folder you can create sub folders and put you pictures there. They should be visible in the url above.

Use the Joomla framework for the articles blogs and other stuff. Present some nice pictures there in order to tease you visitors and then you create links to the gallery from there.

What can go wrong... well the folder that carshow_detroit_2008 need to writeable so that the index.php can write to it. It will create a folder with the thumbnails are stored... so it is not forced to create them over and over when people are looking at them.

I hope this will help

Martin

[siamect]

by the way... to create a link in joomla...

I dont know if you have an editor that allows you to create links but the way to do it is like this

<a href='http://carloversjornal.com/carshow_detroit_2008'> Detroit 2008 click here! </a>

Martin

[siamect]

by the way... to create a link in joomla...

I dont know if you have an editor that allows you to create links but the way to do it is like this

<a href='http://carloversjornal.com/carshow_detroit_2008'>'>http://carloversjornal.com/carshow_detroit_2008'> Detroit 2008 click here! </a>

Martin

Or if you want it to open a new window...

<a href='http://carloversjornal.com/carshow_detroit_2008' target='_blank'> Detroit 2008 click here! </a>

Martin

[Lopburi99]

by the way... to create a link in joomla...

I dont know if you have an editor that allows you to create links but the way to do it is like this

<a href='http://carloversjornal.com/carshow_detroit_2008'>'>http://carloversjornal.com/carshow_detroit_2008'> Detroit 2008 click here! </a>

Martin

Or if you want it to open a new window...

<a href='http://carloversjornal.com/carshow_detroit_2008' target='_blank'> Detroit 2008 click here! </a>

Martin

Good idea, the linking approach for photo album viewing in a separate window. Just closing the window to return is simple. Using the Joomla framework for blogs, shopping and other things keeps my system simple but capable. After I load some more teaser photos I'll be giving it a try. Will keep you posted....thanks Martin, very generous of you. Once I get some products, expect some goodies sent to you.

BTW, I can easily edit HTML from withing Joomla.

[siamect]

by the way... to create a link in joomla...

I dont know if you have an editor that allows you to create links but the way to do it is like this

<a href='http://carloversjornal.com/carshow_detroit_2008'>'>http://carloversjornal.com/carshow_detroit_2008'> Detroit 2008 click here! </a>

Martin

Or if you want it to open a new window...

<a href='http://carloversjornal.com/carshow_detroit_2008' target='_blank'> Detroit 2008 click here! </a>

Martin

Good idea, the linking approach for photo album viewing in a separate window. Just closing the window to return is simple. Using the Joomla framework for blogs, shopping and other things keeps my system simple but capable. After I load some more teaser photos I'll be giving it a try. Will keep you posted....thanks Martin, very generous of you. Once I get some products, expect some goodies sent to you.

BTW, I can easily edit HTML from withing Joomla.

After looking at you website and the pictures you have there, I'm just so curious about the rest of your pictures so I just suggested a solution that I believe will allow me to see rest of your pictures as soon as possible

Just kidding of course, but seriously, the pictures you have there are first class pictures of first class cars. I think we all are interested to see more of your website...

Martin

[Lopburi99]

Thanks for your link info above Martin! Thanks to that I finally just now managed to get the link from my Joomla site to Jalbum's site for a couple of test galleries. I wasted hours and hours with the bad instructions I got from Jalbum about using <iframe> HTML which Joomla couldn't handle, searching forums for better info. Your <a ref> worked great.

Take a look... Last item on the menu called External Gallery Test

Now back to the reviewing the file specs issues discussed earlier and deciding on a fixed display size, then off I go doing photoshop edits and uploading. A slow process but who cares, not me. All this on phone dialup <groan>

Off to sleep, I'm exhausted.

Edited June 8, 2010 by Lopburi99

[siamect]

Thanks for your link info above Martin! Thanks to that I finally just now managed to get the link from my Joomla site to Jalbum's site for a couple of test galleries. I wasted hours and hours with the bad instructions I got from Jalbum about using <iframe> HTML which Joomla couldn't handle, searching forums for better info. Your <a ref> worked great.

Take a look... Last item on the menu called External Gallery Test

Now back to the reviewing the file specs issues discussed earlier and deciding on a fixed display size, then off I go doing photoshop edits and uploading. A slow process but who cares, not me. All this on phone dialup <groan>

Off to sleep, I'm exhausted.

Ok fantastic pictures and the Jalbum slider at the top is cool.

I think Joomla will take away stuff from your html code for security or other reasons...I think this is possible to configure so it allows iframes but i don't know how...In Drupal there are filters that you can use for this...

See example in Blogs | home.siamect.com

or http://home.siamect.com/friends/node/22

Another place to learn is Tryit Editor v1.4

Martin

Edited June 8, 2010 by siamect

[Lopburi99]

Innerspace sent me the following noteworthy info:

"Unfortunately on the web you can't determine the size something will be displayed, you need to work in pixels. One pixel is one tiny dot of colour on the screen.

A 6" screen running at 1024x768 would need all of those pixels to show something at 6".

A 32" screen running at 1024x768 would need about 20% of the pixels.

Since you need to design in fixed pixels (you can use percentages and variations on font size but those become very tricky to design!) an image of say 400px will be appear much smaller on a netbook compared to a LCD TV. Thats the nature of the web.

What I meant before is to get a structure of your website arranged before determining image size.

1024x768 is a sensible size to optimise your site for. 1024 is more important since downward scrolling is expected on most web pages, sideways scrolling should be avoided.

So next think about the sites layout. If you look to the left you see a sidebar - will your site have one? or two?

If so subtract those widths from 1024

Obviously you don't want everything crammed together so subtract 5-20pixels for margins and padding on each sidebar and the main content area

Do you want each picture to fill the remaining space or display 2 or 3 or 4 side by side? Divide the remaining figure by the number of side by side images, and subtract a little for margins.

Now you should reach the ideal width for you images. Ignore the height, let your image editing software calculate that automatically keeping the proportions right.

The easiest way to do this is use your web design software to design the site with empty boxes instead of images.

Make it look nice and then see how big the box is.

Thats your ideal image size. "