1

I am trying to create a HTML page with multiple images. it's working fine with localhost but if I'm accessing through the internet, images are loading very slowly. How can i cache image url in style? Please check the below HTML code.

 <div style="display: block;" class="collection slide-item" id="div1"> <div class="row collection type1"> <div class="title"> TRAVEL DESTINATION<div class="link"> <a class="seecollection" href="searchdb.aspx?Keyword=travel destination">See Gallery</a></div> </div> <div class="span12"> <a href="Search_Details.aspx?Id=1848760&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1848760.jpg)"> </div> </a> </div> <div class="span12"> <div class="row"> <div class="span4"> <a href="Search_Details.aspx?Id=1716438&amp;key=0"> <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1716438.jpg)"> </div> </a> </div> <div class="span4"> <a href="Search_Details.aspx?Id=1838282&amp;key=0"> <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1838282.jpg)"> </div> </a> </div> <div class="span4"> <a href="Search_Details.aspx?Id=1845302&amp;key=0"> <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1845302.jpg)"> </div> </a> </div> </div> <div class="row"> <div class="span6"> <a href="Search_Details.aspx?Id=1717213&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1717213.jpg)"> </div> </a> </div> <div class="span6"> <a href="Search_Details.aspx?Id=1842423&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1842423.jpg)"> </div> </a> </div> </div> </div> </div> </div> <div style="display: none;" class="collection slide-item" id="div2"> <div class="collection slide-item"> <div class="row collection type4"> <div class="title"> HOLI<div class="link"> <a class="seecollection" href="searchdb.aspx?Keyword=holi">See Gallery</a></div> </div> <div class="span6"> <a href="Search_Details.aspx?Id=1918857&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918857.jpg)"> </div> </a><a href="Search_Details.aspx?Id=1869141&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1869141.jpg)"> </div> </a> </div> <div class="span12"> <a href="Search_Details.aspx?Id=1888875&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888875.jpg)"> </div> </a> </div> <div class="span6"> <a href="Search_Details.aspx?Id=1888899&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888899.jpg)"> </div> </a><a href="Search_Details.aspx?Id=1918847&amp;key=0"> <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918847.jpg)"> </div> </a> </div> </div> </div> </div>
Improve this question
1
  • The first hit to your page will be comparatively slow since the browser is retrieving the images. Once the page is completely loaded, the next time you come to that page it will be faster since the browser will now get the image from cache. This will remain the scenario as long as the cache is not cleared. Commented Feb 27, 2013 at 6:51

4 Answers 4

Reset to default
1

You don't have to take care about caching, browser do all this for you, and it's totally depends on browser, because some users may disable caching or clear cache periodically.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The images you are using are fairly large. Consider using smaller images to speed up the downloading process (depending on your design, of course, but I doubt you need a width of 3*900px).

Improve this answer

Comments

0

You might want to move your css into an external stylesheet. Most modern browsers will then cache this for future reference. As it sits now you may get inconsistent caching results depending on which browser you are using and how it is parsing all of your inline css.

Improve this answer

Comments

0

As it's a performance problem there are several ways to solve it.

First have a look at the images and at size and format of images in particular. The aim is use the most appropriated format and decrease the image size.

Are those images photos or graphics?

If it a photo try to play with jpeg compression level and find trade off between quality and size.

If it graphics try to convert into png format.

Have you check if images have metadata inside (like photo camera information, coordinates of place there the image was taken etc) as you can use online or standalone utility to remove meta information and as result decrease size and probably remove some personal information.

Depending on format, purpose and how often images will be changed you can combine them into sprite (one image that holds all images). You can use css to fetch needed image from the sprite. In this case you save on amount of calls to the server which is one of the aim than you do website performance optimization. Old browsers has a limitation on amount of parallel calls that they can do to the server ( 2 - 4 depending on browser) as result many you calls will be blocked until execution of previous will be finished.

If your images is small enough you can use Data URI protocol to embed images into html or css.

You can also use javascript to preload images before they will be needed , so browser will download them in the background and then time comes to show it they will be loaded from the cache in no time.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.