CODEWITHSUNDEEP
htmlpng
jackJoe
jackJoe

Reputation: 11148

Do PNG images slow down the render of an html?

I'm using several PNG images (via CSS) into a site's template, xhtml and CSS,.

I've kept the pngs as small as possible, and optimised as possible, but when testing it in any browser (Safari, Firefox, IEs) it takes at least 2 seconds to render.

Unfortunately I can't share the code here, but I can say that I've removed all javascript and my html code is fairly small (about 250 lines and no tables) and validates correctly.

I would like to know if the PNGs are the "guilty" part as this is my first site done almost exclusively with pngs (instead of gifs + jpegs) (I won't support IE6 so no need for hacks).

Upvotes: 3

Views: 9488

Answers (3)

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46405

Check this link. Read under the "Optimize Images" tab.

I hope this was the thing you needed.

Upvotes: 1

Lasse Espeholt
Lasse Espeholt

Reputation: 17782

No, they do not take time to render (unless you have a really slow computer). What does take time, is the retrieving of a lot of small files. When you query a web-server for a small file, the time retrieving the file itself does not take long. But to setup the connection etc. etc. adds up.

So, what you should do, is to make what is called a "sprite". Combine all the small images to one large and "cut" them with CSS. How it is done and what it is exactly is explained here:

http://css-tricks.com/css-sprites/

and here

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Upvotes: 5

Oded
Oded

Reputation: 499062

If you have many images (doesn't have to be PNGs), then download times will be impacted. By default browsers have a limited number of threads to download content with (IIRC FF has 4), so the more images you have, the longer things will take.

Additionally, if you don't specify dimensions on your images, the browser can only correctly layout the page when an image arrives. It will need to reflow the layout for every such image, which is both expensive and time consuming.

In short, ensure you don't have too many images to download and that the HTML markup has the right dimensions for them.

One workaround for having many images is to use CSS sprites.

Upvotes: 5

Related Questions