Используйте современные форматы изображений на WordPress
Высокая скорость загрузки сайта положительно влияет на поисковую оптимизацию, а также улучшает поведенческие факторы. Все любят быстрые сайты, и поисковики, и пользователи. Значительную часть трафика и веса страниц на сайте составляют мультимедийный контент — это изображения и видео. Согласитесь, сложно представить себе современный сайт без картинок. Но именно эти медиафайлы и задерживают загрузку страниц. Изображения на сайте нужно оптимизировать, но при этом важно найти баланс между размером изображения и его качеством. Рассмотрим несколько способов, как оптимизировать изображения на сайте.
Что значит оптимизировать изображения на сайте?
Большие изображения замедляют загрузку страниц, что создает неоптимальный пользовательский опыт. Оптимизация изображений — это процесс уменьшения их размера с использованием плагина или скрипта, что, в свою очередь, ускоряет время загрузки страницы. Обычно используется сжатие с потерями и сжатие без потерь.
Преимущества оптимизации изображений
Зачем оптимизировать изображения на сайте? Существует множество преимуществ оптимизации изображений для повышения производительности. По данным HTTP Archive , по состоянию на декабрь 2017 года
Основные преимущества оптимизации изображений на сайте:
- Это улучшит скорость загрузки страницы. Если ваша страница загружается слишком долго, посетители могут устать от ожидания и закрыть сайт. Для получения дополнительной информации об оптимизации времени загрузки страницы смотрите подробное руководство по оптимизации скорости сайта.
- В сочетании с плагинами SEO для WordPress это улучшает SEO сайта на WordPress. Ваш сайт будет выше в результатах поиска. Большие файлы замедляют работу сайта, особенно на мобильных устройствах, а поисковые системы пессимизируют медленные сайты. Google также может сканировать и индексировать ваши изображения быстрее для поиска изображений в Google. Вы знаете, какой процент трафика вашего сайта приходится на поиск картинок Google? Вы можете использовать Google Analytics для проверки трафика поиска картинок Google.
- Более быстрое создание резервных копий и восстановление из них.
- Меньшие размеры файлов изображений используют меньше трафика. Особенно актуально для мобильных браузеров.
- Требует меньше места на сервере (это зависит от того, сколько миниатюр вы оптимизируете)
Как оптимизировать изображения на сайте для улучшения производительности
Основная цель оптимизации изображений — найти баланс между размером файла и приемлемым качеством
Две основные вещи, которые следует учитывать, — это формат файла и тип используемого сжатия . Выбрав правильное сочетание формата файла и типа сжатия, можно уменьшить размер изображения в 5 раз. Вам придется поэкспериментировать с каждым изображением или форматом файла, чтобы увидеть, что работает лучше всего.
Выберите правильный формат файла
Прежде чем приступить к сжатию изображений, убедитесь, что вы выбрали наиболее подходящий тип файлов. Существует несколько типов файлов изображений:
- PNG — изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
- JPEG — использует оптимизацию с потерями и без потерь . Вы можете отрегулировать уровень качества для хорошего баланса качества и размера файла.
- GIF — использует только 256 цветов. Лучший выбор для анимированных изображений. Используется только сжатие без потерь.
- WebP — новый формат изображений для интернета. Хорошо оптимизирует изображения, но поддерживается не всеми браузерами. Как использовать WebP в WordPress.
Качество vs Размер файла
Вот пример сильного сжатия изображения. Первая картинка использует очень низкую степень сжатия, что приводит к высочайшему качеству (но большому размеру файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Исходное изображение без изменений весит 2,06 МБ.
Высокое сжатие (низкое качество) JPG — 68 КБКак вы можете видеть, первое изображение весит 590 КБ. Это довольно много для одной фотографии. Как правило, лучше всего, если общий размер веб-страницы не превышает 1 или 2 МБ. 590 КБ будет уже четвертью объема всей страницы. Второе изображение явно выглядит ужасно, но оно и весит всего 68 КБ. Важно найти правильное соотношение между степенью сжатия (качеством) и размером файла.
Поэтому возьмем изображение со средней степенью сжатия, и, как вы можете видеть ниже, качество теперь выглядит хорошо, а размер файла составляет 151 КБ, что является приемлемым для фотографии с высоким разрешением. Это почти в 4 раза меньше, чем оригинальная фотография с низким уровнем сжатия. Обычно более простые изображения, такие как PNG, должны иметь размер менее 100 КБ или меньше для лучшей производительности.
Среднее сжатие (отличное качество) JPG — 151 КБСжатие с потерями или без потерь
Также важно понимать, что можно использовать два типа сжатия: с потерями и без потерь.
Сжатие с потерями — это процесс, который удаляет некоторые данные. Это ухудшит изображение, поэтому вам нужно быть внимательным с тем, насколько сильно уменьшать изображение. Размер файла может быть уменьшен на значительную величину. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения. Пример, который мы использовали выше, использует сжатие с потерями.
Лучше всего поэкспериментировать с методами сжатия, чтобы увидеть, что лучше всего подходит для каждого изображения или формата. Многие инструменты имеют опцию сохранения изображение для Интернета (Save for web). Это опция присутствует во многих графических редакторах, она дает выбрать настройки качества для оптимального сжатия. Вы несколько потеряете в качестве, поэтому экспериментируйте, чтобы найти наилучший баланс, сохранив приемлемое качество изображения.
Инструменты и программы для оптимизации изображений
Существует множество инструментов и программ, как платных, так и бесплатных, которые вы можете использовать для оптимизации ваших изображений. Некоторые дают инструменты для выполнения ваших собственных оптимизаций, а другие делают работу за вас.
Сжатие фотографии в Affinity PhotoВот некоторые дополнительные инструменты и программы для работы с изображениями:
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
Изменение изображения до нужного размера
Раньше было очень важно загружать изображения в масштабе и не позволять CSS изменять их размер. Однако это уже не так важно, поскольку WordPress с версии 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS). По сути, WordPress автоматически создает несколько размеров каждого изображения, загружаемого в медиа-библиотеку. Включив доступные размеры изображения в атрибут srcset, браузеры теперь могут загружать наиболее подходящий размер и игнорировать другие. Пример того, как на самом деле выглядит код вставки изображения в WordPress.
Медиатека WordPress создает эскизы на основе настроек сайта. Однако оригинал также сохраняется и остается нетронутым. Если вы хотите изменить размер ваших изображений и сохранить дисковое пространство, не сохраняя оригинал, вы можете использовать бесплатный плагин, такой как Imsanity .
Imsanity позволяет установить ограничение, чтобы все загружаемые изображения были ограничены заданным размером, который все еще более чем достаточно велик для потребностей типичного сайта. Imsanity подключается к WordPress сразу после загрузки изображения, но до обработки изображения WordPress. Таким образом, WordPress работает как обычно, за исключением того, что разработчик как бы масштабировал свое изображение до разумного размера перед загрузкой.
Плагины WordPress для оптимизации изображений
К счастью, с WordPress вам не нужно делать оптимизацию или сжатие изображений вручную. Вы можете использовать плагины, чтобы автоматически выполнить сжатие. Есть несколько плагинов, которые автоматически оптимизируют ваши графические файлы по мере их загрузки. Они даже оптимизируют изображения, которые вы уже загрузили. Это удобная функция, особенно если у вас уже есть сайт с изображениями. Рассмотрим некоторые плагины для оптимизации изображений для повышения производительности сайта на WordPress.
Однако важно, чтобы вы не рассчитывали только на плагины. Например, не стоит загружать изображения размером более 2 МБ в медиатеку WordPress. Это может привести к очень быстрому использованию свободного дискового пространства на хостинге. Лучший способ — изменить размер изображения в инструменте для редактирования фотографий, а затем загрузить его и использовать один из следующих плагинов, чтобы еще больше уменьшить его.
Imagify Image Optimizer
Imagify создан той же командой, которая разработала плагин WP Rocket, с которой большинство из вас, вероятно, знакомы. Этот плагин совместим с WooCommerce, NextGen Gallery и WP Retina. Он имеет функцию массовой оптимизации, и есть выбор между тремя различными уровнями сжатия: нормальный, агрессивный и ультра. Плагин имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним кликом откатиться до оригинального файла и повторно сжать до уровня, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Бесплатная ограничена квотой в 25 МБ изображений в месяц.
Imagify сжимает изображения на сторонних серверах , а не на ваших, что важно для производительности. Imagify не замедляет работу сайта на WordPress.
ShortPixel Image Optimizer
ShortPixel Image Optimizer — это бесплатный плагин, который позволяет сжимать до 100 изображений в месяц и работает с файлами различных типов, включая файлы PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений как с потерями, так и без потерь. Может преобразовать CMYK в RGB. Он загружает ваши изображения и миниатюры в облако для обработки, а затем возвращает их на ваш сайт, чтобы заменить оригиналы. Он создает резервную копию исходных файлов, поэтому вы можете вручную восстановить их, если хотите. Он может конвертировать файлы галереи одним потоком. Не имеет ограничений на размер файла.
Optimus Image Optimizer
Optimus WordPress Image Optimizer использует сжатие без потерь для оптимизации изображений. Он поддерживает WooCoomerce и мультисайты и имеет хорошую функцию массовой оптимизации для тех, у кого уже есть большие медиа-библиотеки. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если объединить его с плагином Cache Enabler, вы также сможете использовать формат WebP, которые представляют собой новый облегченный формат изображений от Google.
WP Smush
WP Smush имеет как бесплатную, так и премиум-версию. Он позволяет удалять скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Плагин будет сканировать изображения и уменьшать их размер по мере их загрузки на сайт. Он также просканирует существующие изображения и уменьшит их. Может обрабатывать до 50 файлов одновременно.
- Совместим с некоторыми из самых популярных плагинов медиа-библиотеки, такими как WP All Import и WPML.
- Вся оптимизация изображения выполняется с использованием методов сжатия без потерь, что обеспечивает высокое качество изображения.
- Не имеет значения, в каком каталоге хранятся изображения. Smush находит их и сжимает.
- Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все изображения будут изменены в одинаковых пропорциях.
TinyPNG
TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG. Плагин автоматически сжимает новые изображения и массово оптимизирует существующие. Может преобразовывать CMYK в RBG для экономии места. Сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества. Нет ограничений на размер файла.
ImageRecycle
ImageRecyle — плагин автоматической оптимизации изображений и документов PDF. Этот плагин ориентирован не только на сжатие изображений, но и на PDF-файлы. Очень удобная функция — возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что картинки и файлы никогда не будут сжаты слишком сильно. Плагин также включает возможность массовой оптимизации и автоматическое изменение размера изображения. Примечание: есть бесплатная 15-дневная пробная версия, но сам плагин платный, и изображения загружаются и сжимаются с использованием серверов разработчиков плагина. Вы платите не за месяц, а за общее количество сжатых изображений, тарифные планы начинаются с 10 долларов за 10 000 картинок.
Оптимизация изображений на примерах
Мы решили провести собственный небольшой тест, чтобы показать, насколько оптимизация изображений может повлиять на общую скорость сайта на WordPress.
Несжатые JPG
Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG размером более 1 МБ. Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из теста скорости, общее время загрузки составило 1,55 секунды, а общий размер страницы — 14,7 МБ.
Сжатые JPG
Затем мы сжимали JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости , общее время загрузки было сокращено до 476 мс, а общий размер страницы уменьшен до 2,9 МБ. Общее время загрузки уменьшилось на 54,88%, а размер страницы уменьшился на 80,27% .
На вашем сайте практически нет других способов оптимизации, которые позволили бы сократить время загрузки более чем на 50%. Вот почему оптимизация изображений так важна, весь процесс был автоматизирован плагином.
Оптимизируя ваши изображения с помощью инструмента для редактирования фотографий или плагина WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое вы получаете в Google PageSpeed Insights.
Если у вас есть другие предупреждения об оптимизации из инструментов тестирования скорости, обязательно ознакомьтесь с нашим руководством по Google PageSpeed Insights и пошаговым руководством Pingdom.
Использование SVG
Другая рекомендация — использовать SVG вместе с другими изображениями. SVG — это масштабируемый векторный формат, который отлично подходит для логотипов, иконок, текста и простых изображений. Вот несколько причин:
- SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий.
- Google индексирует SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
- SVG традиционно (не всегда) меньше по размеру файла, чем PNG или JPG. Это может привести к ускорению загрузки.
Сравним три разных типа изображений:
JPG (оптимизированный размер: 81,4 КБ)
JPG изображениеPNG (оптимизированный размер: 85,1 КБ)
PNG изображениеSVG (оптимизированный размер: 6,1 КБ)
SVG изображениеКак вы можете видеть выше, SVG имеет меньший размера файла на 92,51% по сравнению с JPG. А по сравнению с PNG — 92,83%. Ознакомьтесь с нашим руководством по использованию SVG на сайте WordPress.
Лучшие практики оптимизации изображений на сайте
Приведем некоторые общие рекомендации по оптимизации изображений для сайтов:
- Если вы используете плагин WordPress, используйте тот, который сжимает и оптимизирует изображения на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
- По возможности используйте векторные изображения вместе с PNG и JPG
- Используйте CDN для быстрой доставки ваших изображений посетителям по всему миру
- Удаляйте ненужные данные изображения
- Обрезайте белые поля изображения, добавить их можно через CSS
- Максимально используйте эффекты CSS3
- Сохраняйте изображения в нужных размерах
- Используйте веб-шрифты вместо размещения текста внутри изображений — они выглядят лучше при масштабировании и занимают меньше места
- Используйте растровые изображения только для сцен с большим количеством форм и деталей
- Уменьшайте битовую глубину до меньшей цветовой палитры
- Используйте сжатие с потерями, где это возможно
- Экспериментируйте, чтобы найти лучшие настройки для каждого формата
- Используйте GIF, если вам нужна анимация (но сжимайте анимированные GIF-файлы )
- Используйте PNG, если вам нужна высокая детализация и высокое разрешение
- Используйте JPG для общих фотографий и скриншотов
- Удалите все ненужные метаданные изображения
- Максимально автоматизируйте процесс обработки изображений
- В некоторых случаях вам может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
- Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop
Виджет картинок в WordPress: 3 лучших плагина
В WordPress есть несколько всторенных виджетов, однако среди них нет такого, который мог бы легко выводить изображения. В этой статье я покажу три плагина, которые создают виджет картинок в WordPress с дополнительными полезными функциями.
Познакомьтесь с обзорами этих плагинов и выберите для себя подходящий вариант. Все три дополнения замечательные по своему качеству, и отличаются функционалом и возможностями.
Image Widget
Вот такое простое название у плагина виджета картинок в WordPress — Image Widget. И сразу становится понятно, для чего он нужен.
После установки и активации плагина образуется новый виджет «Image Widget». Перетащите его в нужную область и разверните для настройки. Вы увидите кнопку «Select an image». Нажмите на неё для того, чтобы выбрать изображение, которое нужно показывать в виджете.
После загрузки изображения виджет картинок в WordPress покажет вам свои опции.
Плагин Image Widget
Вот какие есть настройки:
- Title. Задаётся заголовок картинке.
- Alternate Text. Задаём альтернативный заголовок изображению, иными словами – атрибут Alt.
- Related. Можно задать связанный термин HTML5.
- Caption. Сюда можно записать подпись для изображения в виджете.
- Link. При необходимости можно задать ссылку, на которую будет осуществлён переход при клике по картинке. То есть, эта опция превращает картинку в баннер.
- Link ID. Можно задать идентификатор, а также выбрать, будет ли открываться ссылка в новом окне.
- Size. Можно выбрать размер изображения.
- Align. Эта опция позволяет ориентировать изображение: слева, справа, по центру
Swifty Image Widget by WPGens
Swifty Image Widget by WPGens создаёт виджет картинок в WordPress, который отличается от первого тем, что выводит не одно изображение, а несколько, и чередует их, то есть переключает. На каждую картинку можно задать свою ссылку. Получается, что это слайдер, только в упрощённом, облегчённом виде.
Установите этот плагин и активируйте. В списке виджетов переместите «Swifty Image Widget» в нужную область. Разверните его для настройки.
Для начала этот виджет картинок в WordPress предлагает основные настройки.
Плагин Swifty Image Widget by WPGens
Рассмотрим их:
- Title. Заголовок виджета.
- Images Size. Размер изображения.
- Image align. Ориентация картинки по краям или по центру.
- Open Link in. Если картинке будет задаваться ссылка, то опция определяет, будет она открываться в этом окне или в новом.
- Rel follow for links: (Search Engines). Можно установить атрибут ссылки для запрета индексации. Рекомендуется включить это, если ссылка внешняя.
Плагин Swifty Image Widget by WPGens
Затем, чтобы добавить картинку в этот виджет, нужно нажать кнопку «Add new image» и тогда откроются ещё настройки.
- Image Link(Optional). Можно задать ссылку к картинке.
- Image Caption(Optional). Задаёт описание к изображению.
- Add Image. Кнопка, которая позволяет добавить картинку.
Чтобы добавить ещё одну картинку в этот же виджет, нужно нажать снова кнопку «Add new image» и тогда откроется новый блок для нового изображения. Таким образом, можно добавить нужное количество картинок.
About Me Image Widget
Этот виджет картинок в WordPress имеет небольшие отличия от первого. Он хорошо подойдёт для того, чтобы показать в боковой колонке сайта фото автора и дать небольшое описание с ссылкой.
Установите плагин на своём сайте, активируйте его. Переместите в нужную область виджет «About Me Image» и разверните его для настройки.
Плагин About Me Image Widget
Этот виджет картинок в WordPress имеет следующие опции:
- Заголовок. Это заголовок виджета. Можно написать «Обо мне!».
- Add media. Это кнопка для того, чтобы добавить картинку в виджет.
- Description. Сюда следует написать короткую информацию об авторе.
- Select Style. Можно выбрать прямоугольную или круглю картинку.
- URL. Можно задать ссылку, на которую будет переход при клике.
Статьи по теме:
10 WordPress плагинов для поиска стоковых изображений через админку
Изображения отыгрывают крайне важную роль в блоге, ведь хороший контент с качественными картинками — это залог успеха. Картинки делают текст интереснее, помогают лучше передать мысль. Но иногда очень сложно выбрать подходящее изображение хорошего качества. К счастью, есть ряд WordPress плагинов для поиска изображений, которые помогут вам с этой нелёгкой задачей. Все они позволяют искать картинки прямо из панели инструментов вашего WordPress сайта.
Смотрите также:
Бесплатные фотостоки с легальными фото
ImageInject
ImageInject, ранее известный как Wp Inject, позволит вам быстро находить изображения по ключевым словам. Плагин ищет среди тысяч бесплатных картинок те, которые более всего подходят к ключевым словам вашего поста и позволяет легко вставить их в текст всего за три клика.Плагин не требует настройки для роботы, но для опытных пользователей реализована возможность изменить любые параметры по желанию.
Pixabay Images
Pixabay это один из моих любимых ресурсов качественных картинок для блога, и их плагин для WordPress значительно упрощает мою работу.Все изображения из Pixabay полностью бесплатны — нет необходимости добавлять ссылку на источник. Плагин позволит быстро находить и добавлять картинки через кнопку «Добавить медиа» на панели инструментов.
Free Stock Photos Foter
Этот плагин будет искать для вас бесплатные изображения среди более 180 миллионов картинок в своей базе. Плагин позволяет изменять размер изображений перед вставкой, а также автоматически добавляет необходимые атрибуты к изображению.
PhotoDropper
PhotoDropper значительно облегчит вашу жизнь при поиске картинок для блога. Плагин ищет подходящие картинки среди огромных коллекций бесплатных и премиум изображений, после чего отбирает лучшие.Обратите внимание, что некоторые изображения защищены лицензией и требуют указания источника.
Compfight
Это ещё один простой плагин для поиска качественных изображений прямо из панели инструментов. Не забудьте указывать атрибуты к найденным картинкам, чтобы не нарушать лицензию.
Flickr – Поиск фото на Flickr
Очень простой, но в то же время мощный плагин для поиска картинок на Flickr. Информация об авторе автоматически добавляется из источника, так что у вас не возникнет проблем с правообладателями.Плагин полностью совместим со стандартным редактором изображений WordPress, так что вы сможете легко редактировать найденные картинки.
Getty Images
Один из наиболее популярных ресурсов изображений с более чем 50 миллионами бесплатных картинок. Как и другие, плагин позволит вставлять картинки с Getty прямо из меню медиа на панели инструментов.
Google Images Search And Insert
Как вы поняли, исходя из названия, это плагин для поиска изображений при написании поста по базе Google картинок. Плагин довольно часто обновляется и стремительно набирает популярность среди пользователей.
Microstock — поиск фото по платным фотостокам
Плагин для поиска фотографий через админку по базам платных фотостоков, таких как Depositphotos, Fotolia и Istock.В отличие от всех предыдущих плагинов, с помощью этого можно найти исключительно платные изображения. Однако все они будут очень качественные и сделаны профессиональными фотографами.
Плагин не обновлялся уже очень давно, но до сих пор работает.
Dreamstime Stock Photos
И в завершении подборки плагин для поиска платных фотографий через панель управления WordPress по фотостоку Dreamstime.
Заключение
Поиск подходящего к посту изображения иногда отбирает огромное количество времени, но с соответствующими плагинами это можно делать легко и быстро. Вам не нужно больше посещать множество сайтов в поисках нужного, плагины будут находить изображения прямо из вашей панели инструментов.Как сделать фото До / После на сайте WordPress (подборка плагинов)
На некоторых сайтах встречается интересный эффект наложения двух картинок До / После со специальным ползунком, позволяющим просматривать обе фотки и легко видеть отличия между ними. Пример реализации показан в превьюшке поста слева. Обычно такой подход используют, когда важно продемонстрировать разницу между двумя изображениями: это могут быть результаты обработки фото в фотошопе, природные изменения ландшафта, какие-то косметологические преображения и десятки других вариантов. В данной статье подобрал наиболее актуальные плагины, которые помогают легко сделать фото до и после в WordPress.В основе из этих решений лежат соответствующие скрипты. Теоретически, их можно подключить в систему и без модулей, но последние значительно упрощают сам процесс вставки графики на сайт для пользователей. Реализуется все, как правило, через шорткоды в текстовом редакторе.
Детально рассматривать каждый инструмент я не буду, просто опишу основные особенности и фишки. Выбирайте тот, который вам больше понравился по функциям и внешнему виду. На момент написания статьи все они были вполне рабочими. В любом случае обращайте внимание на совместимость версий плагинов, их текущие оценки и дату обновления.
Twenty20 Image Before-After
В основе модуля Twenty20 Image Before-After используется скрипт от команды Zurb team. Он не только позволяет вставить изображение до / после в тексте, но и сделать его адаптивным. Это, как по мне, одно из самых интересных решений — не зря у него более 5 тысяч загрузок и твердая четверка.
Из дополнительных опций отмечу:
- простой интерфейс, понятный даже новичкам;
- специальная кнопка редактора для вставки шорткода;
- горизонтальный и вертикальный слайдеры;
- адаптивность;
- наличие виджета для картинки до и после;
- разные параметры в шорткоде;
- совместимость с визуальным редактором WP Bakery Visual Composer.
Вот небольшая видео-демонстрация работы плагина:
Очевидно, подобный автоматизированный подход намного проще и быстрее чем создание GIF анимации в Фотошопе и последующая ее вставка на сайт вручную.
Slider comparison image before and after
В описании Slider comparison image на сайте не так много информации, единственное, что бросается в глаза — максимальная оценка в 5 баллов. Данное решение скачали более 2 тысяч раз, но последний раз оно обновлялось около года назад и «официально не поддерживает» самые последние версии системы (хотя наверняка там работает).
Из описания функциональности автор указал лишь нужный шорткод — [sciba] плюс добавил парочку скриншотов. По ним становится понятным, что вставлять фото до и после можно через кнопку в редакторе — при нажатии появится всплывающая форма для задания соответствующих параметров. Также в форуме поддержки сообщается о совместимости плагина с мобильными устройствами.
Before After Image Slider Lite
Before After Image Slider Lite — один из самых актуальных вариантов. Последний апдейт был в текущем году + поддерживается WP до 4.8.x. Отзывы вполне нормальные, хотя общая оценка и ниже 4-х. В модуле есть Лайтовая и Pro версии.
Базовая реализация предусматривает работу с шорткодами, но по желанию вы сможете поставить фреймворк с инструментом, где все параметры будут задаваться через форму. Из настроек доступны: Alt в обеих картинках, заголовок, ширина, дополнительный класс (например, для hover эффекта). Кстати, разрешается указывать объекты изображений по ID, что добавляет опцию локализации через WPML.
Before After Image Slider WP
Before After Image Slider WP — тоже неплохое и весьма свежее решение: 1 тысяча скачиваний, недавнее обновление, оценка = 4,5. Хотя лично меня смутило отсутствие работающего слайдера на демо сайте, надеюсь, авторы не забросили свое творение.
Все функции делятся на 3 категории:
- скрипт полностью интегрирован в движок WP: имеется кнопка в редакторе, поддерживается инструмент выбора изображений, виджеты;
- плагин корректно отображается на смарфонах и планшетах: работает тач и адаптивность;
- доступен и обычный шорткод, позволяющий сделать картинку до и после.
На одной странице допускается совмещение нескольких элементов. Хочется верить, что глюки в демке временные, т.к. модуль интересный.
TwentyTwenty
TwentyTwenty — еще одна вариация скрипта от Zurb team, который упоминался в первом плагине из статьи. Кстати, на сайте разработчиков имеется детальная инструкция по его внедрению на любой сайт.
Что касается непосредственно TwentyTwenty то, вероятно, один из первых в данной нише — за все время получил более 10 тысяч скачиваний. Жаль, не обновлялся уже около 3х лет. Официально последние WP релизы не поддерживаются, однако он вполне может работать и сейчас — нужно тестировать. Настроек тут минимум, лишь шорткод [twentytwenty].
Before After
Before After — тоже далеко не самый «свежий» вариант дабы сделать фото до и после на вашем сайте. Он обновлялся 2 года назад, а включил его в список по двум причинам. Во-первых, визуально модуль немного отличается от других решений — вдруг вы захотите именно такой ползунок. Во-вторых, есть ссылка на оригинальный скрипт, который здесь применяется (разработчики могут заинтересоваться).
Итого. Если потребуется, в будущем дополню статью и рассмотрю один из методов более детально, хотя здесь на первый взгляд все просто. Советов, в принципе, тоже никаких особых нету — начинайте с первого в списке Twenty20 Image Before-After. Думаю, он подойдет большинству пользователей. Единственное, я бы попробовал оптимизировать WordPress header дабы убрать вызов соответствующего скрипта везде кроме как для постов с этой функцией.
P.S. Бесплатный SEO анализ сайта на техническую оптимизацию — sitechecker.pro. Удобный детальный отчет и мониторинг ваших веб-проектов.
Кому есть что дополнить по теме создания изображения до и после на сайте, пишите ниже. Возможно, знаете другие интересные методы/плагины?
Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!ImageMaps плагин на изображения на картах для Minecraft 1.14.4
Плагин ImageMaps поможет украсить ваш сервер в Minecraft. Теперь вы сможете устанавливать изображения прямо на карты на вашем сервере. Вам нужно будет загрузить картинку на сервер, прописать команду и на сервере появится ваша новая карта с вашей картинкой. С помощью этого плагина можно не только делать крутые записки из карт, но и делать баннеры на спавне, вставляя карты в рамки.
Важная информация:
Когда будете делать картинки для карт, помните что одна карта – это изображение размером 128 на 128 пикселей.
Например: Наш баннер имеет размер 640 на 256 пикселей, соответственно в Minecraft его размеры 5 на 2 блоков.
Также есть один нюанс, наш любимый Minecraft имеет ограниченную палитру цветов и поэтому ваши картинки могут выглядеть по другому в игре. Еще не стоит ставить много баннеров в одном месте, так как они могут нагружать ваш сервер. На скрине как раз видно искажение оранжевого цвета, на нашем логотипе он более насыщенный.
Как поставить картинку на карту в Майнкрафт ?
- Для начала вам нужно поместить все картинки по этому пути на вашем сервере plugins/ImageMap/images ( Поддерживаемые форматы: PNG, JPEG, BMP, GIF )
- Потом заходите на сервер и прописываете команду /imagemap <название картинки с расширением> true
- Затем подходите к стене и жмете ПКМ и после этого на стене появится ваша картинка.
- Далее, если вам нужна именно карта в руках, тогда нажмите на колесо мыши, наведя курсор на рамку с картой и карта будет у вас в руке ( Действует в креативе ). Если вы в выживании, можете просто сломать рамку и всё, карта выпадет сама.
ImageMaps [1.14.4] [1.13.2] [1.12.2] [1.11.2] [1.10.2] [1.8.9] [1.7.10]
22 KB
Интерактивное изображение на WordPress и плагин ImageLinks Lite
В этой статье я расскажу вам про интереснейший и необычный плагин, который позволяет сделать интерактивное изображение. Добавлю ещё, что этот плагин совершенно бесплатный и стабильный.
Интерактивное изображение – это картинка, на которой есть несколько активных областей, клик по которым (или наведение мышки), вызывает какое-либо событие, например, переход на ссылку или вывод сообщения подсказки.
Как создать интерактивное изображение на WordPress
Итак, скачайте и установите на свой сайт плагин ImageLinks Lite. Скачать плагин можно по ссылке ниже.
Для начала расскажу только о том, как создать интерактивное изображение. А потом разберу все настройки плагина.
Перейдите в пункт консоли «ImageLinks», который появился после активации плагина, а затем в подпункт «Add new». Введите в верхнем поле какое-либо название для вашего интерактивного фото.
Прокрутите немного вниз и нажмите на кнопку «Set Image».
Перед вами откроется встроенный медиазагрузчик WordPress, в котором выберите уже загруженное или загрузите с компьютера новое изображение, которое нужно сделать интерактивным. И выбранная картинка сразу появится в предпросмотре немного выше.
Теперь давайте сделаем из этой картинки интерактивное изображение. Для этого перейдите ниже предпросмотра во вкладку «Hotspots» и нажмите на иконку с плюсом, чтобы добавить новую интерактивную точку на изображении.
Затем верните к предпросмотру. Вы увидите, что вверху слева появилась точка.
Хватайте её мышкой и двигайте в то место картинки, где должна быть первая интерактивная точка.
После этого снова перейдите к опциям под предпросмотром, чтобы задать параметры для точки. Здесь вам нужен раздел «Hotspot Settings». Откройте его и заполните поле «Link URL», в котором нужно указать ссылку, на которую будет происходить переход при клике на эту точку на интерактивном изображении. При необходимости можно включить опцию «Open Link in New Window», чтобы ссылка открывалась в новой вкладке.
Теперь обратите внимание на блок настроек «Popover Settings». Здесь можно задать подсказку, которая будет появляться при наведении мышки на интерактивную точку. Для начала включите опцию «Show Popover». А затем ниже в редакторе заполните содержимое подсказки.
Теперь верните к предпросмотру и нажмите на кнопку «Preview», чтобы увидеть, как это будет выглядеть на практике.
Вы увидите ваше уже работающее интерактивное изображение, где можно проверить созданную подсказу и ссылку.
Теперь стало понятно, как добавлять интерактивные точки на изображение. Чтобы добавить ещё точку, нажмите на кнопку с иконкой плюса.
На картинку можно добавить любое количество точек.
Когда все точки добавлены, нажмите кнопку «Опубликовать», что бы сохранить изменения, и используйте шорткод для публикации этого интерактивного изображения на сайте, в записях и страницах.
Настройки плагина ImageLinks Lite
Теперь, когда вы знаете в общих чертах как сделать интерактивное изображение, я рассмотрю другие настройки и возможности плагина. Как вы могли заметить, все опции делятся на две вкладки «Generals» и «Hotspots». Начну с разделов первой вкладки:
- Image Url. Указывается ссылка на интерактивное изображение. Можно указать картинку и из другого источника, а не с вашего сайта.
- Image Size. Размер картинки.
- Можно выбрать тему оформления для подсказок точек.
- Mobile Animation. Включает и выключает анимацию точек на мобильных устройствах.
- Popover Settings. Настройки внешнего вида подсказок на точках.
- Custom CSS. Здесь можно подключить кастомный стиль.
Во вкладке «Hotspots» собраны опции для каждой из точек. Сбоку с левой стороны располагается список созданных точек с кнопками для операций над ними – добавить, удалить, скопировать и переместить.
Выделив ту ил иную точку, можно её настроить. Есть такие разделы опций:
- Hotspot Location. Показывает координаты точки и их можно задать вручную более точно.
- Hotspot Settings. Здесь можно установить своё изображение для точки, ссылки, придать точке свой CSS класс и HTML контент.
- Popover Settings. Здесь опции подсказки. Они состоят из кнопки для включения и редактора текста.