Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование разных способов применения фильтров к изображениям

9 декабря 2016 | Опубликовано в css | 1 Комментарий »

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

 

 


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

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

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

Сверху вниз: Исходник, находящийся на сервере; Обработка; Результат после применения фильтра, показываемый на веб-странице 

Такой же подход используется в разных способах создания масок CSS и SVG, о которых мы регулярно рассказываем. И возможность отобразить любую нужную версию изображения на веб-странице, без необходимости использовать программу PhotoShop, — просто следующий логический шаг.

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

Обзор способов применения фильтров к изображениям на веб-странице

Способ Достоинства и недостатки
Элемент холста HTML5 с использованием JavaScript Исполнение JavaScript на стороне пользователя может быть медленным или заблокированным
Собственные фильтры CSS Быстро, но не поддерживается браузером Internet Explorer, хотя поддерживается браузером Microsoft Edge
Библиотека GD в PHP или другое серверное решение Надежно, но каждое преобразование требует дополнительного запроса к серверу
Фильтры SVG, применяемые с помощью CSS Может быть медленней, чем использование фильтров CSS, но поддерживается всеми браузерами и системами

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

Оставить ответ


восемь − 7 =

Вставить изображение