Репонсив (отзивчиво, адаптивно) изображение е това, чийто размер отвръща (реагира) на промените в разделителната способност на екрана. Концепцията за отзивчиви изображения се задейства от необходимостта да се решават проблеми като обслужване на различни размери на изображения на различни устройства и се проявява в използването на тази гъвкавост за неща и извън размерите, като посока на изобразяване, типове изображения и други. Спецификацията на адаптивните изображения е създадена едва след появата на адаптивния дизайн.
С течение на времето са добавяни много начини за изобразяване на отзивчиви изображения а тези допълнения същевременно са разширили инструментариума на Фронтенд разработчиците, а и също така работата с адаптивни изображения стана доста сложна.
Кратко въведение в екрани с висока плътност на пикселите
Преди да преминем към методите за работа и внедряване на отзивчиви изображения, има една важна концепция, която трябва да разберем – пикселната единица, която използваме в уеб: Склонни сме да мислим, че в мобилните устройства заредените изображения трябва да са по-малки, тъй като ширината на устройствата е по-малка. Но това не винаги е вярно (даже към днешна дата може би никога).
„Пикселът… Санчо, всъщност не е пиксел“
Има голяма разлика между CSS Resolution и Screen Resolution : CSS резолюцията се използва за измерванията в нашия уебсайт, а Screen Resolution е действителният брой пиксели на екрана. В наши дни тази разлика съществува във всички мобилни екрани и в някои настолни екрани.
Това означава, че ако например имате изображение с ширина 300 пиксела, можете да заредите изображение, което е до 4 пъти по-широко (в случая до 1200px), и така всъщност изображението ще стане видимо по-ясно!
Но внимание: обслужването на по-голямо изображение се идва със своята цена. По презумпция по-големите изображения се зареждат по-бавно и тази забавеност се засилва значително при мобилните устройства, тъй като скоростта на интернет при тях е доста по-ограничена. Така че трябва да прецените добре плюсовете и минусите и да решите кога яснотата на изображението си струва изоставането във времето за зареждане на изображението.
Тук има нужда от някои уточнения – бързината за зареждането е променлива зависеща от множество фактори – размера на файла (изображение или друг вид файл) би могло да се окаже последен по значение фактор – отново, зависи.
В този пост ще опишем осем метода за внедряване и употребата на респонсив дизайн при изображенията. Първите два използват HTML елемента <img> и srcset атрибута; следващите два използват HTML елемента <picture>; следващите два използват CSS: единият използва image-set атрибута, а другият използва свойствата на медийните заявки за респонсив дизайн (минималната и максималната резолюция); и последните две са бъдещи функционалности при CSS, използващи CSS функцията наречена image().
Причината да има толкова много методи е, че има няколко проблема за решаване при адаптивния дизайн:
- обслужването на по-малки изображения на по-тесни екрани;
- възползвайки се от плътността на пикселите по екрана;
- промяна на фокуса на изображението в различните резолюции;
- и използването на типове файлове с изображения, които все още не се поддържат от всички браузъри.Методът на дескриптора на плътността на дисплея
Display Density Descriptor
Този метод е подходящ за изображения с фиксиран размер и за екрани с висока плътност (на пикселите). Това означава, че на някои екрани, за изображение, чийто действителен размер за CSS/HTML е 200 пиксела, ще можем да заредим изображение с 600px – или дори по-голяма ширина – защото голямата плътност на екрана ще го покаже по-добре.
За да приложим този метод, използваме новия srcsetатрибут на “дескриптора на плътността на дисплея”. Ще определим srcset атрибута с масив от изображения с различни размери и при каква плътност на екрана трябва да се показва всеки размер. Дескриптора на плътността на дисплея описва колко трябва да бъде плътна резолюцията при използването на всеки един от въведените размери на изображението: 1x, 2x, 4x, и т.н.
Забележете! Дескрипторът на плътността на дисплея ще избере изображението в съответствие с плътността на пикселите на екрана, а не с действителния размер на изображението.
Препоръчително е все още да се използва обикновения src атрибут поради браузъри, които не поддържат все още srcset, като IE и Opera mini (кой ги ползва тея браузъри!).
<img src = „cat-200px.jpg“ alt = „котка без захар“ width = „200“
srcset = „cat-200px.jpg 1x ,
cat-400px.jpg 2x ,
cat-600px.jpg 3x,
cat-800px .jpg 4x „ >
Методът за дескриптор на ширината на дисплея и атрибута за размер
Този метод е подходящ за изображения, чиято ширина се променя в зависимост от размера на прозореца и нашите отзивчиви точки на прекъсване. Този случай е най-често използваният при изработка на отзивчиви уебсайтове.
Srcset атрибута с дескриптор за ширина
В този метод дефинираме srcset атрибута заедно с масив от изображения и на каква ширина трябва да се показва всяко едно изображение (трябва да предоставим ширината, защото браузърът не се интересува от действителната ширина на изображението). Този метод, когато се използва самостоятелно без sizes атрибута, се основава на предположението на браузъра, че ширината на изображението трябва да запълни ширината на прозореца.
Този метод е подобен малко като метода Density Descriptor, тъй като използва srcset атрибута с масив от изображения и условията, при които се показва всяко изображение. Но е различен в това, че определението за това кога да се използва всяко едно изображение от масива се базира на ширината на прозореца, а не на плътността на екрана. Тоест, той използва дескриптора на ширината (ширината, която искаме да има изображението), а не дескриптора на плътността – това което се отнася до екрани с висока плътност.
Забележка: Въпреки че използва дескриптора на ширината, а не дескриптора на плътността на дисплея, браузърът все пак взема под внимание екраните с висока плътност.
Атрибутът за размери – sizes
Освен че даваме на браузъра списък с изображения, който да бъде прочетен от дескриптора на ширината (използвайки srcset атрибута), ние трябва да предоставим на браузъра и размера на изображението в сравнение с екрана на браузъра – и за това имаме sizes атрибута.
Атрибутът sizes е масив от условия плюс даден размер на изображението за всяко от условията. (Забележка: Количеството от условия не е непременно равно на броя изображения в масива, както ще видите в следващите примери.) В допълнение към условията ние също така трябва да предоставим, като последен елемент в масива, стойността на ширината, която е без условие. Тази стойност ще бъде нашата резервна стойност, ако не е изпълнено нито едно от описаните условията.
Условия за размера на изображението – има 3 често използвани единици: vw единица, px единица и комбинация от тях, използвайки calc функцията, например calc(30vw + 300px).
Пример за сложно условие:
sizes=“(max-width: 399px) 50vw,
(min-width: 400px) and (max-width: 900px) calc(30vw – 40px),
100vw“>
В обикновен отзивчив уебсайт размерите обикновено имат само едно условие и един резервен вариант и srcset ще имат множество комбинации от размери и ширина на изображението:
<img src=“cat.jpg“ alt=“cat on a watermelon“
srcset=“cat-200px.jpg 200w,
cat-400px.jpg 400w,
cat-600px.jpg 600w“ sizes=“(max-width:800px) 30vw, 600px“>
След като предостави на браузъра srcset масива от изображения и действителните размери на CSS изображението според условията, браузърът ще избере правилното изображение, след като вземе предвид всички тези параметри. И не се притеснявайте, на екрани с висока плътност браузърът ще избере изображението според реалното съотношение на пикселите на устройството.
HTML елемента за изображение <picture>
До този момент, ние говорихме само за <img> елемента, и в повечето случаи това ще бъде достатъчно тъй като <img> елементът заедно със srcset и sizes атрибутите ще свършат по-голямата част от работата и сами. Но <picture> елементът също има начини за внедряване на адаптивни елементи и следващите два метода ще го използват като опишем някои по-сложни случаи:
Метод за режисура на изкуството
Методът Art direction е начин за обслужване на изображения с различни съотношения или различни точки на фокус към различните устройства. С <picture> елемента можем да заредим различен източник в зависимост от CSS ширината на екрана на устройството. По този начин можете да изберете едно и също изображение с различно изрязване и по този начин вниманието на посетителя на уебсайта ви да се съсредоточи върху значимата част от изображението (най-вече за по-малките екрани). Как работят методите на Art Direction?
Вътре в <picture> елемента използваме <source> елемента. Във всеки <source> елемент дефинираме 2 атрибута: media и srcset. Стойността на media атрибута е мултимедийна заявка (същата като и при обикновените отзивчиви мултимедийни заявки за дизайн) и за всяко условие на медийната заявка се дефинира srcset атрибут.
Можем да добавим толкова <source> елементи, колкото са ни необходими.
След всички <source> елементи добавяме и един редовен <img> елемент. Добавянето на <img> елемента е от съществено значение, защото без него изображението няма да работи. Освен това има и други важни причини за добавяне на <img> елемента:
- Ако браузърът не поддържа <picture> елемента, <img> елементът ще бъде използван (такъв е случаят с IE & Opera mini например).
- Ако нито един от <source> елементите не е посочен, браузърът ще използва <img> елемента.
- alt атрибута за достъпност може да се добавя само за графичен елемент – може да се каже това е най-важната причина.
Редът, в който <source> елементите са написани, е важен, защото браузърът ще избере първия работещ източник. Ето илюстрация за това как работи: Пълен HTML пример:
<picture>
<source media = “ (min-width: 600px) и (max-width: 1200px)“
srcset = „images / sinai-medium-screen.jpg“ >
<source media = “ (min-width: 1201px)“
srcset = „images / sinai-large-screen.jpg“ >
<img src = „images / sinai-small-screen.jpg“ alt = „Float Pool Unicorn“>
</picture>