How to handle large image in HTML page

I have a large JPEG image about 3500 x 2500 pixels and 4 MB size.

I want to display this image in a HTML page so that it takes about 3/4 of the screen, and also compress it, so that it loads quickly, but without compromisi开发者_运维百科ng the quality too much.

Is this feasible ?

Yes, but not in HTML. You will need to run some sort of server-side script that will reduce the size of the image before it is transmitted across the wire to the browser. Languages that can do something like this include (in alphabetical order so I won’t be accused of favouritism) Perl, PHP, Python, Ruby and many others. However, it requires some experience in programming or the willingness to learn (by reading websites and/or books). I would recommend against asking a question here on StackOverflow that basically asks how to do it.

No, it's not feastible to do in HTML. HTML doesn't compress images. It CAN resize images by specifying height and width attributes but they won't look good.

You have to resize the images manually.

HTML

<img class="big_image" src="x.jpg"> 
<!-- don't set width and height in the HTML -->

CSS

img.big_image {width:75%; -ms-interpolation-mode:bicubic;} 
/* don't set the height and it will be proportionally scaled */

The image will be scaled to 75% of the first positioned anscestor. (any containing element with position:relative; or position:absolute; set, hopefully this is the body element. You may have to set the width of the body and html to 100% in the CSS also. I'm not sure.

The MS css specific thingy is for IE7 and later because by default they use nearest neighbour interpolating. which is silly.

Images are already very compressed. it may be that it would better suit being a jpeg or a png, try both and see which is smaller.

If you want your jpg to take ¾ of the screen, you cannot assume that everyone had the same browser window size. And you probably want to adjust your image's size when the user changes the window's size.

It's possible to make your image stretch to fit the screen using CSS 3 attribute background-size but it will not work in all browsers. Otherwise, you can do it with some clever Javascript.

Downside is that whatever technique you decide to use, you will have issues with picture quality / size. If you keep your picture at 3500px, it'll be clean when looking at it on a big screen, but it'll be long to download. If you make your picture too small, it'll load fast but you'll see the the pixels on a big screen.

I think that most people use screen resolution between 1024px and 1280px. So maybe you should start testing around these size.