Тематические статьи →

Адаптивные изображения

Изоб­ра­же­ния на сай­тах могут адап­ти­ро­ваться как под раз­ре­ше­ние экрана устрой­ства для кор­рект­ного отоб­ра­же­ния на мобиль­ных устрой­ствах, так и под экраны с высо­ким DPI (напри­мер, под Retina-дис­плеи) для более дета­ли­зи­ро­ван­ного отоб­ра­же­ния. Есть несколько вари­ан­тов реа­ли­за­ции адап­тив­ных изображений.

Самый про­стой спо­соб реа­ли­за­ции адап­тив­ных изоб­ра­же­ний

В самом про­стом слу­чае для реа­ли­за­ции адап­тив­но­сти изоб­ра­же­ний доста­точно исполь­зо­вать изоб­ра­же­ния, кото­рые либо такого же раз­ме­ра, как и та область, кото­рую они будут зани­мать (если нам адап­та­ция под Retina-дис­плеи не нужна), либо в несколько раз больше этой обла­сти, если нужна адап­та­ция под экраны с высо­ким DPI. Сами изоб­ра­же­ния в этом слу­чае про­пор­ци­о­нально мас­шта­би­ру­ются сред­ствами CSS.

Недо­ста­ток дан­ного спо­соба — это высо­кий объём тра­фи­ка, необ­хо­ди­мый для загрузки стра­ницы с боль­шим коли­че­ством пол­но­цвет­ных изоб­ра­же­ний (изоб­ра­же­ния с неболь­шим коли­че­ством цве­тов обычно доста­точно ком­пактны даже в высо­ком раз­ре­ше­нии).

Гиб­кий спо­соб реа­ли­за­ции адап­тив­ных изоб­ра­же­ний с обра­бот­кой на фрон­тенде

При помощи JS мы можем узнать раз­мер обла­сти про­смотра и DPI устрой­ства, а уже исходя из этого запро­сить с сер­вера изоб­ра­же­ния, кото­рые соот­вет­ствуют дан­ным пара­мет­рам. Таким обра­зом, устрой­ства с неболь­шими экра­нами и/или со стан­дарт­ным DPI не будут полу­чать избы­точно боль­шие фото­гра­фии: так и тра­фик эко­но­мит­ся, и сайт загру­жа­ется быстрее.

Реа­ли­зо­вы­ва­ется метод обычно при помощи собы­тия JavaScript, кото­рое при ини­ци­и­ру­ется при загрузке стра­ницы и кото­рое «под­став­ляет» в src-аттри­бут изоб­ра­же­ний ссыл­ку, полу­чен­ную из исход­ной ссылки (обычно хра­ни­мой в data-атри­буте тега img) путем добав­ле­ния в пара­метры для загрузки нуж­ных дан­ных об экра­не.

Этот спо­соб несколько уве­ли­чи­вает объём хра­ни­мых вер­сий фото­гра­фий, слож­нее в реа­ли­за­ции (как бекен­да, так и фрон­тенда), а также тре­бует обя­за­тель­ного нали­чия JS на сто­роне кли­ента.

Также в неко­то­рых слу­чаях кроме раз­ре­ше­ния экрана стоит учи­ты­вать еще и ско­рость под­клю­че­ния к сети интер­нет (например, не стоит передавать изоб­ра­же­ния в высо­ком раз­ре­ше­нии на iPhone с Retina-дис­пле­ем, если этот смарт­фон исполь­зует edge для соеди­не­ния с интер­нетом).

Гиб­кий спо­соб исполь­зо­ва­ния адап­тив­ных изоб­ра­же­ний с обра­бот­кой на бекенде

При пер­вом запросе кли­ента можно «запом­нить» пара­метры его экрана и при гене­ра­ции стра­ниц сразу под­став­лять «пра­виль­ные» ссылки на изоб­ра­же­ния. Для ини­ци­а­ли­за­ции тут тоже часто тре­буется JS, хотя для опре­де­ле­ния устрой­ства можно исполь­зо­вать и заго­ловки запроса (све­де­ния о User Agent часто поз­во­ляют иден­ти­фи­ци­ро­вать устрой­ство). Реа­ли­за­ция, постро­ен­ная на заго­лов­ках запро­сов, уже совсем не зави­сит от JS и кор­ректно рабо­тает в любых бра­у­зе­рах, хотя в настройке она несколько слож­нее.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья о веб-разработке, о веб-технологиях и про фронтенд-разработку. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

При отправке сообщения через форму, укажите пожалуйста предпочтительный способ связи с Вами: телефон или адрес электронной почты. Мы сможем ответить Вам подробнее, если Вы напишете что-то о запланированном проекте или предполагаемых задачах.

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

Реализация «под ключ» проектов по созданию различных видов сайтов, разработка веб-приложений для автоматизации бизнес-процессов, ведение контекстных и медийных рекламных кампаний, поисковое продвижение, комплексная поддержка веб-проектов, консалтинговые услуги.