CODEWITHSUNDEEP
asp.netimagepagespeed
user1926138
user1926138

Reputation: 1514

How to manage images to decrease page load?

I am requesting more then 30 images in my page.

The page load time is almost 25s.

How to decrease the load time.

Is there any method that will minimize the image size and download faster.

each image is 25KB and its taking almost 5.5s each image.

I have to show all the image in my page.

Upvotes: 1

Views: 1081

Answers (3)

user2050393
user2050393

Reputation:

In addition to what the other guys said, you can try using CSS Image sprites. This will reduce the number of server requests and hence the load time of the page.

Just make sure you don't make the common mistake of using CSS Image sprite,

The wrong way

.element1 { background:url('img.jpg') 10px 10px no-repeat; }
.element2 { background:url('img.jpg') 20px 20px no-repeat; }

<div class="element1"></div>
<div class="element2"></div>

This will still make 2 different server requests for the same image.

The right way

.cssSprite {
    background:url('img.jpg');
    background-repeat: no-repeat;
}
.element1 { background-position: 10px 10px; }
.element2 { background-position: 20px 20px; }

<div class="cssSprite element1"></div>
<div class="cssSprite element2"></div>

This will create only 1 request to the server.

Upvotes: 4

Serjik
Serjik

Reputation: 10971

Beside decreasing your image size there are some techniques that helps you to load your web pages faster. Please look at this:

10 Quick Tips For Making Your Large Graphics Load Faster

And if it is possible you can use a separate server for your resources like images, animations, scripts and style sheets

Upvotes: 3

Majid
Majid

Reputation: 14253

To decrease your images size and page load time you can compress images using softwares like JPEGCompressor or open source software like Gimp.

Upvotes: 0

Related Questions