Изображения являются (или, по крайней мере, должны быть) неотъемлемой частью любого веб-сайта. Они заставляют. Они соблазняют. Они общаются. Таким образом, они должны выглядеть как можно лучше и быть использованы по максимуму. Одним из способов обеспечения оптимального использования изображения является использование некоторых правильно выбранных плагинов. Плагины с эффектами изображения могут помочь сделать ваши фотографии сияющими с применением некоторых привлекательных фильтров или даже повысить интерактивность вашего сайта за счет масштабирования и увеличения.
Почему вы должны использовать изображения на вашем сайте
Картина рисует тысячу слов.
Хотя это может показаться банальным, чрезмерным высказыванием, оно действительно звучит правдоподобно, когда дело доходит до веб-дизайна. Ваш письменный контент, безусловно, важен, но изображения, которые вы выбираете, чтобы сопровождать ваш текст, имеют почти такую же важную функцию. Привлекательные изображения привлекают вашу аудиторию, привлекают внимание и уравновешивают ваш письменный контент, делая его бесконечно более читабельным. Изображения могут не только привлечь внимание, но и убедить обычного интернет-серфера остаться дольше заинтересованным. И чем дольше интернет-серфер остается на вашем сайте, тем больше вероятность, что он вернется или купит ваши продукты.
Статистика не лжет. Согласно HubSpot , более 90% данных, которые передаются в мозг, на самом деле являются визуальным контентом, и 40% людей лучше реагируют на визуальный контент по сравнению с письменным контентом. Это не должно вызывать удивления, учитывая, что мозг может обрабатывать визуальный контент примерно в 60 000 раз быстрее, чем письменный контент.
Когда дело доходит до сайтов электронной коммерции, важность изображений возрастает в десять раз; Лучший способ продать любой тип продукта — дать ему пространство и свободу продавать себя. Образ делает это. Таким образом, если вы используете WordPress в качестве платформы для электронной коммерции, то хорошо оформленное изображение, которое подчеркивает лучшие возможности ваших продуктов, демонстрирует их преимущества и демонстрирует, как оно может решить любую проблему, для которой оно было разработано в первую очередь, может бесконечно лучшие результаты, чем грамотно составленный абзац текста.
На самом деле, по словам Джеффа Булласа , когда дело доходит до сайта электронной коммерции, 67% покупателей признают, что качество имиджа продукта очень важно. Покупатели оценивают качество изображения товара как более важное, чем информация о товаре (63%), подробное описание (54%) или даже отзывы о товаре (53%).
Быстрое слово предупреждения на изображениях веб-сайта
Итак, на данный момент я уверен, что вы уверены в преимуществах, которые изображения могут принести на ваш сайт. Но, прежде чем мы углубимся в плагины эффектов изображения (безошибочный способ создания изображений, которые будут ослеплять и восхищать), быстрое слово предупреждения на изображениях веб-сайта.
Прежде всего, избегайте плохих стоковых фотографий, таких как чума. Если на какой-либо из фотографий вашего веб-сайта изображены улыбающиеся манекенские флаеры, прямо из корпоративной рекламы 1980-х, немедленно откажитесь от них.
Во-вторых, ваша программа клип-арта никогда не должна открываться ни при каких обстоятельствах (не говоря уже о том, чтобы ее содержимое использовалось для иллюстрации профессионального веб-сайта). В эти дни существует множество авторитетных онлайн-библиотек. Некоторые, как Death to Stock Images и Unsplash, даже предлагают целый ряд бесплатных изображений. Для получения дополнительной информации о стоковой фотографии сайтов, посмотрите на эту недавнюю статью SitePoint, Cage Match! Стоковая Фотография Места идут на равных .
Еще одна важная вещь, которую следует помнить, это то, что, хотя изображения имеют решающее значение для дизайна вашего сайта, вы должны использовать их только там, где это необходимо. Не вставляйте изображения в места, где они не принадлежат, и включайте так много изображений, что они отвлекают.
Наконец, имейте в виду, что большие изображения, которые не были сжаты, могут привести к дополнительному времени загрузки. Поэтому обязательно сжимайте носители, размещенные на вашем сайте. WordPress имеет встроенные возможности сжатия изображений, однако существует ряд доступных плагинов, которые могут дополнительно сжимать изображения, загруженные в вашу медиатеку, включая WP Smush.it , Kraken Image Optimizer и Bulk Resize Media .
Топ 8 плагинов с эффектами изображения
Существует множество плагинов с эффектами изображения. Каждый из этих плагинов имеет свои плюсы и минусы и предлагает пользователям различные приложения. Наиболее подходящий плагин для изображения будет зависеть от желаемого внешнего вида вашего веб-сайта и того, чего вы надеетесь достичь.
(Небольшая заметка: я рассмотрю следующие плагины с точки зрения графических эффектов, которые они могут генерировать, а не их возможностей в качестве плагина галереи или слайд-шоу. Настройтесь в следующий раз, когда я предоставлю обзор WordPress Gallery и Плагины для слайдшоу.)
1. NextGen Галерея
NextGen Gallery, более 10 миллионов загрузок, безусловно, является самым популярным плагином для галереи изображений. Он предоставляет множество функций, когда дело доходит до загрузки и управления галереями изображений. Но как это работает с точки зрения эффектов изображения? Ну, он полностью оснащен широким спектром опций для управления размером, стилем, временем, переходами, элементами управления и эффектами лайтбокса изображений. Вы также можете добавить текстовые и графические водяные знаки на свои фотографии. Это действительно всеобъемлющий плагин для изображений с легко ориентируемой серверной частью. Единственная проблема с галереей NextGen состоит в том, что каждый мужчина и его собака используют ее (вероятно, потому что она настолько всеобъемлющая). В результате становится довольно легко обнаружить сайт, поддерживаемый галереей NextGen.
2. Фотогалерея
Photo Gallery — довольно продвинутый плагин. Более 300 000 загрузок и обновление в середине сентября для обеспечения совместимости с WordPress 4.0 включают довольно длинный список функций, которые позволяют пользователям добавлять или редактировать изображения.
После установки плагина Photo Gallery у вас есть возможность:
- Создание, а затем добавление пользовательских водяных знаков, которые затем можно применить к любому или всем изображениям на вашем веб-сайте.
- Включите заголовки и описания изображений для отображения в представлении браузера
- Определите ширину каждого изображения в представлении браузера изображения
- Добавление галерей изображений и альбомов в сообщения, страницы и виджеты
- Загружать неограниченное количество изображений в неограниченное количество галерей в любом формате изображения (JPG, PNG и GIF)
- Определите диапазон деталей для каждого изображения, включая теги и подписи
- Включить защиту загрузки изображений
- Загрузка и доступ к изображениям, которые уже были загружены в библиотеку изображений вашего сайта
- Встроенный поиск WordPress по названию галереи и названию альбома
Плагин Photo Gallery также поставляется с довольно подробным руководством по эксплуатации и видео-инструкцией.
3. Миниатюрные спрайты CSS
Плагин CSS Thumbnail Sprites создает CSS-спрайты из любого загружаемого вами изображения, изменяет размер изображения до размеров, которые вы определяете, а затем применяет фильтр по вашему выбору. Он поддерживает типы файлов JPG, PNG и GIF и позволяет создавать сколько угодно спрайтов. Фильтры включают в себя: Контраст, Цвет, Сепия, Яркость, Пиксельная пластина, Выборочное размытие, Разброс, Блоха, Оттенки серого, За исключением оттенков серого (любой цвет, который вы хотите оставить в полном цвете), Отрицание фото в оттенках серого и Отрицание фото. Вот несколько примеров эффектов, которые могут создавать CSS Thritnail Sprites:
4. Увеличить изображение
Как следует из названия, плагин Zoom Image позволяет легко добавлять эффект масштабирования к любым изображениям, которые вы, возможно, загрузили в магазин WooCommerce , как к представленным изображениям, так и к эскизам. Это вызывает хорошее увеличенное изображение, без необходимости посетителю вашего сайта нажимать на миниатюры. Эффект, который отображается на вашем сайте, выглядит примерно так:
Плагин Zoom Image также предлагает ряд опций, которые позволяют настроить внешний вид вашего веб-сайта. Вы можете выбрать один из двух типов увеличения: оконный или внутренний (на фото выше). Лучше всего то, что плагин Zoom Image оставляет функцию лайтбокса WooCommerce без изменений. Это означает, что если кто-то просматривает ваш сайт и хочет щелкнуть изображение для всплывающего окна, он может сделать это. Zoom Image действительно предоставляет невероятно простую функцию масштабирования для вашего магазина WooCommerce.
5. Генератор эффектов изображения
Этот плагин довольно прост с точки зрения дизайна. Он делает то, что обещает: генерирует эффекты изображения. Ничего больше. Не меньше. Конкретные эффекты, которые он может генерировать, включают в себя: черно-белый, размытый, резкий, сепия, пиксел и негатив.
Все эти эффекты изображения бывают следующих размеров: 1000 на 1000 пикселей, 800 на 800 пикселей и 400 на 400 пикселей. Очевидно, что эти предустановленные размеры несколько ограничивают, поэтому вы должны убедиться, что этот плагин будет работать с вашими конкретными потребностями дизайна сайта.
Вот несколько примеров типов эффектов, которые могут быть созданы с помощью этого плагина:
6. WP Lightbox 2
Согласно каталогу плагинов WordPress.org, эта маленькая жемчужина является лучшим плагином с эффектом лайтбокса (оверлея). Довольно большая претензия на славу.
Он очень прост в использовании: просто установите плагин, откиньтесь на спинку кресла и дайте ему поработать. Конфигурация не требуется вообще. Он просто добавляет эффект лайтбокса для всех изображений, загружаемых на ваш сайт. Он может отображать метаданные изображения в виде заголовка в лайтбоксе. И, он даже поддерживает Image Maps (первый плагин лайтбокса, чтобы сделать это).
Это тип эффекта, которого вы можете достичь с помощью WP Lightbox 2:
7. Стекло
Это немного новый плагин WordPress с эффектом изображения. Он эффективно вручает посетителям вашего сайта увеличительное стекло, через которое можно просматривать изображения на вашем сайте. Его уникальная особенность в том, что для работы не требуется ни Flash, ни CSS3-радиуса. Таким образом, он отлично работает на iPhone и iPad.
Когда посетитель вашего сайта использует курсор для наведения на изображение, появляется круглая рамка, наложенная поверх него. Круглая рамка эффективно создает иллюзию увеличительного стекла. Этот плагин работает только с изображениями в формате JPG и PNG. И это будет работать только тогда, когда ваше изображение напрямую связано с изображением высокого разрешения. Это будет хорошо работать в случае детальной, близкой фотографии или подробных технических чертежей.
Вот как будет отображаться изображение после установки плагина Glass:
8. Регенерировать миниатюры
Этот конкретный плагин изображения немного отличается от всех остальных. Я думаю, что это может пригодиться, особенно если вы играете со своими изображениями, используя любой из плагинов, упомянутых выше. Этот популярный маленький плагин (его скачали 1,4 миллиона раз) позволяет восстанавливать миниатюры изображений, даже если вы изменили исходный размер файла. Это похоже на волшебную кнопку «отменить». Это особенно полезно, если вы уже загрузили изображения на свой действующий сайт или если вы решили изменить тему своего сайта и вам нужны изображения другого размера или размера. Это позволяет вам восстанавливать миниатюры для всех ваших изображений в одной гигантской партии, точно определять отдельные изображения по отдельности или выбирать несколько загрузок изображений. Довольно удобный маленький плагин, особенно если вы не имеете привычки сохранять оригинальные копии изображений вашего сайта.
Огромный объем плагинов WordPress, связанных с изображениями, поразителен. От редактирования самих изображений (путем добавления фильтров и эффектов) до масштабирования и увеличения эффектов, когда изображения отображаются на вашем живом сайте, единственным ограничением является ваше воображение. Для меня самый полный плагин изображения должен быть Галерея NextGen. И, с более чем 10 миллионами загрузок, кажется, что я не одинок. Дайте мне знать, какой ваш любимый плагин эффекта изображения в комментариях ниже. И не забудьте настроиться в следующий раз, когда я предоставлю обзор плагинов WordPress Gallery и Slideshow.