Всем привет. Задержался я с новой статьей (устроил себе несколько дней выходных и уехал на море). Но надеюсь, что этой статьей немного заглажу этот инцидент:)
Проблема адаптивных картинок довольно актуальна, поэтому начну с небольших рассуждений и способов реализации, а потом выделю вариант, который, как по мне подходит наилучшим образом.
Итак, около года назад я считал, что для того, чтобы сделать картинку адаптивной (то есть сделать так, чтобы она растягивалась или сжималась по ширине контейнера), достаточно воспользоваться следующим кодом:
Wrapper img{ width: 100%; }
И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048x1536px ?
Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, — это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.
И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате — это потерянный клиент.
Можно попробовать задать несколько дивов с картинками, а потом, при помощи медиазапросов, скрывать ненужные и показывать только ту картинку, которая подходит под текущее разрешение.
Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.
В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку «Сеть».
Вообще, существует еще много проблем, которые могут возникнуть при верстке адаптивных изображений. И решений, накопилось тоже не мало. Все зависит от конкретной ситуации.
В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:
Особенность в том, что вместо src — используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.
Ознакомиться с поддержкой браузерами тега picture на текущий момент можно на этой странице .
Вообще, при использовании новых тегов, я рекомендую заглядывать на это сайт и проверять текущее положение вещей.
Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE — не жалко, они должны страдать:)). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория:)
Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js .
Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).
В отличии от способа, описанного выше, сейчас грузится только одна картинка, а не три, как это было раньше.
Вот такой не хитрый способ. А как вы делаете адаптивными изображения? Поделитесь пожалуйста своими методами в комментариях. Спасибо.
Сегодня вы узнаете как можно очень просто сделать любое изображение адаптивным и масштабируемым, то есть чтобы оно растягивалось на весь экран. К примеру если вы делаете для своего сайта фото обложку или фоновое изображение, то вы должны учитывать, что сайт будет открываться на разных устройствах, разных размеров. Изображение должно подстраиваться под любой размер экрана.
Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php. Вставляем код фото обложки перед закрывающимся тегом head. Обратите внимание как по умолчанию указаны размеры изображения, они конкретные. То есть, вы делаете обложку под свой размер экрана, а если на ваш сайт зайдёт человек, у которого размер экрана больше вашего, то обложка будет у него отображаться не на весь экран.
Заходим на сайт, обложка отображается. Если у вас адаптивный шаблон, то обложка будет адаптироваться под более маленькие экраны, а вот под экраны которые больше ширины изображения, обложка не будет подстраиваться.
Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools” , в инструмент “Screenfly” . Вводим в поле адрес нашего сайта, жмём кнопку GO . Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.
Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.
Снова заходим в сервис “quirKtools” , выбираем самый большой размер экрана и смотрим что теперь обложка сайта адаптируется под самый большой размер экрана.
Ширина изображения будет отображаться на любом устройстве на 100%, то есть на весь экран, а высота изображения будет вычисляться автоматически пропорционально ширине изображения. Если бы вы указали конкретный размер высоты изображения, то изображение отображалось бы искажённым, то есть не пропорциональным.
После того, как вы разобрались с гибкой сеткой, настало время обратить внимание на другое содержимое веб-страниц, которое требует определенных манипуляций, чтобы стать адаптивным. Речь идет об изображениях и видео. Если вы просто добавите изображение на веб-страницу и уменьшите окно браузера, то увидите, что картинка не адаптируется под ширину окна, а сохраняет свои исходные размеры. Это может привести к появлению горизонтальной прокрутки, а также к тому, что изображение будет выходить за пределы адаптивной колонки:
Как сделать изображение адаптивным с помощью CSS? Для начала вам понадобится убрать атрибуты ширины и высоты в теге изображения (если таковые имеются). Ваш HTML-код не должен их содержать:
В таблицу стилей добавьте следующую запись:
Img { max-width: 100%; }
Это означает, что максимальная ширина тега будет равна ширине блока-контейнера, в котором он содержится. Изображение не сможет выйти за пределы своего родителя, а при изменении ширины родителя оно будет автоматически подстраиваться под нее.
Точно так же можно сделать ширину изображения равной, например, половине ширины родительского контейнера:
Img { max-width: 50%; }
Адаптивные видеоЧтобы сделать адаптивными теги , а также и , добавьте для них такой же CSS-код, как и для изображений. Желательно перечислить сразу все селекторы:
Img, video, embed, object { max-width: 100%; }
Адаптивные iframeДела обстоят сложнее, если вы встраиваете видео через тег . Тогда вышеописанный метод здесь не работает. Придется прибегнуть либо к помощи JavaScript, либо использовать более хитрый CSS-код.
Если вы выбрали второй вариант, вам понадобится поместить тег в дополнительный контейнер . Например:
Затем добавьте следующий код CSS:
Video { height: 0; position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
Как вы заметили, в коде присутствует свойство padding-bottom со странным значением 56.25% . Что это означает? Значение padding-bottom , указанное в процентах, считается относительно ширины блока. Число 56.25 мы получили, определив соотношение сторон встраиваемого видео (16:9) и разделив число короткой стороны на число длинной стороны, после чего умножив результат на 100.
Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением. Для решения этой проблемы было создано множество хаков .
Я был расстроен тем фактом что до сих пор нет спецификации адаптивных изображений. В ноябре 2011-го я предложил тег picture . Данный элемент использует механизм тега video в паре с Media Queries:
Между предложенным элементом picture и атрибутом srcset есть два основных различия. Самым очевидным является то, что атрибут srcset используется в элементе img , который изначально предназначен для изображений. И это замечательно.
Второе различие в том, что использование атрибута srcset не предусматривает Media Queries. Хотя с помощью Media Queries возможно устанавливать параметры для любого разрешения, ориентации устройтсва, dpi, глубины цвета и соотношения сторон. С другой стороны, задавать Media Queries для каждого варианта изображения может привести к увеличению кода в несколько раз.
О"Коннор писал:
Почему я предлагаю коэффициент масштабирования, а не Media Queries? Media Queries работают за счет данных User Agent"а, мы же обсуждаем взаимоотношения между разными вариантами изображений. Так же, User Agent должен иметь возможность свободно выбирать вариант изображения которое лучше всего подходит для текущего состояния, учитывая не только параметры заданные с помощью Media Queries, но и размеры заданные элементу img с помощью CSS, а может даже и текущую величину масштабирования страницы.Мне нравится идея дать возможность браузеру выбирать наиболее подходящий вариант изображения базируясь на таких данных как скорость приема информации, задержка, ppi, ориентация устройства и т.д. Идея в том, чтобы освободить разработчика от необходимости описывать условия при которых должен задействоваться тот или иной вариант изображения. Нужно указать лишь данные о изображении, размер и плотность, а браузер уже сам решит что лучше использовать в данной ситуации.
Предложенный атрибут srcset имеет два недостатка. Первый очень субъективный, но многие со мной согласятся: спецификация, какой она является сейчас имеет ужасный синтаксис:
srcset="face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">
Конечно же это может быть и должно быть исправлено. Дело не только в эстетике кода. Если синтаксис слишком запутан, то он будет использоваться не верно.
Вторая проблем состоит в том, что разработчики не желают лишится возможности управления процессом. Это вопрос потери доносимого смысла визуального контента (читайте абзац
Адаптивное изображение часто крайне необходимо для качественных проектов, но вот его реализация бывает затруднительна. К тому же, при верстке под мобильные устройства, под которые необходимо иметь урезанную версию картинки.
Как это реализовать правильно на HTML5?
Любой качественный адаптивный сайт не может обойтись без резиновых изображений, которые соответствуют всем требованиям. На данный момент существует несколько способов, которые могут решать данный вопрос. И лишь один из них является функциональным и соответствующий всем стандартам, но достаточно редко используемый. Ранее мы рассматривали , которые способны задать любому элементу необходимые правила, в зависимости от размера экрана. Существует прекрасный его аналог, который я советую вам использовать.
Для начала, давайте поочередно рассмотрим и сравним возможные варианты решения данной проблемы.
Как делали раньшеДанный способ создания адаптивного изображения является действенным и качественным, в котором даже нет необходимости использования медиа-запросов. Код имеет всего 2 строчки, которые выполняют свои функции на ура:
img { max-width: 100%; height: auto; }
img { max-width : 100% ; height : auto ; |
Строка 2 — задаётся правило, согласно которому максимальная ширина изображения будет равна ширине экрана устройства. Таким образом, ширина картинки будет меняться, в зависимости от размера экрана.
Строка 3 — согласно данному правилу, при изменение max-width, высота картинки будет меняться пропорционально её ширине. Собственно, чтобы картинка имела заданные изначально пропорции.
Как я уже сказал — железный вариант, для быстрого задания адаптивности изображению, но отсутствует возможность создания изображения под мобильные устройства, без задания дополнительных свойств.
Как делают сейчас с помощью HTML5Современное решение для создания адаптивного изображения имеет несколько существенных преимуществ, которые заслуживают внимания:
- адаптивность изображения;
- автоматический подбор оптимальной картинки;
- возможность обрезки изображения;
- не требуются css-правила;
- валидный код.
Все эти преимущества содержит в себе — Его синтаксис может показаться необычным, но как только вы к нему привыкнете — поймете, что это действительно круто:
< picture > < source srcset = "mobile.jpg" media = "(max-width: 320px)" alt = "Урезанная картинка" > < source srcset = "standart.jpg" > < img srcset = "standart.jpg" alt = "Исходная картинка" > < / picture > |
Все элементы, привычно обрамляются в тег, в котором есть:
- img — всем привычный тег изображения;
- source — новый тег, в котором мы записываем условие для определенного размера экрана и соответствующее ему изображение. Таких тегов должно быть столько, сколько условий мы хотим создать.
Помимо этого существует новый для нас тег: srcset — не стоит пугаться, он необходим только для задания пути к изображению.
Последний тег media имеет роль медиа-запроса. Как видно из примера, синтаксис записи аналогичен тому, что мы записываем в CSS — ничего сложного.
В качестве медиа-запросов можно использовать:
- max-width;
- min-width;
- max-height;
- min-height;
- orientation.
Таким образом, есть возможность подгружать необходимые картинки для любой ориентации и размера экрана:
< picture > source srcset = "standart_portrait.jpg" media = "(min-width: 30em) and (orientation: portrait)" >< img srcset = "standart_landscape.jpg" alt = "Исходная картинка" > < / picture > |
С помощью этих 2 способов можно сделать адаптивное изображение на всех видах устройств, но как мы уже выяснили тег Имеет больше возможностей и преимуществ, чем его аналог. Я советую пользоваться именно вторым вариантом, так как его синтаксис выглядит очень приятно и не требует внесения изменений в CSS.
Однако, для каждого случая следует подбирать вариант индивидуально, в зависимости от требований и возможностей в создании.
