Использование разных способов применения фильтров к изображениям
9 декабря 2016 | Опубликовано в css | 1 Комментарий »
Перед многими разработчиками встает задача создать портфолио с фотографиями или другими графическими элементами, использующими эффекты при наведении указателя мыши, например, появление цвета у нецветного изображения. В этом уроке мы не будем обсуждать создание галерей изображений, а обсудим эффективность создания измененных версий изображений.
Давайте рассмотрим самую распространенную ситуацию. Например, нам нужны два варианта одного изображения: цветной и черно-белый. Общепринятым решением будет создание двух отдельных файлов с помощью программы PhotoShop.
Но даже при пакетной обработке это все равно сложный и долгий процесс, к тому же код для замены одного изображения другим на веб-странице может быть довольно сложным. И, наконец, для каждого изображения, загружаемого на веб-страницу, нужен отдельный запрос HTTP, что увеличивает время загрузки сайта.
Современные веб-технологии дают возможность изменять изображения буквально на лету. Вместо того, чтобы создавать отдельные файлы с изображениями, оставим только одно исходное и будем преобразовывать его в нужный вид при запросе от веб-страницы.
Сверху вниз: Исходник, находящийся на сервере; Обработка; Результат после применения фильтра, показываемый на веб-странице
Такой же подход используется в разных способах создания масок CSS и SVG, о которых мы регулярно рассказываем. И возможность отобразить любую нужную версию изображения на веб-странице, без необходимости использовать программу PhotoShop, — просто следующий логический шаг.
Для достижения такого результата можно использовать несколько путей. Все они преследуют одни и те же цели: избавиться от избыточности, создать легко адаптирующийся код и содержимое, ускорить загрузку веб-страницы и освободить Вашего времени.
Обзор способов применения фильтров к изображениям на веб-странице
| Способ | Достоинства и недостатки |
| Элемент холста HTML5 с использованием JavaScript | Исполнение JavaScript на стороне пользователя может быть медленным или заблокированным |
| Собственные фильтры CSS | Быстро, но не поддерживается браузером Internet Explorer, хотя поддерживается браузером Microsoft Edge |
| Библиотека GD в PHP или другое серверное решение | Надежно, но каждое преобразование требует дополнительного запроса к серверу |
| Фильтры SVG, применяемые с помощью CSS | Может быть медленней, чем использование фильтров CSS, но поддерживается всеми браузерами и системами |
Нет правильных и неправильных решений, есть только наиболее подходящие в конкретной ситуации: зачастую лучшим решением будет использование сразу нескольких способов.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549