wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Адаптивная картинка: 5 трюков CSS для экономии времени

alexxlab
No Comments

Содержание

Как сделать изображения адаптивными с помощью CSS — Разработка на vc.ru

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

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

Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.

Что мне следует использовать: относительные или абсолютные единицы?

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

Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width. Тогда высота изображения автоматически изменится.

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

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

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

Стоит ли использовать медиа-запросы?

Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.

Медиа-запрос — еще одна важная функция CSS, которая помогает сделать веб-сайт адаптивным. Я не буду вдаваться в подробности, но вы можете прочитать другой мой пост позже, чтобы узнать, как использовать медиа-запросы более подробно.

Ответ на этот вопрос: «это зависит от обстоятельств». Если хотите, чтобы изображение имело разные размеры от одного устройства к другому, нужно будет использовать медиа-запросы. В противном случае вы этого не сделаете.

Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:

@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}

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

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

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

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

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

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

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

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

HTML:

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

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> </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-атрибутов ширины и высоты непосредственно в разметке.

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

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу <img> значение inline-block для свойства display, т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

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

HTML:

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

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> </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 class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> <img src=”image03.jpg” width=”960″ height=”640″ /> </div>

CSS:

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

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

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

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

HTML:

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

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> <img src=”image03.jpg” width=”960″ height=”640″ /> <img src=”image04.jpg” width=”960″ height=”640″ /> </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 и поделитесь ссылкой на запись в своих соц-сетях:

[Перевод] HTML5 Адаптивные изображения / Хабр

Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением. Для решения этой проблемы было создано множество хаков.

Я был расстроен тем фактом что до сих пор нет спецификации адаптивных изображений. В ноябре 2011-го я предложил тег picture. Данный элемент использует механизм тега video в паре с Media Queries:

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
   <!-- для браузеров не поддерживающих тег -->
   <img src=midres.png alt="angry pirate">
</picture>

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

Тем не менее, в январе, редактор HTML5, Ян Хиксон (Ian Hickson), написал:

Зачем делать это для тега img? Обычно элемент img используется для изображений в контенте, который вам не нужно делать адаптивным.

Позже Эдвард О’Коннор (Edward O’Connor) из Apple предложил другой метод, использовать атрибут srcset для элемента img. Это дополняет аналогичное предложение нового CSS свойства image-set, которое уже добавлено в WebKit:

<img src="foo-lores.jpg"

srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"

alt="decent alt text for foo.">

Значения «2х» и «6.5х» сообщают браузеру относительное разрешение; foo-hires.jpg в 2 раза больше оригинального изображения, а foo-superduperhires.jpg в 6.5 раз. Через пару дней это предложение было добавлено в спецификацию.

Между предложенным элементом 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 имеет два недостатка. Первый очень субъективный, но многие со мной согласятся: спецификация, какой она является сейчас имеет ужасный синтаксис:

<img src="face-600-200-at-1.jpeg" alt=""

srcset="face-600-200-at-1.jpeg 600w 200h 1x,

face-600-200-at-2.jpeg 600w 200h 2x,

face-icon.png 200w 200h">

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

Вторая проблем состоит в том, что разработчики не желают лишится возможности управления процессом. Это вопрос потери доносимого смысла визуального контента (читайте абзац «Do I care about art direction?») и многие убеждены что Apple не подумали об этом. Хотя сторонники srcset придерживаются противоположного мнения.

Источник: HTML5 adaptive images: end of round one

Полезные ссылки:

— Немного о холиваре между разработчиками

— Which responsive images solution should you use?

Адаптивные изображения без шаманства / Блог компании Кельник / Хабр

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

На типичных сайтах изображения могут появляться тремя способами.

  1. Быть элементами дизайна сайта (бекграунды, кнопки и т.д.).

  2. Загружаться через специальные модули (например, изображения в фотоальбом).

  3. Вставляться через WYSIWYG-редактор CMS (например, в текст статьи).

Мы захотели получить такое решение, которое было бы некой «надстройкой» над сайтом. Чтобы можно было не лезть в код CMS, через которую загружаются изображения на сайт, а также не готовить адаптивные картинки вручную.

Сначала на помощь приходит реализация Adaptive Images…

Метод Adaptive Images

Идея в том, чтобы с минимумом изменений в коде сайта предоставить эти самые адаптивные картинки. Алгоритм следующий:

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

  2. С помощью директивы в .htaccess идет рерайт всех картинок сайта на php-скрипт adaptive-images.php.

  3. В php-скрипте есть конфиг разрешений (связанный с media queries стилей). Значение из куки подгоняется под ближайшее в большую сторону значение из этого конфига. Если изображение по запрашиваемому пути существует и его ширина больше требуемой — изображение пережимается и кладется в специальную папку кеша (если оно не было пережато заранее).

  4. Скрипт отдает картинку клиенту.

Плюсы Adaptive Images

  • Не требуется менять код сайта, кроме вставки одной строки js.

  • Не нужно пережимать картинки вручную, они сами пережмутся при необходимости.

  • Нет лишних клиентских запросов.

  • Поддерживается время жизни кешированных картинок — при обновлении оригинала рано или поздно кешированная будет обновлена.

  • Легко внедрить, так же просто откатить, при необходимости изменения размеров картинок все решается правкой одного массива.

Минусы Adaptive Images

А теперь немного о грустном. Данное решение подразумевает, что все (вообще все) картинки на сайте будет отдавать не nginx, не apachе, а php-скрипт. Каждая картинка — это запуск интерпретатора php (даже если картинка уже пережата). Это и медленно, и идеологически неверно.

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

Наш вариант

Главная идея: не запускать php-скрипт, если изображение уже существует. Для этого apache в момент редиректа должен знать название пережатой под данное разрешение картинки. Это значит, что определение разрешения должно быть переложено с php на js. Таки образом js должен не просто вычислить максимальное значение из ширины/высоты устройства, а также определить требуемое разрешение, и именно его уже записать в куку.

Также, чтобы apache мог проверить наличие картинки, он должен знать правило, по которому сохраняются пережатые изображения (в частности, название папки кеша), которое вообще говоря определено в php-скрипте.

Тут мы, очевидно, теряем немного гибкости и получаем некое дублирование информации.

  • Массив разрешений должен быть продублирован в js-скрипт.

  • Папка кеша и правило сохранения картинок должно быть продублировано в .htaccess.

Что получается

Модификация js-скрипта: adaptive.js

Здесь js, как и раньше, берет максимальное значение из высоты и ширины устройства. Определяет, есть ли модификатор плотности пикселей (ретина/не ретина), и на основе этих данных записывает в куки resolution.

Инструкции по рерайту: .htaccess

Рерайт стал чуть сложнее, но теперь проверяет наличие пережатой картинки до того, как обратиться к бекенду.

RewriteCond %{REQUEST_URI} ^/upload/iblock/.+\.(?:jpe?g|gif|png)$

Правило работает только на картинки из директории /upload/iblock/.

RewriteCond %{REQUEST_FILENAME} -f

Причем, только на реально существующие картинки, в отличие от оригинала.

RewriteCond %{HTTP:Cookie} (^|;\ *)resolution=([1-9][0-9]+)

Правило сработает только при наличии цифровой куки resolution. Если ее нет, веб-сервер отдаст оригинал изображения.

RewriteRule .* /images_adaptive/%2%{REQUEST_URI} [L]

Осуществляем переход в папку с кешированными изображениями, полагая, что эта папка называется images_adaptive. Дальше следуют разрешение и запрашиваемый путь оригинала. То есть, если пришел запрос на /images/photo.jpg, а разрешение пользователя подсчитано как 1024, то адаптивная картинка будет расположена по пути /images_adaptive/1024/images/photo.jpg.

RewriteCond %{REQUEST_URI} ^/images_adaptive/.+\.(?:jpe?g|gif|png)$

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

RewriteCond %{REQUEST_FILENAME} !-f

Если такого файла все еще нет, то есть картинка еще не была пережата в нужный размер (и тут мы убиваем ненужные запросы в php при повторных обращениях к картинке).

RewriteRule .* ai.php [L]

Направляем запрос в наш php-скрипт, который найдет, пережмет при необходимости, и отдаст нужную картинку.

Скрипт-обработчик запросов: ai.php

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

Минусы нашего форка

  • Избыточность хранимых данных. Если у нас есть одна картинка и 5 желаемых размеров, в которые ее нужно пережать, то сервер будет хранить в самом плохом случае все 6 изображений (оригинал и 5 копий). При этом, даже если картинку пережимать не нужно (скажем, она 300×100, а минимальное разрешение 480), то картинка все равно будет «пережата», то есть скопирована, 5 раз. Под каждое разрешение, чтобы избежать отдачи статики через php.

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

  • Дублирование информации в php, js и .htaccess

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

Как сделать изображение адаптивным

От автора: эта статья посвящена наиболее распространенному варианту использования адаптивного изображения: переключению разрешения.

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

Логика быстрого отображения изображения довольно сложна. Она включает в себя определение размера изображения, а также понимание того, использует ли пользователь дисплей с высоким разрешением. К счастью, браузер оснащен лучше, чем мы, чтобы справиться с этой логикой. Все, что нам нужно сделать, это предоставить ему несколько подсказок. Мы будем использовать атрибут srcset, чтобы предоставить список ресурсов изображения на выбор, и атрибут sizes, чтобы сообщить браузеру, насколько большое изображение будет отображаться в различных контрольных точках.

О, и не беспокойтесь о поддержке браузерами! Мало того, что эти атрибуты имеют отличную поддержку по всем направлениям, мы также будем предоставлять запасной вариант для старых браузеров, таких как IE11.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Атрибут srcset

Атрибут srcset предоставляет браузеру множество источников на выбор, а также размер каждого из этих источников.

Это разделенный запятыми список URL-адресов с шириной для каждого. Каждый элемент в списке выглядит так: «image.jpg 1000w,», что сообщает браузеру, что файл image.jpg имеет ширину 1000 пикселей.

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

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

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

Также ему будет известно, что если изображение будет отображаться с шириной 320 пикселей на retina-экране, ему следует выбрать ресурс шириной не менее 640 пикселей. Так что вам не придется беспокоиться о 1x и 2x ресурсах. Все, что вам нужно сделать, это предоставить хороший набор изображений, а браузер сделает все остальное.

Не уверены, какой размер изображения предоставить? Читайте дальше!

Атрибут sizes

Атрибут srcset работает отлично, но когда браузер читает HTML, он не знает, использовали ли вы CSS , чтобы масштабировать изображение, например, на 50% от ширины экрана.

Вот когда в игру вступает атрибут sizes. С его помощью мы даем браузеру подсказку о том, как будет отображаться изображение после применения CSS.

Атрибут sizes представляет собой список разделенных запятыми медиа условий с шириной для каждого. Каждый элемент в списке выглядит следующим образом: «(min-width: 1023px) 780px,», это говорит браузеру, что, когда область просмотра имеет ширину 1023 пикселя (или шире), изображение будет иметь ширину ровно 780 пикселей.

Вы также можете использовать относительную ширину, например, 50vw, при которой изображение будет составлять 50 процентов от ширины области просмотра. Вы даже можете использовать calc для более сложных ситуаций. Например, calc(50vw — 2rem) говорит, что изображение будет составлять 50 процентов от ширины области просмотра, минус 2rem, возможно, чтобы учесть некоторые отступы или границы.

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

Браузер будет проходить вниз по этому списку и применять первый элемент, который соответствует области просмотра. Так, если задан атрибут sizes:

(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw

(min-width: 1023px) 780px,

(min-width: 675px) 620px,

100vw

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

Стандартный iPad в вертикальной ориентации имеет ширину 768 пикселей, поэтому браузер пропускает первый элемент, но выбирает второй, что говорит о том, что изображение будет иметь ширину 620 пикселей.

Пользователь на обычном мобильном устройстве не будет соответствовать ни одному из первых двух условий, что говорит о том, что изображение будет иметь 100% ширины области просмотра.

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

Не уверены, какие значения объявлять? Читайте дальше!

Атрибут src

Возможно, вы заметили, что все приведенные мною примеры все равно содержат атрибут src, и задаетесь вопросом, нужен ли он по-прежнему. Ответ таков: если вы укажете атрибут srcset, современные браузеры заменят значение src в DOM изображением, выбранным из srcset. Поэтому современные браузеры игнорируют значение, указанное в атрибуте src в пользу srcset.

Но src все еще важен для браузеров, которые не поддерживают адаптивные изображения. Эти старые браузеры будут игнорировать атрибуты srcset и sizes, потому что они не могут их понять. Однако они понимают атрибут src, поэтому вы можете предоставить для них одно изображение в качестве запасного варианта. Я обычно выбираю самое маленькое изображение, которое все равно будет хорошо смотреться на настольном не-retina мониторе.

Вопросы и ответы

Как я должен генерировать ресурсы изображения?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это может занять немного времени, поэтому вы можете использовать инструмент для генерации изображений. Несколько инструментов позволяют это сделать, но мне больше всего нравится Responsive Image Breakpoints Generator от Cloudinary. Вы загружаете изображение, и он автоматически генерирует различные размеры. Вы можете настроить параметры, чтобы контролировать, сколько изображений он генерирует. Затем вы можете скачать изображения для использования.

Другой вариант — разместить изображения в CDN, например, в Cloudinary или imgix. При использовании подобного сервиса вы загружаете в CDN изображение с самым высоким разрешением, а затем можете запросить версии изображения с измененным размером, используя параметры URL. Вам не нужно выполнять какую-либо работу, вы просто сообщаете CDN, в каком размере хотите отображать изображение.

Какие размеры изображения я должен предоставить?

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

Если вы имеете дело с одним изображением и можете предоставить пользовательскую разметку для этого изображения, вы можете использовать Responsive Image Breakpoints Generator от Cloudinary. Он автоматически проверит изображение и определит, какой оптимальный набор ресурсов необходим для обеспечения наилучшего баланса между размером файла и разрешением. После этого он не только генерирует файлы, но он также указывает атрибуты srcset и sizes.

Если вы работаете в CMS или веб-приложении, когда вы не знаете, какое точно изображение будет отображаться в слоте, я рекомендую выбрать стандартный массив размеров изображения. В прошлом, я использовал 320w, 640w, 960w, 1280w, 1920w, и 2560w, потому что это круглые числа, которые следуют в логической последовательности (кратные 320). Этот набор охватывает размеры от мобильного до настольного.

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

Если вы размещаете изображения в Cloudinary, вы можете воспользоваться другим подходом, который заключается в использовании API Cloudinary для запуска Генератора адаптивных точек при их загрузке! Тогда вы можете принять ответ от API для динамического заполнения атрибутов srcset и sizes.

Какие значения sizes я должен объявить?

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

img {
width 320px;
}

@media screen and (min-width: 37.5em) {
width: 640px;
}

img {

  width 320px;

}

 

@media screen and (min-width: 37.5em) {

  width: 640px;

}

В этом случае изображение имеет два фиксированных размера, которые могут быть отражены непосредственно в атрибуте sizes:

<img
alt=»Ferrari»
src=»ferrari.jpg»
srcset=»ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w»
>

<img

  alt=»Ferrari»

  src=»ferrari.jpg»

  srcset=»ferrari-s.jpg 320w,

          ferrari-m.jpg 960w,

          ferrari-l.jpg 1920w»

  sizes=»(min-width: 37.5em) 640px, 320px»>

Тем не менее, вы часто можете столкнуться с ситуацией, когда изображение является гибким и наследует ширину от контейнера:

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

.container {
padding: 1rem;
width: 100%;
}

@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}

img {

  height: auto;

  width: 100%;

}

 

.container {

  padding: 1rem;

  width: 100%;

}

 

@media screen and (min-width: 37.5em) {

  .container {

    width: 50%;

  }

}

В этом примере (при условии, что .container — это единственный элемент, который влияет на ширину изображения), вы можете применить к изображению ширину контейнера. Обратите внимание, что мы также вычитаем из ширины контейнера ширину отступа. Вам может это потребоваться, или нет, в зависимости от того, насколько отступ влияет на общую ширину.

<img
alt=»Ferrari»
src=»ferrari.jpg»
srcset=»ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w»
>

<img

  alt=»Ferrari»

  src=»ferrari.jpg»

  srcset=»ferrari-s.jpg 320w,

          ferrari-m.jpg 960w,

          ferrari-l.jpg 1920w»

  sizes=»(min-width: 37.5em) calc(50vw — 2rem),

         calc(100vw — 2rem)»>

Как вы можете видеть, это будет сильно зависеть от конкретного макета. Я обычно работаю наоборот, проверяя изображение в devtools браузера, чтобы определить, какие контрольные точки влияют на ширину изображения.

Как я могу проверить, что я все сделал правильно?

Как вы можете себе представить, проверка правильности написания кода для адаптивных изображений может быть сложной и трудоемкой. К счастью, есть инструмент, облегчающий эту задачу, который называется Responsive Image Linter.

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

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

Заключение

Как вы можете видеть, комбинация атрибутов srcset и sizes дает вам много преимуществ. Добавляя два атрибута, вы говорите браузеру: «При таком размере экрана это изображение будет настолько широким, поэтому, пожалуйста, выбери лучший вариант из этого списка изображений».

Автор: Scott Vandehey

Источник: https://cloudfour.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Как сделать адаптивное изображение на сайт с помощью HTML5 и CSS3

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

Как это реализовать правильно на HTML5?

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

Для начала, давайте поочередно рассмотрим и сравним возможные варианты решения данной проблемы.

 

Как делали раньше

Данный способ создания адаптивного изображения является действенным и качественным, в котором даже нет необходимости использования медиа-запросов. Код имеет всего 2 строчки, которые выполняют свои функции на ура:

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



img {

    max-width: 100%;

    height: auto;

}

Строка 2 — задаётся правило, согласно которому максимальная ширина изображения будет равна ширине экрана устройства. Таким образом, ширина картинки будет меняться, в зависимости от размера экрана.

Строка 3 — согласно данному правилу, при изменение max-width, высота картинки будет меняться пропорционально её ширине. Собственно, чтобы картинка имела заданные изначально пропорции.

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

 

Как делают сейчас с помощью HTML5

Современное решение для создания адаптивного изображения имеет несколько существенных преимуществ, которые заслуживают внимания:

  • адаптивность изображения;
  • автоматический подбор оптимальной картинки;
  • возможность обрезки изображения;
  • не требуются css-правила;
  • валидный код.

Все эти преимущества содержит в себе HTML5-тег — <picture>. Его синтаксис может показаться необычным, но как только вы к нему привыкнете — поймете, что это действительно круто:

<picture>
<source srcset=»mobile.jpg» media=»(max-width: 320px)» alt=»Урезанная картинка»>
<source srcset=»standart.jpg»>
<img srcset=»standart.jpg» alt=»Исходная картинка»>
</picture>



<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=»mobile_landscape.jpg» media=»(max-width: 30em) and (orientation: landscape)»>
<source srcset=»mobile_portrait.jpg» media=»(max-width: 30em) and (orientation: portrait)»>
<source srcset=»standart_landscape.jpg» media=»(min-width: 30em) and (orientation: landscape)»>
<source srcset=»standart_portrait.jpg» media=»(min-width: 30em) and (orientation: portrait)»>
<img srcset=»standart_landscape.jpg» alt=»Исходная картинка»>
</picture>



<picture>

    <source srcset=»mobile_landscape.jpg» media=»(max-width: 30em) and (orientation: landscape)»>

    <source srcset=»mobile_portrait.jpg» media=»(max-width: 30em) and (orientation: portrait)»>

    <source srcset=»standart_landscape.jpg» media=»(min-width: 30em) and (orientation: landscape)»>

    <source srcset=»standart_portrait.jpg» media=»(min-width: 30em) and (orientation: portrait)»>

    <img srcset=»standart_landscape.jpg» alt=»Исходная картинка»>

</picture>

 

Вывод

С помощью этих 2 способов можно сделать адаптивное изображение на всех видах устройств, но как мы уже выяснили тег <picture> имеет больше возможностей и преимуществ, чем его аналог. Я советую пользоваться именно вторым вариантом, так как его синтаксис выглядит очень приятно и не требует внесения изменений в CSS.

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

 

 

Вконтакте

Facebook

Twitter

Google+

E-mail

Это интересно

Подписаться на новости

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

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

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

Итак, как решить эту проблему средствами каскадных таблиц стилей – CSS.

Вариант 1. Работает только на отдельных изображениях.

В CSS файле создать класс img-adaptive со следующими параметрами:

.css-adaptive {
display: block;
max-width: 100%;
height: auto;
}

Далее, при вставке изображения нужно подставить это класс:

<img src=”images/1.jpg” class=”css-adaptive”>

При этом изображение пудет подстраиваться под ширину блока в которое оно помещается. Но этот способ работает только на те изображения, в которые подставляется класс css-adaptive.

Вариант 2. Работает на все изображения в определенном блоке.

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

Итак, нужно поместить все новости в контейнер div например с классом news.

<div class=”news”>
<h2>Адаптивность изображений в CSS</h2>
<img src=”imahes/1.jpg”>
<img src=”imahes/2.jpg”>
<img src=”imahes/3.jpg”>
</div>

А в файл с CSS следующее:

.news img {
display: block;
max-width: 100%;
height: auto;
}

Таким образом все изображения в новости станут адаптивными независимо от их количества и размера.

Поделиться в соц. сетях:

Adaptive Images для WordPress — плагин WordPress

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

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

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

Основные цели
  1. Значительно сократить общее время загрузки веб-страницы на мобильные устройства.
  2. Работайте прозрачно и ненавязчиво, не зависимо от макета и стиля вашей темы.
  3. Не обращайте внимания на еще не стандартизированный элемент изображения или HTML атрибут img srcset .
Боковые преимущества
  1. Уважает поисковые системы и отправляет им оригинальную версию каждого изображения.
  2. Если он не распознает размер устройства, он возвращается к исходному размеру изображения.
  3. Он легкий, потому что ему не нужно загружать всю среду WordPress каждый раз, когда он отправляет запрос изображения.
Поддерживаемые форматы
  • JPEG
  • PNG
  • GIF (не анимированный)
НЕ поддерживаемые форматы
CDN / Varnish / услуги внешнего кеширования

Начиная с версии 0.6.0, поддержка службы CDN / Varnish / внешнего кэширования была добавлена ​​как опция в экспериментальном режиме . Это означает: i) он еще не тщательно протестирован; ii) однако он работает почти во всех тестовых примерах; iii) он не представляет опасности для вашей установки; iv) он добавляет специальный параметр url к вашим URL-адресам изображений, поэтому он немного навязчивый.

  • Протестировано с MaxCDN и Varnish.
  • Не может обрабатывать фоновые изображения CSS (пока).

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

Точки останова по умолчанию
  • Широкие экраны 1024 пикселей
  • 640 пикселей широкие экраны
  • 480 пикселей широкие экраны

Начиная с версии 0.5.0 и выше можно настроить, должен ли плагин учитывать альбомную или портретную ориентацию каждого устройства. Также поддерживаются экраны HiDPI (высокая плотность пикселей устройства или сетчатка).

Как проверить

Самый простой способ протестировать — использовать режим эмуляции устройства в вашем браузере (режим адаптивного дизайна) в разделе «Инструменты разработчика». Вы можете посмотреть это видео https://www.youtube.com/watch?v=hCAC1XUUOvw/ в качестве примера.

  1. Протестируйте с помощью такого инструмента, как Webpagetest http: // www.webpagetest.org/. Убедитесь, что вы установили параметр «Эмулировать мобильный браузер» на вкладке «Дополнительные настройки»> «Chrome».
  2. Протестируйте на реальном мобильном устройстве, смартфоне или планшете. Наблюдайте за загрузкой вашего сайта в мгновение ока.
  3. Проверьте каталог / wp-contents / cache , чтобы увидеть каталог / adaptive-images и его содержимое. Здесь изображения с измененным размером хранятся и кэшируются по умолчанию.
  4. Просмотрите изображение прямо из браузера и добавьте «? Debug = true» в конце URL-адреса, например, «http: // www.website.com/wp-content/uploads/2015/01/image.jpg?debug=true «. Это подтверждает, что плагин работает, и должен печатать полезную отладочную информацию. Если вы продолжаете видеть свое изображение, значит, плагин не работает как и ожидалось, и причина, вероятно, в том, что не удалось правильно обновить файл .htaccess.
  5. Добавьте «? Debug = original» в конец URL-адреса изображения, и вы увидите исходную версию изображения, даже если должна была быть показана его уменьшенная версия.
Несовместимость и проблемы

  • Плагин поддерживает Nginx, но файл конфигурации сервера необходимо настроить вручную следующим образом:

    расположение / {
    rewrite \.(?: jpe? g | gif | png) $ /wp-content/plugins/adaptive-images/adaptive-images-script.php;
    }

  • Windows IIS не поддерживается, но может быть настроен вручную. Приглашаются любые эксперты IIS.

  • Не может работать даже в экспериментальном режиме с сетями CDN, которые используют другой субдомен для изображений.
  • При использовании HTTPS / SSL убедитесь, что вы обновили все URL-адреса своего веб-сайта, а также URL-адреса на странице общих настроек WordPress
    , иначе плагин не сможет найти ваши изображения.
  • WordPress Multisite (Mu) не поддерживается (некоторые планы относительно будущей поддержки обсуждаются).
Важная информация
  • Плагину необходимо добавить немного кода в файл .htaccess для правильной работы. Он удаляет этот код после отключения. Если тебе это не нравится, то… не повезло!
  • Плагину не важно, действительно ли устройство мобильное. Проверяет разрешение экрана устройства. Если вы установили достаточно большие точки останова, это должно работать так же хорошо и для настольных устройств.Однако он нацелен в основном на мобильные.
  • Версии изображений с измененным размером хранятся в специальном каталоге в каталоге / wp-content / cache . Это вызывает некоторые накладные расходы на хранилище. Вам решать, являются ли эти накладные расходы приемлемым вариантом для вашей среды хостинга. Обычно это даже отдаленно не сравнивается с размером ваших исходных каталогов изображений.
  • Плагин не помогает (и не мешает) художественному оформлению. Просто как тот. Художественное направление https: // usecases.responseiveimages.org/#art-direction в адаптивных изображениях — это совсем другая, но важная проблема. Этот плагин с этим не справляется. Но он работает дополнительным образом, не мешая другим решениям, которые работают. Это значит, что вы можете комбинировать его с любым решением художественного направления.
Кредиты
  • Плагин изначально был основан на плагине WP-Resolutions https://github.com/JorgenHookham/WP-Resolutions/, но начиная с версии 0.3.0 он полностью переписан!
  • Оба плагина, WP-Resolutions и этот, позаимствовали идеи из Adaptive Images http: // adaptive-images.com / solution, специально адаптированный для WordPress.
  • Особая благодарность моему хорошему другу и коллеге Антонису Захопулосу за бесчисленное количество отзывов, идей и подсказок по отладке.
  • Большое спасибо @railgunner за первоначальную идею о функции CDN / Varnish / external caching service на форуме поддержки плагинов. Это показало, что это действительно возможно!
  • Спасибо, AJ с WpFASTER.org за желание протестировать вышеуказанную функцию в реальной среде.
  • Спасибо ребятам из команды Pressidium за помощь в отладке функции CDN / Varnish / внешнего кэширования и предоставление тестовых сред.
  • Спасибо, Энди Грей, за помощь в отладке странных проблем с путями файловой системы в управляемых средах хостинга.
  • Спасибо @ milenoi2016 за помощь в разборе одного из многих случаев установки каталогов WordPress.
  • Спасибо @minorgod за исправление пути в Windows.
  • Спасибо, Марк Грюффер, за подсказку о раскрытии переменных глобального запроса.
  • Спасибо @timholz за подсказку о файлах cookie SameSite.
  • И, конечно же, миллион благодарностей всем, кто предоставил полезные отзывы в ранних версиях плагина, где неизбежных сбоев из-за изменений серверной среды было немало.

Сообщите, пожалуйста, как плагин работает (или не работает) у вас. Мы любим комментарии и творческие отзывы!

  • Страница настроек плагина в админке.
  • Версии изображений с измененным размером по умолчанию кэшируются в / wp-content / cache / adaptive-images .
  • Общее время загрузки веб-страницы на мобильном устройстве значительно сокращается (проверено на http://webpagetest.org/).
  • Каждое устройство обслуживает изображение, размер которого изменен до его реальных размеров, поэтому общий размер намного меньше.
Обычный процесс
  1. Установите плагин через «Плагины> Добавить новый».
  2. Активируйте плагин.
  3. Зайдите в его настройки и сохраните их!

Отключите плагин, чтобы отключить его. Активируйте плагин, чтобы включить его.Удалите его, и он очистится после себя, а затем исчезнет. Так просто.

Опора

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

Мы настроены на то, чтобы плагин Adaptive Images работал в таком количестве сред и комбинаций настроек, которое потребуется, и мы будем рады получить ваши отзывы и помощь по этому поводу.

Что за история?

Сначала появилось решение для адаптивных изображений http://adaptive-images.com/, которое все еще существует и работает само по себе. Затем появился плагин WP-Resolutions https://github.com/JorgenHookham/WP-Resolutions. Но его больше нет в репозитории плагинов WordPress, а версия Github несовместима с последними версиями WordPress. Поэтому мы обновляем и поддерживаем его. Произошло множество внутренних изменений, но общая функциональность осталась прежней.

Начиная с версии 0.5.0 плагин был полностью переписан, чтобы не полагаться на решение Adaptive Images, выпущенное по лицензии CC-BY, несовместимой с GPL. Теперь эта проблема решена, и часть, которая раньше полагалась на адаптивные изображения, является совершенно новой!

Этот плагин тяжелый?

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

Таким образом, на самом деле нужно выбрать баланс между созданием и хранением изображений слишком большого размера, в отличие от нагрузки на ресурсы сервера.

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

Думаю, это сработало для одного из моих изображений? и сгенерировал только 1024. не генерировал больше размеров, даже когда я обращался к нему с телефона 200×200.

так:

не изменял размер моих изображений, особенно избранных изображений
нет srcset
не использует нестандартные размеры
плохо для seo, потому что он будет индексировать каждое из «кешированных» изображений, поскольку он заменяет ссылку в исходном коде. srcset всегда указывает поисковым системам на исходное изображение.

простите, но это ужасно

Этот плагин работает точно так же, как рекламируется, и позволяет использовать даже не отвечающие блоки Гутенберга.Лучший из двух миров !

После множества проблем с WP Retina 2x я искал альтернативное решение, работающее с моей многоцелевой темой.
Этот плагин настолько прост и делает то, что должен. У него нет конфликтов с другими плагинами (кеширование и т. Д.), И, прежде всего, за этим плагином стоит дружелюбный и приятный разработчик, который не жалеет усилий, чтобы помочь вам. Итак, возникла / есть проблема с WordPress в подкаталоге, но доступном из корневого каталога.Но теперь с небольшой помощью все в порядке. Спасибо!

Здравствуйте!
Почему вы не упомянули, что плагин не работает с мультисайтовой установкой на главной странице плагина? Он сломал всю мою сеть примерно из 20 сайтов, кроме одного, на котором был активирован плагин, поэтому я не заметил этого всю ночь …
Пожалуйста, отметьте это в описании плагина.

Похоже, что плагин получает неверный путь для файла adaptive-images-script.php:
https://192.168.10.55/wordpress/C:xampphtdocswordpresswp-contentpluginsadaptive-images/adaptive-images-script.php

Посмотреть все 53 отзыва

«Адаптивные изображения для WordPress» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

0,6,68
  • Добавлен SameSite в файл cookie разрешения.
0,6,67
  • Исправление безопасности, из-за которого глобальная переменная сервера запросов могла быть доступна пользователям.
0,6,66
  • Исправлена ​​небольшая ошибка, из-за которой наблюдаемые каталоги нужно было тримидировать.
  • Обновлена ​​совместимость WordPress до версии 5.2.
0,6,65
  • Исправлена ​​небольшая проблема с регулярным выражением, которая появилась в PHP 7.3 и приводила к сохранению каталога кэша и наблюдаемых каталогов как пустых строк.
0,6,64
  • Исправление пути в Windows (спасибо @minorgod).
0,6,63
  • Исправлена ​​ошибка, когда HTTPS сообщалось как «Вкл», а не «Вкл» в PHP.Теперь при сравнении регистр не учитывается.
  • Исправлена ​​ошибка, полностью игнорирующая протокол запроса (HTTP или HTTPS) при разрешении путей к изображениям из URL-адресов запросов.
0,6,62
  • Исправлена ​​ошибка обработки плотности пикселей десятичного устройства.
  • Исправлена ​​ошибка при переименовании каталогов wp-content и / или uploads.
  • Исправлена ​​ошибка, когда установка WordPress находится в подкаталоге, но URL-адрес веб-сайта остается в корневом каталоге.
  • Исправления в пользовательском интерфейсе страницы настроек.
0,6,61
  • Добавлено примечание о ручной настройке NginX.
  • Мелкие исправления ошибок.
0,6,60
  • Удалено сжатие PNG8 для PNG, поскольку оно не давало результатов приемлемого качества. PNG теперь просто изменяют размер и сжимают с помощью обычного 32-битного сжатия PNG. В будущих версиях будет возможность включать и отключать сжатие PNG8 по желанию и, возможно, плагин может определять, в каких изображениях он должен применять сжатие PNG8, а в каких других — применять 32-битное сжатие PNG.
0,6,51
  • Просто обновление версии плагина, потому что 0.6.41 предшествовала 0.6.5, из-за лексикографической сортировки и не была доступна в качестве обновления в репозитории!
0,6,5
  • Предупреждение PHP в скрипте адаптивных изображений удалено.
0,6,42
  • Незначительное исправление ошибки при сохранении настроек плагина.
0,6.41
  • Исправление ошибки версии 0.6.4 вызывало новую ошибку в разрешении пути к изображениям, когда WordPress установлен в подкаталог корневого каталога сервера.
0,6,4
  • Исправлена ​​ошибка разрешения каталога wp-content в автономных сценариях обработки изображений Adaptive Images, когда иногда PHP не сообщал, что корень серверного документа совпадает с путем установки WordPress.
0,6,3
  • Исправлена ​​ошибка в генерации правил перезаписи htaccess, когда установка не в корневой каталог.
  • Исправлена ​​ошибка в скрипте доставки изображений, из-за которой кеш браузера в некоторых случаях устанавливался некорректно.
0,6,2
  • Исправлена ​​ошибка, из-за которой корневой каталог установки WordPress в некоторых случаях вычислялся неправильно.
0,6,1

Улучшена совместимость

CDN / Varnish. Ранее некоторые изображения загружались как в исходной версии, так и в версии с измененным размером. Теперь они загружаются только один раз. Однако, если веб-сайт работает слишком быстро, могут быть 1-2 изображения, которые удастся загрузить в исходном размере. Мы полагаем, что это нормально.

0.6.0
  • Добавлена ​​поддержка службы CDN / Varnish / внешнего кеширования.
  • Добавлен диалог подтверждения Thickbox на кнопку очистки кеша на странице настроек плагина.
  • Добавлена ​​кнопка пожертвования на странице настроек плагина.
  • Документация.
0,5.2
  • Исправлена ​​ошибка, из-за которой путь к сценарию изменения размера изображения неправильно создавался в файле .htaccess (снова).
0,5.1
  • Исправлена ​​ошибка, из-за которой путь к сценарию изменения размера изображения неправильно создавался в .htaccess файл.
  • Некоторая документация.
0,5,0
  • Новая опция в настройках, определяющая, должен ли плагин использовать больший размер устройства как его с или принимать во внимание текущую ориентацию. До сих пор плагин использовал ширину альбомной ориентации, которая является наибольшей из размеров каждого устройства.
  • Новая опция в настройках, определяющая, должен ли плагин использовать особую заботу о HiDPI (сетчатка, экраны с высокой плотностью пикселей и предоставлять этим устройствам изображения лучшего качества в соответствии с их плотностью пикселей.
  • Лучшее сжатие PNG с помощью PNG8. Это преобразует изображения PNG с истинным цветом в изображение палитры, что уменьшает цвета и качество альфа-канала http://stackoverflow.com/questions/5752514/how-to-convert-png-to-8-bit-png-using-php- gd-библиотека /.
  • Исправлены некоторые крайние случаи невозможности обслуживания изображения с измененным размером путем возврата к исходному изображению.
  • Дополнительная аналитическая страница настроек отладки и диагностики.
  • Добавлены методы отладки в скрипт генерации кэша изображений.

    • Плагин

  • можно настроить так, чтобы он соответствовал заголовкам с истекающим сроком действия по умолчанию.
  • Немного документации (как всегда).
  • Полностью переписать скрипт, который генерирует и кэширует версии изображений с измененным размером, чтобы избежать несовместимости лицензирования GPL и CC-BY-3.0 исходного скрипта Adaptive Images (http://adaptive-images.com/). Плагин теперь полностью независим и свободен от каких-либо проблем с лицензированием.
  • В связи с вышеизложенным скрипт изменения размера изображения уже не тот, он был преобразован в новый скрипт с именем adaptive-images-script.php , который находится в корневой папке плагина. Однако старый скрипт по-прежнему остается в папках плагинов в целях совместимости (старые версии и пользователи, не сохранившие свои настройки заново).
0,3,52
0,3,51
  • Незначительная ошибка в параметрах url страницы настроек.
  • Документация.
0,3,5
  • Разрешить настройки кэша браузера по умолчанию.
  • Более подробная информация по отладке.
  • Добавлена ​​отладка диагностики на странице настроек.
  • Более приятные сообщения пользователя в админке с иконками.
  • Мелкие исправления здесь (и там).
  • Усовершенствования документации.
0,3,04
  • Улучшения документации (да).
  • Добавлен тег noptimize в HEAD Javascript, чтобы исключить его из оптимизаторов.
0,3,03
  • Добавлен HTTP-заголовок «Последнее изменение» для изображений с измененным размером, как рекомендуют лучшие практики.
0,3,02
  • Если размер / разрешение устройства не обнаружены, покажите исходное изображение.Помогает избежать недоразумений и отправляет поисковым системам реальные изображения вместо изображений с измененным размером.
0,3.01
  • Усовершенствования документации.
0,3,0
  • Практически полное переписывание кода.
  • Полностью обновлена ​​страница настроек для удобства пользователя.
  • В настройках добавлено действие по очистке кеша.
  • Добавлено действие на странице настроек для отладочной информации.
  • Добавлено действие на странице настроек для расчета размера кеша.
  • Заново добавлено поле просматриваемых каталогов на странице настроек.
  • Разделил файлы плагина на логические части.
  • Разрешения по умолчанию изменены на 1024, 640 и 480, потому что файл cookie устанавливается на основе максимального значения между шириной и высотой экрана, а высота большинства экранов составляет от 480 до 640 пикселей. Планшеты имеют ширину / высоту от 640 до 1024 пикселей. IPad имеет высоту 1024 пикселей. Экран с шириной более 1024 пикселей, вероятно, не является мобильным экраном.
  • Изменен каталог кэша изображений по умолчанию, чтобы поместить его в ожидаемый каталог WordPress / wp-content / cache , поэтому теперь по умолчанию это / wp-content / cache / adaptive-images .
  • Добавлена ​​проверка опций плагина.
  • Добавлена ​​проверка библиотеки PHP GD.
  • Добавлена ​​проверка файла .htaccess.
  • Добавлены функции обновления старых версий.
  • Добавлены функции обновления версии 0.2.08 до 0.3.0.
  • Добавлен скрипт деинсталляции uninstall.php .
  • Улучшения документации (как обычно).
0,2.08
  • Добавлен расчет размера кеша.
  • Добавлены методы очистки кеша.
  • Добавлены одноразовые номера в действия администратора.
  • Усовершенствования документации.
0,2.06
  • Настройки теперь разделены в файле ai-user-settings.php.
0,2,05
  • Если исходная запрошенная ширина изображения и размер экрана устройства превышают максимально доступную точку останова, то обслуживается исходное изображение.
0,2,04
0,2,03
  • Задайте точки останова для размера экрана по умолчанию 1024, 600, 320.
0,2,02
  • Рефакторинг кода для отделения файлов адаптивных изображений от других файлов подключаемых модулей.
0,2.01
  • Первая стабильная версия после первоначального форка.
  • Исправлены основные ошибки PHP.
  • Исправлены основные ошибки WordPress.
  • Теперь совместим с версией 4.1.1.
  • Новый корень документа учитывает установки в подкаталогах.
0,1
  • Версия, созданная из плагина WP Resolutions https: // github.com / JorgenHookham / WP-Resolutions.
  • Эта версия больше не работает с WordPress (по крайней мере версия 4.1.1 и выше).

.

Автоматическое уменьшение размера изображения без потери качества

  • Около
  • Блог
  • Контакт
  • Демо
  • Партнеры
  • Ресурсы
  • Вебинары
  • Карьера
  • Поддержка
  • Войти