Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1

    high res img in site

    If screen specifics dictate 72dpi resol (as far as i know) then how do i fit an img with high res into a site without resorting to scrollbars. A good eg, the homepage "fish" img in www.view.pt... How is this done? i appreciate all the input...

  2. #2
    That is actually done via CSS using a background image that is fixed to a certain position in the browser window. The image isn't the size of the browser window, it's just placed at the bottom right corner.

  3. #3
    Yes, but how is this img quality attained (in this eg.)? It doesnt look like a 72dpi img...?

  4. #4
    Administrator Dave's Avatar
    Join Date
    Sep 2004
    Location
    Te Awamutu, New Zealand
    Posts
    3,959
    Blog Entries
    79
    DPI doesn't apply to screen resolution - DPI is for print. For screens you need to think in actual number of pixels, e.g. 800x600 or 1024x768.
    Dave Owen
    MediaCollege.com

  5. #5
    Right, but there is a limit in res for screen graphics. The image on the home page of the site i referenced seems to be high res. i'm having some difficulty in understanding how to prepare quality graphics for screen output...

  6. #6
    Quote
    Quote: Tony
    View Post
    Right, but there is a limit in res for screen graphics. The image on the home page of the site i referenced seems to be high res. i'm having some difficulty in understanding how to prepare quality graphics for screen output...
    Its not really that hard, there is not much you need to prepare. But you should take into consideration the file-size, and usability of your site when using images.

    Jpg would be fine in many cases, but there are times where you would want png alpha transparency in your images, these are however usually larger then jpgs.


    If you are really interested in screen-resolution limits, then we used to be like limited around 216 colors, some hand held devices may still be limited when it comes to color. But then again, they are simply impractical to use, so only few people uses these "devices" anyway, also since their memory is limited and quite often simply crash or freeze the device.

    As for pixel resolutions, generally a resolution of 1024x768 is common, if your image is bigger then that, it will simply create scroll-bars on those screens with same or smaller resolution, the solution is to use a lower DPI. Or to resize these images using Paint.NET, Gimp, or similar tools. You can also define the width or height of the images using percentages, but this is usually considered impractical.

    Just keep in mind, the bigger the resolution, the bigger file-size. This is also true with colors, the more colors used, the bigger file-size.


    Generally most systems support 16bit+ today, so i wouldn't worry about it. another thing to keep in mind, is that browsers simply uses the nearest color if they cant display 24bit. There are a few bugs around this, but that can be worked-around by using transparent backgrounds.

    Generally the worst that can happen, is "borders" around images, this happens because the browser either get the background value of the image wrong, or the background color of the site, which is either defined in rgb or hex in your css, or through the older bg-color attribute.

    I've only seen the problem a few times, it can even happen in systems which support 32bit, mostly one browser gets it right, while another has the borders. Anyway, this can be solved by using a transparency in your images, either index or pngs alpha transparency.


    DPI is used to translate pixels into real length units. You can't rely on DPI in web-design, because cross-platform, and even between users settings, the DPI may differ. And as such its hard to translate pixels into real length units on-screen, this is also why we usually don't use real length units in web-design, unless its ment for printers (printable versions).


    Also, the image in the page you posted was inserted in a flash file. Same layout can easily be made using CSS, whitout the special preload-effect though.
    Last edited by BlueBoden; 17th Oct 2008 at 13:52.

  7. #7
    Administrator Dave's Avatar
    Join Date
    Sep 2004
    Location
    Te Awamutu, New Zealand
    Posts
    3,959
    Blog Entries
    79
    Quote
    Quote: Tony
    View Post
    Right, but there is a limit in res for screen graphics. The image on the home page of the site i referenced seems to be high res. i'm having some difficulty in understanding how to prepare quality graphics for screen output...
    After reading your message again I think I might understand what you're thinking a little better (although I'm not completely sure). The image of the fish does have the appearance of being higher-resolution than many other images of a similar size on the web. However this isn't related to their resolution, it's just that the photo is a very good one. It's taken with a nice camera and well-focused, so it seems "sharper" with more details and vibrant colours. If I took a photo of a fish with my cellphone and uploaded it to Flickr it wouldn't look nearly as well-defined, even if the technical resolution (i.e. size of the image in pixels) is the same.

    If I'm on the right track here, the answer to your question is probably to learn more about photography or maybe hire a commercial photoghrapher.
    Dave Owen
    MediaCollege.com

  8. #8

    Being realistic

    I understand your problem, the only thing to consider is.

    1- Do you really need a very high res. image. (many times it would not make any difference to the audience)
    2- You may be able to adjust the image & place it on the site, but will it slow down the openning of the page & would you lose any visitors because of the slow down load?

    i am only saying this because I have spent weekend trying to get images unto my site the way I want them & when I do, it is redundant.

    Measure twice, cut once. (who said that? was it a guy name Ross?)

  9. #9
    Thank you all very much, diverse feedback is always helpful. Dave, you were onto something, and once more i realize that alot of work goes into producing quality work, and in this case the process doesnt start in photoshop...

  10. #10
    Everyone is missing Tony's point... first forgive my one long line reply - my keyboard is foobar... he is talking about a website (which by the way uses FLASH not CSS/background image) that presents a very detailed or hi-res image and asking how its possible to do this... as most ppl have already mentioned, webpage and computer screens are not really DPI dependant but pixel count based... but how do you get such a hi-res look to the image? well you shoot/scan as big as you can (3000x2000pixels for example), do any correction or retouching at that resolution and then resize down to publishing size (1024x768 for example) at the final stage... down-sizing inherently makes an image appear more detailed or "higher in resolution"... when compared side by side, an image shot at a higher resolution and subsequently down-sized to "X x Y" will appear much more detailed than the same scene shot at the target size of "X x Y"...

Page 1 of 2 12 LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Subscribe to us on YouTube