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

Что я хочу

В настоящее время у меня есть изображение PNG4000x4000, После использованияtinypng.org это стало просто 288KB файл.

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

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

Что я проверял

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

(423ms)(138ms)<img>(501мс) CSSbackground-image

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

Вопрос

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

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

 freakish21 февр. 2013 г., 10:41
Я в шоке. Они используют тот же метод загрузки, не так лит они? Может быть, разница во времени связана с обработкой на стороне клиента? Как вы это измерили?
 Ron van der Heijden21 февр. 2013 г., 10:58
Протестировано с использованиемскорость страниц в гугле а такжесетка для пожарных

Ответы на вопрос(2)

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

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

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

Решение Вопроса

Когда использовать IMG против CSS background-image?

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

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

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

Ваш ответ на вопрос