Работая над дизайном или версткой сайта, созданием приложений, так или иначе, но высока вероятность того, что придется столкнуться с двумя врагами всего проекта: сроки (время сдачи) и изображения. И сколько материалов не было бы создано на тему того, как уменьшить изображение и сохранить его качество – проблема извечна. Иногда по каким-то причинам изображения перестают соответствовать макету, их приходится долго и скрупулезно ретушировать и корректировать, перекрашивать, менять в размерах и так далее. Но каждому из нас хочется сделать больше, чем возможно, а потому вопрос экономии времени встает очень болезненно и остро.
Тем не менее, даже в веб-верстке существуют лайфхаки, «фишки», небольшие секретки того, как обработать изображения быстро и сохранить при этом свое личное время. Возможно, кто-то из читателей о них знает уже, кто-то – нет, но лишними они не могут быть, да и в общей копилке полезных мелочей им всегда найдется место даже у профессионалов веб-разработки.
Способ 1
Как часто случалась ситуация: «о, боги, время горит, нужно быстрее, быстрее». Время уже подходит к завершению и сдачи макета, а изображения ни в какую не хотят соответствовать макету, хотя вроде все правильно прописано в коде.
Посмотрим на пример ниже.
Знакомо и все понятно. Но особенность в том, что свойство background очень полезно и оно просто работает. Подходит же оно в случае неконтентных изображений или если требуется заменить текст, если предполагается дать возможность печати страницы без данного изображения, для ускорения загрузки страницы и так далее. Подробнее о полезности свойства здесь. Тем более что практически все версии браузеров поддерживают данное свойство.
Способ 2
Но представьте, что такая магия существует и для элементов img? Давайте посмотрим на свойство object-fit, которое отлично работает как с изображениями, так и видеоконтентом. Да-да, и с ним тоже!
И фишка в том, что когда мы получаем cover с необходимым значением, мы можем использовать и свойство contain, назначая его cover. Вариант работы свойства представлен на CodePen.
Но здесь есть небольшой недостаток свойства, поскольку object-fit не поддерживается браузером IE 11 и некоторыми версиями Edge. Для этих целей есть полифилл, который также имеет поддержку и других браузеров.
Способ 3
Сразу оговоримся, этот способ работает во всех браузерах и его суть в том, что изображение должно быть помещено в родительский элемент. При этом свойство padding нужно выражать в процентах, а свойство position установить в значение relative. Результат: изображение будет растянуто по всей площади родительского элемента. То есть, создается, например, некий «квадрат» и изображение полностью в нем и размещается.
В действительности такой вариант широко используется в мире. И он действительно прост. Особенно, если предстоит работать с внедрением видеороликов с того же YouTube и иных ресурсов; в случаях, когда соотношение сторон не изменяется. На практике при обычном внедрении видео могут появляться черные полосы. Чтобы их избежать как раз и подходит данный способ.
Пример на CodePen наглядно демонстрирует работу кода, как и частичка кода netflix.
Способ 4
Этот способ наверняка знаком многим, но обойти его стороной было бы неверным решением для нас. Его используют обычно при самых-самых простеньких макетах сайтов. А пример реализации снова можно видеть на CodePen.
Способ 5
Все это хорошо: включение в макет сайта изображений, настройка их с помощью CSS. Но что если подумать вот о каком интересном моменте. Достаточно часто веб-разработчикам приходится работать с большими по размеру (ширина Х длина) картинами. Если их попросту на программном уровне сжимать до меньших размеров, то когда пользователь будет загружать страницу, доли секунд будут уходить на изменение размера загруженного изображения. Если таких кусочков кода много, то загрузка страницы может стать заметной и медленной.
Мы уже неоднократно упоминали момент, что долгая загрузка сайта или его отдельных страниц нежелательна, особенно на мобильных устройствах. Если на настольном компьютере еще можно загрузить любой сайт и любое по объёму изображение, то на смартфоне это может превратиться в мучение.
Но в современных браузерах, за исключением, опять-таки, IE 11 и Opera Mini, можно изменить оригинальное изображение при условии, что будет сразу четко определено значение ширины страницы. И делается это с помощью атрибута srcset.
Особенность данного метода также в том, что его можно комбинировать с тегом <picture> (HTML 5). В руководстве Mozilla есть хорошее описание данного метода. Как мы сказали, не все браузеры, особенно устаревшие версии, поддерживают srcset, поэтому его можно с легкостью заменить на img.
Пример использования всех тегов и атрибутов данного способа можно снова увидеть на CodePen.
Заметки на полях
Мы рассказали о пяти маленьких хитростях, которые используются разными веб-мастерами при верстке сайтов, для оптимизации изображений. Некоторые из вас задумаются: «Все они хороши, но мне-то сейчас вот что использовать?». И да, это резонный вопрос, потому как суть всех вариантов одна, а реализация зависит от… ваших целей и типа изображений. Поэтому немного систематизируем все то, что описали выше более кратко.
- Техника видеогиганта Netflix работает всегда, удобна при любых макетах и предполагает создание контейнера и использование свойства padding.
- При работе над уменьшением времени загрузки страницы, при работе над мобильными (в приоритете) дизайнами и сайтами подходит атрибут srcset, который позволяет быстрее загрузить уменьшенные изображения.
- Свойство object-fit использовать можно тогда, когда поддержка браузера IE 11 веб-верстальщику неважна как таковая. Будет работать сайт – хорошо, нет – ну и ладно. В противном случае, от этого способа придется отказаться.
- Свойство height: auto позволяет решить большинство разных проблем и иные способы могут просто не потребоваться. Универсальная палочка-выручалочка, с которой стоит начинать, иногда. Особенность только в том, что здесь нет определения четких размеров изображения, а значит, например, для интернет-магазина и карточек товара такой метод определенно не подходит.
- В случае, когда изображение используется только как оформление фона, но не является контентом само по себе, то вполне подходит background-image, название которого и говорит само за себя.
Завершение
Это совсем небольшие и весьма простенькие варианты того, как с помощью CSS можно создать отзывчивые, адаптивные, подстраивающиеся под макет сайта изображения. Их используют многие, как и придумывают новые модификации к ним. И наверняка кто-то из читателей тоже знает и иные способы работы с картинками.
Так или иначе, даже Google в своем блоге для разработчиков посвящали данной теме целый огромный материал. И все же не всегда, посещая тот или иной сайт и на РС, и на мобильном устройстве можно увидеть красивый макет с адаптивными картинками. Увы, но верстальщики, видимо, работают, что называется «на скорость» и за качеством особо не наблюдают.
Но поскольку конкуренция в сфере веб-верстки велика, среди сайтов в интернете тоже, приходится рано или поздно создавать «конфетку». А так как времени заказчики выделяют не особо много, то приведенные нами способы помогут значительно ускорить работу, как минимум, с изображениями. Вставляете ли вы видео, используете ли широкоформатные изображения, замещаете текст или готовите страницу к печати – можно все это решить разными способами при помощи CSS.
