Какой способ загрузить огромное изображение (canvas vs img vs background-image)?

Что я хочу

В настоящее время у меня есть png-образ 4000x4000. После использования tinypng.org он стал всего 288 КБ файлом.

Теперь я хочу, чтобы метод fastes загружал изображение, помещал его в DOM и мог нарисовать на нем много холста.

Я тестировал несколько, и результаты ошеломили меня.

Что я тестировал

Я сделал 3 теста и проверял только скорость загрузки.

(423ms) <canvas>
(138ms) <img>
(501ms) CSS background-image

Тег <img> является самым быстрым.

Вопрос

Итак, неудобно ли использовать тег <img> для отображения огромного (фонового) изображения и использовать какой-то грязный CSS, чтобы иметь возможность рисовать холст на нем?

Или лучше использовать холст в моем случае и не беспокоиться о более длительном времени загрузки?

Ответ 1

Отличный вопрос! Это связано с тем: Когда использовать IMG и CSS-фоновое изображение?

Из этой статьи, если люди предназначены для печати вашей страницы, вы не будете использовать <img> - как это было бы на принтере. То же самое относится к <canvas>, делая background-image логическое решение.

Как ваше фоновое изображение добавляется через CSS? Является ли он встроенным или через собственную таблицу стилей? Если он использует собственную таблицу стилей, попробовал ли вы сжатие CSS перед тестированием скорости?

Это также связано, я полагаю: Ускорить ли изображения в HTML или CSS?

Ответ 2

Я бы подумал о том, чтобы взглянуть с семантической точки зрения на вашу ситуацию: что вы хотите отобразить? Это образ, над которым вы хотите что-то нарисовать? Это фоновое изображение игрового поля?

ИМХО: 500 мс в случае фона CSS не так медленно, для загрузки веб-сайта требуется всего несколько секунд. Если вы заботитесь о скорости загрузки изображения, используйте <img>, но HTML ing может быть немного сложнее, потому что вы должны играть с z-index и position.

Я бы взял фон CSS.