Ръководство за начинаещи за адаптивни изображения в HTML

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

Тази статия изследва как можете да създавате отзивчиви изображения в HTML, като използвате srcset и елемента на картината.

Защо трябва да използвате адаптивни изображения?

Когато софтуерните инженери създаваха мрежата, те не обмисляха как браузърите ще се справят с отзивчивите изображения. В крайна сметка потребителите са имали достъп до мрежата само от настолни компютри или лаптопи. Разбира се, днес това не е вярно.

Според Statista, над 90 процента от световното интернет население влизат онлайн с мобилния си телефон. Повечето от уеб страниците в интернет съдържат изображения и тези изображения са един от показателите, използвани за измерване на уеб производителността. За да подобрите производителността, трябва да оптимизирате изображенията си, като ги направите отзивчиви.

Как да създавате отзивчиви изображения в HTML

Можете да подхождате към отзивчивите изображения от два ъгъла – или като поднесете едно и също изображение с различни размери, или като поднесете различни изображения според характеристиките на дисплея. Можеш да използваш или. Тези две опции обработват отзивчивите изображения по различен начин, но всички те показват едно изображение от дадени алтернативи в зависимост от зададените правила.

Свързани: Как да направите уебсайта си отзивчив и интерактивен с CSS и JavaScript

Използване на srcset

Стандарт HTML ви позволява да посочите само един файл с изображение. Ако искате да покажете различно изображение в зависимост от размера на устройството, тогава трябва да използвате srcset.

Синтаксис:

srcset ви позволява да предоставите допълнителни изходни файлове и браузърът ще избере изображението, което изглежда оптимално за този размер на изображението.

 src="cute-cat.jpg"
 alt="Сладка котка">

srcset се състои от три части: Името на файла с изображение, което указва пътя към изходното изображение, интервал и присъщата или реалната ширина на изображението.

Използване на srcset с размери

Проблемът с използването srcset е, че нямате контрол върху това какво изображение браузърът ще избере за показване. Комбиниране srcset с размери решава този проблем. размери дефинирайте набор от медийни условия, които намекват за изображението с оптимален размер.

Вече можете да пренапишете таг по-горе, както следва.

sizes="(max-width: 600px) 480px,
 800px"
 src="cute-cat.jpg"
 alt="Сладка котка">

размери се състои от медийно условие, в този пример това е (макс. ширина: 600px), което представлява прозореца за изглед ширина, интервал и ширина на слота (480px), указващи пространството, което изображението ще запълни, ако състоянието на носителя е вярно.

Свързани: Как да използвате медийни заявки в HTML и CSS за създаване на адаптивни уебсайтове

Тук браузърът първо ще провери ширината на устройството и ще я сравни със състоянието на носителя. Ако условието е вярно, то ще провери ширината на слота и ще зареди изображение от srcset със същата ширина или следващата по-голяма.

Имайте предвид, че и вие включвате src което предоставя изображението да се върне в браузъри, които не поддържат srcset и размери.

srcset също така ви позволява да обслужвате изображения с различни разделителни способности с помощта на x-дескриптори.

 src="cute-cat-low.jpg"
 alt="Сладка котка">

В този пример, ако устройството има разделителна способност от два пиксела на устройството на CSS или повече, браузърът ще зареди изображението cute-cat-high1.jpg.

Хардуерни и софтуерни пиксели

Проблемът с това решение е, че изображенията реагират само по отношение на плътността на пикселите на устройството. Това е съотношението на хардуерните пиксели към софтуерните или CSS пикселите. Хардуерен пиксел е действителната светлинна точка на екрана, докато софтуерният пиксел или CSS пикселът е мерна единица. Плътността на пикселите определя разделителната способност на устройството.

Когато изобразявате отзивчиви изображения, не вземайте предвид само разделителната способност; размерът на дисплея също е важен. В противен случай може да се окаже, че ненужно зареждате големи изображения или изображения, които са твърде пикселирани.

 src="cute-cat-low.jpg"
 alt="Сладка котка">

Използвайки

е HTML елемент, който обвива няколко елементи, съдържащи различни изходни файлове и an елемент. Докато прави изображенията отзивчиви, като обслужва различни размери на едно и също изображение, ви позволява действително да промените показаното изображение.

Синтаксис:

Помислете за ситуация, в която имате голямо пейзажно изображение. Изображението се показва и изглежда пропорционално на настолен компютър, но се свива значително на мобилни устройства, така че елементите на изображението стават малки. Неотзивчивото изображение допринася за лошо потребителско изживяване. С можете да кажете на браузъра си да превключи към портретно изображение в близък план, когато сте на мобилно устройство.

Както в първия подход, съдържа медиен атрибут, който можете да използвате, за да предоставите състоянието на носителя. Например, браузърът ще покаже „cute-cat-480w.jpg“, ако ширината на изгледа е 639px или по-малко. В srcset съдържа пътя на файла с изображението, който искате да покажете и src определя изображението по подразбиране.

Свързани: 7 нови CSS функции за създаване на отзивчив уебсайт

Резервен вариант за WebP Image Format

Друго нещо, което се справя добре, предоставя резервен вариант за съвременните графични формати като WebP. WebP изображенията имат висока производителност, малки са и предлагат бързо уеб изживяване. Следователно можете да решите да ги използвате на вашите сайтове. Предизвикателство, което може да изпитате, е, че не всички браузъри поддържат WebP изображения. С, не изпитвате този проблем, тъй като браузърът ви може да зареди алтернативно изображение, ако не поддържа WebP.

Защо да създавате отзивчиви изображения в HTML, а не в CSS?

CSS предлага стабилни опции за работа с отзивчиви изображения. Така че защо да не го използвате? Браузърът предварително зарежда изображения, преди да анализира CSS. Така че преди JavaScript на вашия сайт да открие ширината на изгледа, за да направи съответните промени в изображенията, оригиналните изображения вече са били предварително заредени. Поради това е по-добре да обработвате отзивчиви изображения с помощта на HTML.

Стремете се към възможно най-доброто качество на изображението

Видяхте как можете да създавате отзивчиви изображения в HTML с помощта на > и в тази статия. Сервирането на отзивчиви изображения обикновено включва отчитане на размера на изображението и разделителната способност на изображението, тъй като те са свързани с размера на дисплея. Ако се направи неправилно, качеството на изображението може да пострада. Уверете се, че сте избрали изображение, което осигурява оптимална използваемост, използвайки най-малко ресурси.

Принципи на адаптивния уеб дизайн

Уеб дизайнерите подкрепят отзивчивия дизайн от години, но какво е това и как може да създаде превъзходни уеб страници?

Прочетете Следващото

За автора