Картинка адаптация – Качественно адаптировать картинки под мобильные устройства

Адаптивные изображения с помощью CSS

В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.
Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.

Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.

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

img {
  width: 100%;
  height: auto;
}

img { width: 100%; height: auto; }

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px;, в этом блоке нам необходимо вывести адаптивное изображение.

HTML:

<div>
  <img src="image01.jpg" />
</div>

<div> <img src=»image01.jpg» /> </div>

CSS:

div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* центрируем основной контейнер */
}
img {
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
}

div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что <img> элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

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

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
</div>

<div> <img src=»image01.jpg» /> <img src=»image02.jpg» /> </div>

CSS:

img {
  width: 48%;
  display: inline-block;
}

img { width: 48%; display: inline-block; }

2. Три колонки изображений

С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32%.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
</div>

<div> <img src=»image01.jpg» /> <img src=»image02.jpg» /> <img src=»image03.jpg» /> </div>

CSS:

img {
  width: 32%;
  display: inline-block;
}

img { width: 32%; display: inline-block; }

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

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

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
  <img src="image04.jpg" />
</div>

<div> <img src=»image01.jpg» /> <img src=»image02.jpg» /> <img src=»image03.jpg» /> <img src=»image04.jpg» /> </div>

CSS:

/* Для небольших устройств (смартфоны) */
img {
  max-width: 100%;
  display: inline-block;
}
/* Для средних устройств (планшеты) */
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/* Для больших устройств (ноуты, пк) */
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }

Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

CSS:

.container {
  width: 100%;
}
img {
  width: 100%;
}

.container { width: 100%; } img { width: 100%; }

Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.

На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.

Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

dbmast.ru

Адаптация изображения для web

В этой небольшой статье вы узнаете, как легко и просто адаптировать изображения для загрузки в web.

Зачем это нужно?

Мини-гайд создан для новичков, а также для тех пользователей, кто по каким-то причинам не знает/не умеет адаптировать свои изображения под определённый формат.
Разберём на примере нашего форума.

Согласно нашим правилам п.2.5(г), изображения для загрузки в тему/пост форума должны соответствовать указанным в правилах условиям (размер не более 1024 х 1024 пикселей, вес не выше 0.5 мб) или быть адаптированы под них. Это снизит нагрузку на наши сервера и облегчит трафик для тех, кто заходит с мобильных устройств.

Ниже вы увидите план действий, с помощью которого сможете пройти несложный процесс подготовки изображения перед загрузкой на ресурс.

Поехали!

Как узнать параметры изображения?

Для того чтобы узнать параметры изображения, есть простые способы:

• Просмотрщик
• Инфо-окошко

В первом случае откройте изображение в просмотрщике и там на панели информации посмотрите данные. 

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

Проанализируйте информацию о файле. Если вес и размеры файла не превышают допустимые, можете сразу грузить на форум.

Если размеры или вес превышают максимально допустимые, то изображение нужно адаптировать.

Уменьшаем размеры изображения

Для этого идём в меню Изображение — Размер изображения. В открывшемся окне вносим изменения. Каждая из сторон изображения не должна превышать 1024 пикселя.

Если у вас появилось желание немного добавить резкости вашей картинке (оно может возникнуть после просмотра уменьшенного изображения), то для этого тоже есть простой способ. 

Делаем копию слоя. Идём в меню Фильтр — Усиление резкости — Умная резкость. Приведённые ниже на скрине параметры универсальны.

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

Итак размеры уменьшили. 

Снижаем вес и сохраняем

Теперь нужно уменьшить вес и сохранить. Для этого есть два варианта. 

• Сохранить для Web 
• Экспортировать как 

Первый и наиболее подходящий – Сохранить для Web (старая версия). Этот способ позволяет адекватно уменьшить вес изображения без заметного ухудшения качества.

Чтобы воспользоваться этим способом идём в меню Файл — Экспортировать — Сохранить для Web (старая версия) и настраиваем параметры. Непосредственно на вес влияет опция Качество и Размер изображения. Но, так как мы картинку уже уменьшили, то регулируем качество. Значения 80-90 вполне приемлемы.

Второй способ – это использование более современной версии экспорта, но менее подходящий, так как может «слегка» прибавлять вес. Но как вариант, разумно, может быть использован. Идём в меню Файл — Экспортировать — Экспортировать как… и так же настраиваем параметры.

После таких нехитрых манипуляций вы легко адаптируете ваше изображение под допустимый формат форума и сможете избежать неприятных сюрпризов с удалением вашей картинки.

Желаем вам вдохновения и креатива!

photoshop-master.ru

Адаптация изображений под Retina-дисплеи

Обновили материал 14.08.2018

Джейсон Родригез, менеджер по продуктам Litmus, рассказал, почему важно адаптировать емейлы под Retina дисплеи. Наш руководитель отдела разработки, Антон Чирков, изучил текст и поделился своими комментариями.

Емейл-маркетологи всё чаще сталкиваются с проблемой, которую вызвала популярность мобильных устройств. Дело не только в разнообразных размерах экранов мобильных, но и в Retina дисплеях с высоким разрешением.

«Retina дисплей» не вполне корректное название. Это маркетинговый термин компании Apple и формально относится только к её продуктам. Однако сейчас его используют для всех экранов с повышенной плотностью пикселей.

Такие дисплеи способны преобразить любое изображение.

Давайте разберёмся как именно работает Retina и чем она полезна дизайнерам и емейл-маркетологам.

Из истории

Вернёмся в 2010 год. Компания Apple выпустила iPhone 4 с Retina дисплеем с высоким разрешением (DPI). DPI — это количество пикселей, которое производитель помещает на дюйм экрана. Чем выше DPI, тем более чёткое и детальное изображение или текст.

После появления Retina дисплеев на устройствах компании Apple, другие производители внедрили эту новинку себе на планшетах, ноутбуках и даже настольных компьютерах.

Какое отношение Retina дисплеи имеют к емейл-маркетингу?

Каждый маркетолог должен показать продукт с лучшей стороны. Несомненно, в емейл-маркетинге главные роли играют следующие понятия: тема письма, частота отправки, контент и дизайн. Это может как привлечь, так и отпугнуть подписчиков. Первое, что бросается в глаза — дизайн и изображения, и только потом начинают внимательно читать текст.

Неадаптированные изображения под Retina выглядят расплывчато и нечётко. Это приводит к потере интереса подписчиков.

Как адаптировать изображения под Retina экраны?

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

В качестве примера рассмотрим письмо компании Litmus. В хедере емейла находится логотип, размером 130×48 px. Изображение выглядит размыто для подписчиков с Retina дисплеями.

Сохраните картинку в большем размере для повышения чёткости изображения. Здесь размер 260×96 px. В HTML-коде прописываем размеры отображения логотипа в два раза меньше, чем реальные. В итоге получаем 130×48 px.

<img alt="Litmus" src="[email protected]" border="0">

В результате на дисплеях с повышенной плотностью пикселей выводится красивое и чёткое изображение.

Очевидные недостатки

Основной недостаток — увеличение веса картинок и времени загрузки емейла.

Чтобы сократить время загрузки изображений письма, Retina адаптацию применяем только для малоцветных изображений, таких как логотипы и иконки.

Для retina-изображений указывайте размеры в пикселах, а не в процентах. Иначе могут появиться проблемы отображения в почтовых клиентах outlook 2007/2010/2013/2016.

После сохранения изображений вы можете использовать специальные программы для дальнейшего сжатия: ImageOptim, JPEGmini, TinyPNG, Compressor.io и Kraken.

Учитывая современные тенденции, все емейл-сообщений должны быть адаптированы под Retina-дисплеи. Заботьтесь о своих подписчиках, чтобы им не пришлось вглядываться в размытое содержание письма.

emailmatrix.ru

Качественно адаптировать картинки под мобильные устройства

Приветствую всех на блоге. Обещался, что статья про youtube и его адаптацией будет последняя. В общем забыл я написать как адаптировать картинки под любые разрешения мобильных устройств. Дел, как всегда на пару минут, а пользы целый вагон, если не хотите, чтобы ваша мобильная версия выглядела убого, то читайте дальше.

Проблема.

На некоторых сайтах изображения адаптированы либо частично, либо вообще никак. Я опять начинаю издеваться над сайтом Андрея usvinternet.ru. Потому что там наглядный пример того что картинка как бы оптимизирована под гаджеты. Так выглядят файлы в простом режиме.

А так они показываются на экранах мобильных устройств. Как видите, вроде бы картинка сужается по ширине, а вот по высоте никак, сохраняя свои размеры.

Из-за чего происходит в первую очередь? Потому что в стилях сайта Андрея прописаны директивы только к ширине.
Но это не ошибка верстки шаблона, дело в том что у него в атрибутах HTML самого файла прописаны точные размеры, вот скриншот.

В итоге так и происходит, ширина становиться резиновой, а высота никак, на неизменном уровне. Если этих атрибутов не было, то все было в порядке и картинка была адаптивна.Сейчас начнутся вопросы, что же надо убирать с каждой картинки атрибуты, это все очень долго, а а а? Нет, конечно, способ есть.

Решение.

А решение очень простое, прописываете такие директивы к стилям вывода картинок в постах и во всех местах блога.

max-width: 100%;
height: auto;

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

Видим класс называется .post img. Он нам и нужен, на то что прописано внутри внимания не обращаем. Идем теперь в редактирование файла style.css, я покажу из самой админки вордпресса (внешний вид-редактор). Нажимаем комбинацию cntrl+f для вывода поиска по документу, и набираю фразу post img.

На снимке показано место, и найденный фрагмент, надо поправить, и вставить тот код, который я давал выше.

Внимание, если в классе уже есть, прописанные стили типа width и height, то их стираем и ставим те которые я дал вам.

Сохраняем, и проверяем, если все сделано как в статье то вы увидите что ваша картинка адаптируется ко всем размерам экрана, не зависимо от разрешения. Не забываем что так же надо поработать над весом изображений,

Итог.

Давайте подобьем все операции. А их всего четыре.

1. Находим необходимый класс через «посмотреть код».
2. Находим его в style.css, или если тема сложная то у него будет другое название, но расширение по любому css.
3. Меняем или вставляем мой код.
4. Сохраняем и радуемся.

Ну что, начинающие и уже бывалые блоггеры дал я вам пищу для размышления. А у вас картинки правильно настроены, либо же как всегда ?

wpsovet.ru