3

What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:

Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?

Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks

Startec
  • 12,496
  • 23
  • 93
  • 160
  • 1) You can't, you have to store a scaled down version and a full version. 2) It shouldn't matter, but CSS would be better just because it's reusable on other pages if you create a class. – Uptown Apps Mar 13 '14 at 17:32
  • I see. Have my cake and eat it too I can not. So, the point here is that there is little difference between scaling in the html and in css? – Startec Mar 13 '14 at 19:15
  • Correct. It's much better practice to specify the size of any image containers on a page as it will allow the browser to continue rendering the rest of the page and draw the image into that area when the resource is available as opposed to forcing the browser to infer the size after downloading the resource and re-rendering the entire page but as far as CSS vs HTML, it shouldn't make a difference. – Uptown Apps Mar 13 '14 at 19:50
  • I thought (please correct me if I am wrong) that if you specify the size of the image in CSS that the browser does not allocate the specific amount of size while rendering the page, and you can get the effect of content moving while loading...And in what case would the browser have to infer the size? – Startec Mar 13 '14 at 23:14
  • http://jsfiddle.net/vPGNQ/ Well let's test the theory. In this example you will see the first image defines its size inside the HTML IMG tag, the second defines it's size in CSS and the third forces the browser to infer the size (by defining a max-width). The first two put the later content where it belongs but the third causes the text to shift and re-draw. You can change the numbers after _= to stop the images from caching and force the browser to re-download them. – Uptown Apps Mar 14 '14 at 16:02

4 Answers4

5

With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.

So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.

Regarding image cropping: There is some trickery you can use as outlined in this SO answer.

JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)

JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)

Community
  • 1
  • 1
Philip Allgaier
  • 3,505
  • 2
  • 26
  • 53
2

Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website. 

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-position:20% 20%; 
background-size:600px 800px;">

    </div>

Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)

    <div id="image" 
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg); 
background-size:100% 100%;">

    </div>

Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.

Mathew Crogan
  • 113
  • 8
1

well you can set the image as a background of a div and then set the background-size property

 #yourDiv{
   width:100 px;
   height:100 px;
   background:url('path/to/your/image');
   background-size: 100px 100px;
  }

you could set different properties for :hover but you'd need to use javascript to change the properties onclick

andrew
  • 9,313
  • 7
  • 30
  • 61
0

You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.

HTML

<img src="img.png" class="resize">

CSS

.resize {
    width:100px;
    height:100px;
}

.resize:hover {
    height:900px;
    width:900px;
}

Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.

Brandon Kiefer
  • 329
  • 2
  • 9