Как загрузить огромное изображение (холст, img или фоновое изображение)?

Что я хочу

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

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

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

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

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

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

Тег <img> самый быстрый.

Вопрос

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

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


canvas image html css
person Ron van der Heijden    schedule 21.02.2013    source источник
comment
Я в шоке. Они используют один и тот же метод загрузки, не так ли? Может быть, разница во времени связана с обработкой на стороне клиента? Как вы это измерили?   -  person freakish    schedule 21.02.2013
comment
Протестировано с использованием google pagespeed и сеть firebug   -  person Ron van der Heijden    schedule 21.02.2013

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

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

person James Donnelly    schedule 21.02.2013

arrow_upward
0
arrow_downward

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

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

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

person Joshua    schedule 21.02.2013