CODEWITHSUNDEEP
htmlperformance
Royi Namir
Royi Namir

Reputation: 148524

which html tag that contains picture has best performance?

I want to build a 10 x 10 thumbs of pictures in html page. (aspx)

there is a lot of options how to do it.

my question is : which html tag( which will contain the picture - is being rendered the most fastest !!

p.s.:

a) the picture is not pressable :

b) I dont have the ability to create sprite image.

options :

1) div with background image

2) img tag

3) maybe other option ?

Upvotes: 0

Views: 242

Answers (3)

andrewk
andrewk

Reputation: 3871

Opinion:

From my experience background images tend to load faster, altough images with height and width specifed can load faster, but I don't think you have that option. I also know you don't have the option for sprites, which are actually good because the image is loaded once.

It depends a lot on how big the files are, but I'd go with img tags for simplicity and flexibility.

Upvotes: 2

gotofritz
gotofritz

Reputation: 3381

The best performace all around would be to use a sprite, i.e. combine all the images in one (there are online tools to do that), then use css to show only the section that you need.

Loading images in the background renders faster than using an image element, but the difference would hardly be noticeable in this case. Also semantically it sounds like image elements would make more sense - if you turn off images then the page wouldn't make sense, they are not just decorative elements.

Upvotes: 0

Oded
Oded

Reputation: 498972

Since this is a tabular format, you should use a table.

To avoid reflows use the width and height attributes for the rows and columns to ensure the browser renders the container table correctly to begin with. This also means setting width and height on the img elements.

So, use a table with img elements in each cell.

Upvotes: 2

Related Questions