SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Best way to show a very large image (1257 (W) X 5933 (H) ) on the web ?

    Hello,

    I have 2 images each of sizes 1257 (W) X 5933 (H) pixels.

    and I cannot reduce the image sizes, since they are very detailed containing electrical circuits etc and even if I try to reduce just to just 90% of the original size the diagrams become blurred. So the image sizes have to be maintained unfortunately. I need all browsers to show the image in full size.

    1) Can I just link it from a webpage using a href ? Will all browsers show the image in full size or show it reduced and them allow it to be enlarged . I need all browsers to show it original size

    2) Should I create a new html page and use img src tag with specified width and height ? would this work ?

    3) Or should I use css and make this huge image a background image of a new html page ?

    4) I tried copying and pasting this image in openoffice document writer and thought of converting it to pdf and then linking it. The image does not get properly copied into openoffice. It kind of shrinks it to fit it one A4 sized. So that too is not working ?

    Any advice from design and usability experts will be deeply appreciated by me. Specifically I'm waiting for inputs from usability experts to know how to best serve the user experience in terms of showing them this large image.

    Thanks in advance

    Shanthi

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't know the answer, sorry.

    I guess making a page with specified width and height would be a good route, but I don't know if that would work on all browsers. Well, it wouldn't work on browsers that don't display images, that's for sure.

    But I'm curious to know why you need to do this. Is the image not going to be used for looks only? Do you want people to "read" the circuit board? Or do you want to maintain the "crispness" of the original for style?

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    showing large size image on the web

    Quote Originally Posted by zot View Post

    But I'm curious to know why you need to do this. Is the image not going to be used for looks only? Do you want people to "read" the circuit board? Or do you want to maintain the "crispness" of the original for style?
    Yes I need people to read the circuit and the moment I reduce the image size the clarity goes of so some numerals disappear and become blurry.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Make a page with an image at the specified width and height.

    I think that people who need to use the image would know enough to click the zoom tool, or download the image if it's not displaying properly.

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zot View Post
    Make a page with an image at the specified width and height.

    I think that people who need to use the image would know enough to click the zoom tool, or download the image if it's not displaying properly.
    I thought so. No need to repeat my question as an answer .

    I wanted to know whether there is some way we can disable the zoom tool and show the image in full size to the user in all browsers.

    Thanks anyway

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zshanthi View Post
    I thought so. No need to repeat my question as an answer .

    I wanted to know whether there is some way we can disable the zoom tool and show the image in full size to the user in all browsers.

    Thanks anyway
    You're welcome, I guess.

    Wait, here's another smiley:

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Allow the user to download the image via a standard link as the browser will typically scale to fit and even if it doesn't those dimensions are far too big for some peoples browser viewports without horizontal scrolling let alone vertical.

    So don't set the width and height to those values in the markup because it won't help you in that sense. Give access to the image; informing the user of its dimensions. Since it is a circuit board the odds are they'll want to download or print it anyway.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could put the image in a div with overflow set if you don't want it to upset other items on the page.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .big {
    	width:800px;
    	height:800px;
    	margin:auto;
    	overflow:auto;
    }
    </style>
    </head>
    
    <body>
    <div class="big"><img src="images/img5958.png" width="1286" height="5958" alt="Large Image"></div>
    </body>
    </html>
    Otherwise, just make a stand alone page with the img in the div as above and no css width/height/overflow and the browser won't scale the image. As already mentioned you should warn users that the image is large before they click to go there.

    I suppose if the image is only viewable at the correct size then you have little choice or you could use a smaller image and one of those zoom functions to look around it.

  9. #9
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Otherwise, just make a stand alone page with the img in the div as above and no css width/height/overflow and the browser won't scale the image. .
    That was what I was looking for. Thanks a lot Paul.


Tags for this Thread

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
  •