Would a CSS max-height or a simple height cause quicker loading of images?

Question

I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using

#image {
    max-height:500px;
    max-width:750px;
}

When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?

When you specify a height and width for an image in CSS, it simply scales the image. The full image is still requested and loaded by the browser. — Ruben Infante, Mar 19 '13 at 17:48
If you have a full size image on your server (7-10M/image), changing the dimensions of the CSS height and width will not reduce the size of the image file. You need to have a lighter weight version of the image to display and then possibly a link to the full resolution image for download if that is what you need. — Marc Audet, Mar 19 '13 at 17:48

Alvaro · Answer 1 · 2013-03-19T18:05:20.157

Compression

You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.

That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.

Improving quality of resized images:

If you are interested on improve the quality of the resized images, you can take a look at this article:

http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/

Auto-resizable background

Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.

Here an article about that: http://css-tricks.com/perfect-full-page-background-image/

Responsive images:

You can also load a different image depending on the predefined resolutions of your chose. You will need to have multiple versions of each image though.

More information about it use.

Tim M. · Answer 2 · 2013-03-19T18:07:42.433

3

My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10 mb/photo ).

It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:

download a large file
exercise a scaling algorithm against an enormous number of pixels

What should I do to reduce the load time? Is there something like an autoresize that will keep the height to width ratio?

Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.

You can create one or more copies of the file manually and upload them with different filenames.

A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.

Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.

edited Mar 19 '13 at 18:07

answered Mar 19 '13 at 17:48

Tim M.

53,671
14
120
163

now that you are talking about FB, how they created that gallery, i mean i need only the part with the photo icons ( the small pictures of yourself that when you click them they expand ) and the expand part, that is all what i want.... but how i create that without freezing some1 PC ? i uploaded on FB tones of large photos and still i can open them from every PC i want.... – Adi Micutzu Mar 19 '13 at 21:49
Two things: 1) FB uses a [background uploader](http://www.sitepoint.com/html5-ajax-file-upload/) so that the browser doesn't freeze while uploading. 2) After the original file is uploaded, Facebook creates multiple versions of it. Some are resized to be very small, so that they will load quickly. Even the original images may be compressed to transfer faster. – Tim M. Mar 19 '13 at 22:26
could i use background uploader?and how? – Adi Micutzu Mar 19 '13 at 22:31
See http://stackoverflow.com/questions/2751795/ajax-file-upload and http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Tim M. Mar 19 '13 at 22:51

score 1 · Answer 3 · answered Mar 19 '13 at 17:48

1

You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.

answered Mar 19 '13 at 17:48

Jack M.

1,195
13
30

Mustapha · Answer 4 · 2013-03-19T18:26:34.483

1

To resolve loading time

You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).

You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).

To resolve the ratio issue (square vs rectangle)

You can just use one of the properties and css will calculate the other. For example, if you put only

#image{
width:750px;
}

This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!

edited Mar 19 '13 at 18:26

answered Mar 19 '13 at 17:51

Mustapha

103
7

1

Which will not reduce the load times!, see the other answers for why this will not affect performance. – Ryan Mar 19 '13 at 17:58
Of course, I'm just answering his concern about square vs rectangle photos (this is a CSS post after all) – Mustapha Mar 19 '13 at 18:09
2

Yes, but his biggest concern has nothing to do with css, and if you re-size the image properly, using a third party tool on your server, then the css is never involved. Your answer could give a future user the impression that, if they set a static `width` or `height` it will compress the image and solve their performance issues. – Ryan Mar 19 '13 at 18:14
Fine.. Fixed the answer :) – Mustapha Mar 19 '13 at 18:26
and what could be the third party tool that you are talking about? :) – Adi Micutzu Mar 19 '13 at 21:46