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

Get Started
1

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

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

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

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

I thought so. No need to repeat my question as an answer :slight_smile: .

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 :slight_smile:

6

You’re welcome, I guess. :slight_smile:

Wait, here’s another smiley: :slight_smile:

7

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

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.


<!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

That was what I was looking for. Thanks a lot Paul.