image sizes?

Discussion in 'Web Design' started by TheLivingDead, Oct 27, 2010.

to remove all ads.
  1. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    I am working on a photo website for a friend.

    The idea is to showcase the Quality of the photos... many photos... different categories, etc...

    I plan to use lightbox 2.0 to display thumbnails which enlarge, But I'm not sure what size I should make the images...

    What would be the best size images to use? (thumb size? full size?)
    I of course, want optimal load times while maintaining the best quality...

    THANKS IN ADVANCE!!
     
  2. jnspire

    jnspire New Member

    Messages:
    11
    What is the quality of the original images?

    Because, most professional photography (esp. with DSLRs) can be minimalized A LOT without losing much if any quality...

    One of the main reasons we take pictures with cameras which offer so many MP is so that we can resize without much degradation.

    However, if the photos were shot with simply a basic 35mm point and shoot it might make a difference.

    let me know and/or link to the images & site online.
     
  3. jnspire

    jnspire New Member

    Messages:
    11
    P.S. as an after thought... you could also check out a program which uses vector imaging! Vector imaging resizes an image without any loss in quality! By what is called redrawing.

    I you are using windows, I would strongly suggest checking out Xara.com they have one of (if not the) very best programs that I have ever used, for simplicity and image editing! Their program does not work yet for mac or crossover yet. :\
    But, I have used their software for years and have not ceased in being impressed!

    Just a thought :)
     
  4. smoovo

    smoovo New Member

    Messages:
    377
    Use lightbox as thumbnails, and you don't need to resize the images, use large images.

    The thing is, if i have a large screen size i would like to see it all over the screen (if the idea is to show the images quality).

    Your solution is to force the images (only while it opens), to be about 80% (you have to give space for the lightbox containers) wide and the height will change automatically with respect to the image width. That way will cause 1 small problem but will do the job. The problem will be the images file size, so try with Photoshop (i'm assuming that you are using it) to minimize the file size with "save for the web" option.

    I hope it helps.

    ______________
    SMooVo Web Design
    [email protected]
    www.SMooVo.com
     
  5. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    thanks for the tips!!

    Inspire-- the photos in their native format are RAW files.. shot on a Canon Rebel (not sure the EXACT make) 10 megapixels...
     
  6. smoovo

    smoovo New Member

    Messages:
    377
    Just to let you know, the maximum screen size that people are using (in pixels) is 1920x1200 equal to 2.3MP (2,304,000 pixels), and 10MP image is 9,980,928 pixels... :eek:

    Take some more tips:
    1. In your photo editor software make the image size width 1600. (the software will render the height automatically)
    2. Save the image as .jpg file with maximum quality.

    This what you need for your project right now. If you have more questions post here and i or someone else will try the best to help you.


    ____________________
    SMooVo- Web Design
    [email protected]
    www.SMooVo.com
     
    Last edited: Oct 27, 2010
  7. d a v e

    d a v e New Member

    Messages:
    671
    except that's going to be too wide (and possibly high) for anyone on 1280 x 1024 (of which there are a lot of people) so i would aim for max 900 wide and 600 high

    also i understand that the OP wants really good quality but you should certainly be able to use less than maximum quality on most photos, with some experimenting.
     
  8. smoovo

    smoovo New Member

    Messages:
    377
    Dave, you need to track all the posts to understand the last one. Read my #4 post where i write to TheLivingDead that he should force each image to 80% width to give the best quality to any screen size, and then to resize the image to the highest one to provide the best quality. If you have 800X640 resolution, the image will be 640 wide... The height can be any number.

    Your advice is to resize it to 900... what about 800X640 screens? :confused:



    ____________________
    SMooVo- Web Design
    [email protected]
    www.SMooVo.com
     
  9. d a v e

    d a v e New Member

    Messages:
    671
    oops sorry - i scanned the posts too quickly. though resizing in the browser is not going to look good even with a high quality large image. browser sizing looks crap compared to resizing algorithms of e.g. photoshop.
     
  10. smoovo

    smoovo New Member

    Messages:
    377
    You are right, when you style the image to another size than its real one it will end with bad quality, but, if the browser resizing the image with respect to the height, it will look perfect.

    For example, if the image is 100X100 pixel and you resize the image to 80X75 it will get shrink vertically, but if you will resize it for 80px width only, the browser will keep the height with respect to the width and it will be calculated, and you will get 80X80 pixels image with the original quality.

    ____________________
    [email protected]
    www.SMooVo.com – Web Design
     
  11. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    hmm... so, should I leave resolution where it is, or drop it down to 72?:confused:
     
  12. smoovo

    smoovo New Member

    Messages:
    377
    For web purposes you should have your images 72 pixels per inch, RGB colors, and the width will be whatever you want. 1600 pixels width is my suggestion to provide large image with high quality also to the big screen users.

    The 72 per inch is a standard, because computer monitors are 72 pixel per inch displays.


    ____________________
    [email protected]
    www.SMooVo.com – Web Design
     
  13. d a v e

    d a v e New Member

    Messages:
    671
    no, you will not because the browser's 'resizing engine' is a piece of crap and what you end up with looks nothing like "original quality"

    it also means that you have to use large images 1600 and at high quality that could mean quite a price to pay in filesize compared to say 900 px wide (approx 3 times as much at 1600 as at 900, at the same quality)

    oh and while we're on the subject you do not need to change ppi to 72 or anything else, just make it the size you need in pixels.
    ppi is only relevant for print.
    see http://www.scantips.com/no72dpi.html
     
  14. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    again, I appreciate the tips!

    I am keeping the images @ 72 res. highest dimension at 1000 (width OR height, depending on vert or horz orientation) and displaying at 80%...

    now, using lightbox, It it possible to assign a specific DIV for the image to appear within?
    I would like more control over where it pops up, and while the image is enlarged, I want the viewer to still have access to the thumbnails...

    advice?
     
  15. smoovo

    smoovo New Member

    Messages:
    377
    dpi (dots per inch) is for print use only! i said 72dpi to help him save file size.

    But please, explain now to everyone here something. If you SO worry about file size "...it also means that you have to use large images 1600 and at high quality that could mean quite a price to pay in filesize compared to say 900 px wide (approx 3 times as much at 1600 as at 900, at the same quality)..." why you consist to leave the dpi high?... :eek:

    I won't answer for your other comments, bad language is out of my league. Read more for your knowledge before you post opinions.

    Have a nice day.

    ____________________
    [email protected]
    www.SMooVo.com – Web Design
     
  16. d a v e

    d a v e New Member

    Messages:
    671
    i don't see any reason for bad language, well not yet :)
    did you read the link i sent? it clearly shows - and you can try it yourself - that saving an image for the web is resolution independent so there is no saving in file size for a web image by reducing the ppi. one pixel is one pixel on the web.

    and there's nothing wrong with my knowledge , thanks, it seems i've read plenty to bolster it already ;)
     
  17. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    lol... from forum to forum, the bickering persists... lol

    but, seriously, is there anyone that can help me out?

    I'm using lightbox2.0. Is it possible to assign a DIV for the image to appear within?
    I would like more control over where it pops up, and while the image is enlarged I want the viewer to still have access to the thumbnails...

    help (?)
     
  18. smoovo

    smoovo New Member

    Messages:
    377
  19. TheLivingDead

    TheLivingDead New Member

    Messages:
    95
    i dunno much about server-side yet... still learning htm, css and js...
    but thanks for the link!
     

Share This Page