Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 10
Статья хорошая и обстоятельная.
По существу вопроса: в голове одна мысль — «дело ясное, что дело темное».
В том смысле, что до появления нового поколения стандартов и браузеров все эти костылики кривоваты. И я скорее даже хочу, чтобы они не получили большого распространения.
По существу вопроса: в голове одна мысль — «дело ясное, что дело темное».
В том смысле, что до появления нового поколения стандартов и браузеров все эти костылики кривоваты. И я скорее даже хочу, чтобы они не получили большого распространения.
Responsive Images (первоначальная версия от Filament Group) также пользуется .htaccess. Так что если в качестве сервера у вас нечто вроде Nginx, то придётся либо отказаться от этого технического средства, либо портировать код .htaccess на подобный ему, но отличающийся синтаксис конфигурации Nginx
Очень долго портировал, аж секунд пять. В следующий раз просто откажусь.
location /assets/ { }
location /ai-cache/ { }
location ~* \.(?:jpe?g|gif|png)$ {
# php settings
}
Всё можно очень упростить, ведь совершенно не нужны десяток картинок под разные разрешения, а достаточно минимум два дополнительных.
Например, имеем обычную (среднюю) картинку в 500 точек для статьи, предположим под среднее разрешение экрана в 1024.
Остальные картинки уже подыскивает под нужное разрешение сам браузер, под которым будем смотреть статью. А как он это сделает? Очень просто — используя Media Queries в стилях.
То есть, для роботов и поисковых систем всегда будет выдаваться картинка одного размера — средняя.
Правило же именования файлов можно как-то стандартизировать. Например, так:
<img src=«pic.jpg» /> — это средняя картинка для поисковиков.
Дальше, используем css:
@media (min-width:320px) { img {max-width:320px;} } — то есть, показываем, что все картинки (ну или можно использовать какой-то класс для ограничения) имеют размер по горизонтали не больше 320 точек. При этом где браузер будет находить эти картинки? Например, можно договориться, что это будет такое наименование файлов: pic-width320.jpg, то есть, просто приставка к имени. Причём эти приставки можно использовать для автоматического резания картинок через nginx с раположением их в кеше.
Обычно нужно не более 3 вариантов размеров картинок — 150...320 для мобилок, 500...600 средняя для большинства компьютеров с экраном 1024 и поисковых роботов, и соотв. для больших экранов добавляем ещё один, например, 1024 точек.
@media (min-width:1024px) { img {max-width:1024px;} }
И всё. И никаких скриптов не нужно, не нужно никаких лишних атрибутов в html коде.
Оформление должно быть расположено там, где ему место — в CSS.
Например, имеем обычную (среднюю) картинку в 500 точек для статьи, предположим под среднее разрешение экрана в 1024.
Остальные картинки уже подыскивает под нужное разрешение сам браузер, под которым будем смотреть статью. А как он это сделает? Очень просто — используя Media Queries в стилях.
То есть, для роботов и поисковых систем всегда будет выдаваться картинка одного размера — средняя.
Правило же именования файлов можно как-то стандартизировать. Например, так:
<img src=«pic.jpg» /> — это средняя картинка для поисковиков.
Дальше, используем css:
@media (min-width:320px) { img {max-width:320px;} } — то есть, показываем, что все картинки (ну или можно использовать какой-то класс для ограничения) имеют размер по горизонтали не больше 320 точек. При этом где браузер будет находить эти картинки? Например, можно договориться, что это будет такое наименование файлов: pic-width320.jpg, то есть, просто приставка к имени. Причём эти приставки можно использовать для автоматического резания картинок через nginx с раположением их в кеше.
Обычно нужно не более 3 вариантов размеров картинок — 150...320 для мобилок, 500...600 средняя для большинства компьютеров с экраном 1024 и поисковых роботов, и соотв. для больших экранов добавляем ещё один, например, 1024 точек.
@media (min-width:1024px) { img {max-width:1024px;} }
И всё. И никаких скриптов не нужно, не нужно никаких лишних атрибутов в html коде.
Оформление должно быть расположено там, где ему место — в CSS.
@media (min-width:320px) { img {max-width:320px;} } — то есть, показываем, что все картинки (ну или можно использовать какой-то класс для ограничения) имеют размер по горизонтали не больше 320 точек. При этом где браузер будет находить эти картинки? Например, можно договориться, что это будет такое наименование файлов: pic-width320.jpg
Не совсем понял один момент. Если картинка будет вставлена как
<img src=«pic.jpg» /> то каким образом она станет <img src=«pic-width1024.jpg» /> для другого разрешения экрана? На лету, имеется ввиду. Т.е. просто после ресайза окна.Через @media
Понял. Через
Но ИЕ<9 не учитывается, так?
content: attr(data-attr1, url);?Но ИЕ<9 не учитывается, так?
Нет. Я же писал об этом:
> При этом где браузер будет находить эти картинки? Например, можно договориться…
Пример — например, разрешение экрана стало 1024 точек. Браузер ищет @media с подобным совпадением «min-width:1024px) { img {max-width:1024px» и имя у картинки делает по стандартной договорённости, путём добавления приставки к базе (основе).
> При этом где браузер будет находить эти картинки? Например, можно договориться…
Пример — например, разрешение экрана стало 1024 точек. Браузер ищет @media с подобным совпадением «min-width:1024px) { img {max-width:1024px» и имя у картинки делает по стандартной договорённости, путём добавления приставки к базе (основе).
а если картинки лежат в /images/folder/subfolder/img.jpg?
я правда, не понимаю механизма. Вот, пытаюсь разобраться.
Можно код хоть приблизительный? Как будет выглядеть @media, который добавляет к аттрибуту src картинки «приставки» да еще и между именем файла и .jpg?
я правда, не понимаю механизма. Вот, пытаюсь разобраться.
Можно код хоть приблизительный? Как будет выглядеть @media, который добавляет к аттрибуту src картинки «приставки» да еще и между именем файла и .jpg?
Путь неважен, главное — имя файла. У каждого файла может быть расширение, а может и не быть. Приставка добавляется не к расширению, а к имени файла (без расширения). Если уж такие сложности, то можно сделать префиксы, вида width1024-nameOfPic.extension
Это всё предположения, предложения. Техническая сторона в этом вопросе не играет большой роли. Главное — идея.
Это всё предположения, предложения. Техническая сторона в этом вопросе не играет большой роли. Главное — идея.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Какое средство для обеспечения отзывчивых картинок следует вам использовать?