Кой начин да заредите огромно изображение (canvas vs img vs background-image)?

Какво искам

В момента имам png изображение на 4000x4000. След използване на tinypng.org той стана само 288KB файл.

Сега искам бързият начин да заредя изображението, да го поставя в DOM и да мога да рисувам много платно върху него.

Тествах някои и резултатите ме зашеметиха.

Това, което тествах

Направих 3 теста и проверявам само скоростта на натоварване.

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

Тагът <img> е най-бързият.

Въпрос

И така, лоша практика ли е да използвате маркера <img> за показване на огромно (фоново) изображение и да използвате мръсен CSS, за да можете да рисувате платно върху него?

Или е по-добре да използвам canvas в моя случай и да не се тревожа за по-дългото време за зареждане?


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 net   -  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

Мисля да погледна вашата ситуация от семантична гледна точка: Какво искате да покажете? Изображение ли е, върху което искате да нарисувате нещо? Това фоново изображение на игрална дъска ли е?

IMHO: 500 ms в случай на CSS фон не са толкова бавни, винаги отнема няколко секунди, за да зареди уебсайт. Ако се интересувате от скоростта на зареждане на изображението, използвайте <img>, но HTMLing може да бъде малко по-трудно, защото трябва да се занимавате с z-index и position.

Бих взел фона на CSS.

person Joshua    schedule 21.02.2013