CODEWITHSUNDEEP
htmlcss
Adi Micutzu
Adi Micutzu

Reputation: 63

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

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?

Upvotes: 2

Views: 148

Answers (4)

Mustapha
Mustapha

Reputation: 101

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!

Upvotes: 1

Tim M.
Tim M.

Reputation: 54359

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:

  1. download a large file
  2. 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.

Upvotes: 3

Alvaro
Alvaro

Reputation: 41595

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.

Upvotes: 4

Jack M.
Jack M.

Reputation: 1170

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.

Upvotes: 1

Related Questions