Какой HTML-тег, содержащий изображение, имеет лучшую производительность?

Question

Я хочу создать 10х10 изображений на html-странице. (ASPX)

есть много вариантов, как это сделать.

my question is : который html тег (который будет содержать картинку - обрабатывается самый самый быстрый !!

p.s:.

а) картинка не может быть нажата:

b) У меня нет возможности создавать спрайт-изображение.

опции:

1) div с фоновым изображением

2) img tag

3) может быть, другой вариант?

Answer 1

Мнение:

Из моего опыта background images имеют тенденцию загружаться быстрее, хотя изображения с указанными высотой и шириной могут загружаться быстрее, но я не думаю, что у вас есть такая опция. Я также знаю, что у вас нет опции для спрайтов, которые на самом деле хороши, потому что изображение загружается один раз.

Это зависит от размера файлов, но я бы выбрал img tags для simplicity and flexibility.

Answer 2

Поскольку это табличный формат , вам следует использовать таблицу.

Чтобы избежать перекомпоновки, используйте атрибуты ширины и высоты для строк и столбцов, чтобы браузер правильно отображал таблицу контейнеров для начала. Это также означает установку ширины и высоты для элементов img.

Итак, используйте таблицу с img элементами в каждой ячейке.

Answer 3

Наилучшим результатом было бы использование спрайта, то есть объединение всех изображений в один (для этого есть онлайн-инструменты) , а затем использование css для отображения только нужного вам раздела.

Загрузка изображений в фоновом режиме выполняется быстрее, чем при использовании элемента изображения, но в этом случае разница вряд ли будет заметна.Также семантически это звучит так, как будто элементы изображения будут иметь больше смысла - если вы отключите изображения, то страница не будет иметь смысла, это не просто декоративные элементы.