Основные плагины WordPress для работы с анимированными GIF-файлами
Когда-то ограничивавшиеся безвкусными мигающими баннерами с неоновыми цветами и мультяшными изображениями, всплывающими во всплывающих окнах и заголовках электронной почты, GIF-файлы изменились в лучшую сторону. С этим изменением они останутся, особенно для пользователей и разработчиков WordPress. Файлы GIF, разработанные специально для Интернета, обычно имеют небольшой размер, что делает их идеальными для добавления движения в публикацию. На самом деле, анимированные GIF-файлы могут освежить статичную статью или тему.
Тем не менее, анимированные GIF-файлы имеют свою долю проблем и разочарований. Поскольку анимированные GIF-файлы состоят из множества кадров, они могут быстро превратиться из небольших ненавязчивых файлов в одни из самых громоздких изображений на вашем сервере. GIF-файлы известны тем, что замедляют время загрузки страниц, на которых они используются, что делает их барьером для повторного трафика и проблемой для веб-мастеров, которые понимают важность скорости в эпоху нетерпения.
Затем есть все проблемы, связанные с WordPress. WordPress не был создан с учетом анимированных GIF-файлов, и их возрождение доставило разработчикам некоторые головные боли. В то время как WordPress обычно автоматически изменяет размеры изображений, этот процесс прерывает анимацию, отображая только первый кадр. Кроме того, анимированные GIF-файлы может быть сложно использовать в качестве избранных изображений в WordPress. Они могут нарушить работу RSS-каналов, кампаний по электронной почте, отображения главной страницы и эскизов.
В большинстве случаев преимущества все же перевешивают недостатки. Однако, чтобы сделать GIF успешной частью вашей публикации WordPress, вам может понадобиться опробовать некоторые новые методы. Ознакомьтесь с некоторыми обязательными плагинами и методами для работы с анимированными GIF-файлами ниже.
Базовый: сделайте свой сайт WordPress быстрее
Одной из основных проблем использования анимированных GIF-файлов в WordPress является проблема времени загрузки. Сохранение времени загрузки как можно быстрее необходимо для того, чтобы ваши посетители были довольны и чтобы ваш веб-сайт был максимально эффективным.
По данным KISSmetrics, время загрузки является основным фактором отказа от страницы. При времени загрузки всего 4 секунды уровень отказа от страницы подскакивает до 25% и приближается к 50%, когда это время приближается к 10 секундам. Кроме того, задержка ответа страницы на 1 секунду может привести к снижению конверсии на 7%.
Это означает, что если сайт приносит 100 000 долларов в день — сайт электронной коммерции или другой интернет-магазин — задержка страницы в 1 секунду может составлять 2,5 миллиона долларов потерянных продаж каждый год. Это также напрямую влияет на удовлетворенность клиентов. Задержка в 1 секунду снижает удовлетворенность клиентов на 16%. Ваши клиенты хотят, чтобы ваш сайт функционировал практически без задержек.
Поскольку GIF можно использовать для повышения удовлетворенности пользователей, это становится еще более проблематичным. Может быть, вы используете анимированный GIF, чтобы проиллюстрировать, как работает продукт, как в случае с этой ловушкой для животных ниже. GIF — это просто самый быстрый и простой способ объяснить механизм установки и освобождения ловушки.
Даже за пределами сайтов электронной коммерции GIF-файлы можно использовать для иллюстрации определенных моментов, добавления юмора к скучной теме или повышения ощущения от взаимодействия с пользователем. Они могут быть отличным способом связать незнакомую концепцию со знакомой, используя поп-культуру в качестве связи. Например, блоги WebpageFX для аудитории владельцев бизнеса, которые могут быть знакомы или не знакомы с такими терминами, как «мета-ключевые слова» и «наполнение ключевыми словами». Эти методы устарели и совершенно неэффективны — но вместо того, чтобы сказать это, они показали, насколько (не)эффективно это было бы с анимированным GIF.
Очевидно, что GIF-файлы отлично подходят для улучшения понимания или просто вызывают улыбку на лице читателя, но это создает прямую дилемму. Несмотря на присущие им положительные стороны, эти файлы могут быть довольно большими, а медленная загрузка может со временем привести к потере прибыли и снижению уровня трафика. Если GIF-файлы важны для вас и вашего блога, устранение проблем, которые приводят к задержкам и медленной загрузке, имеет решающее значение. Приведенные ниже плагины могут помочь уменьшить размер файлов и улучшить загрузку, не жертвуя анимацией или ее качеством.
WP Smush.it
Широко используемый и доступный для разработчиков всех уровней квалификации, WP Smush.it обладает функциями, необходимыми для оптимизации изображений таким образом, чтобы сократить время загрузки и удовлетворить конечных пользователей. Плагин предназначен для:
- Оптимизировать сжатие JPEG
- Преобразуйте некоторые статические GIF-файлы в индексированные PNG-файлы.
- Удаление неиспользуемых цветов из проиндексированных изображений
- Удалите ненужные метаданные с изображений
- Сделайте анимированные GIF-файлы более эффективными, удалив пиксели, которые остаются одинаковыми во всех кадрах.
В отличие от некоторых других плагинов для сжатия изображений, которые разбивают анимированные GIF-файлы так же, как это делает сам WordPress, WP Smush.it специально включает методы оптимизации для анимированных GIF-файлов.
Изображения, добавляемые на страницы бэкэнд-пользователями и администраторами, автоматически обрабатываются плагином при загрузке. Это означает, что вам вообще не нужно менять процесс, чтобы улучшить взаимодействие с пользователем. Это не становится намного лучше, чем это! Пользователи, обеспокоенные тем, как существующие изображения влияют на время загрузки, также могут использовать плагин для сканирования существующего контента. WP Smush.it прост в установке и использовании.
Любой плагин отложенной загрузки
Другой вариант оптимизации времени загрузки при включении GIF-файлов — использовать плагин отложенной загрузки. Эти плагины разработаны с учетом потребностей пользователей. Вместо ожидания загрузки всей страницы, что замедляет время и приводит к разочарованию, плагины ленивой загрузки загружают только тот контент, который в данный момент виден на экране посетителя. Отложенная загрузка ускоряет работу сайтов с большим количеством изображений и может быть эффективным способом сделать посетителей счастливыми.
Существует множество бесплатных опций, упрощающих ленивую загрузку. Они включают, но не ограничиваются:
- Ленивая загрузка — Ленивая загрузка использует jQUery.sonar для загрузки только видимых изображений. Он был написан командой WordPress VIP и постоянно получает высокие оценки пользователей.
- Отложенная загрузка изображений. Разработанная как облегченная версия оригинальной отложенной загрузки, Image Lazy Load (Unveil.js) обеспечивает поддержку изображений с высоким разрешением на устройствах с дисплеями Retina.
- BJ Lazy Load — BJ Lazy Load заменяет встроенные изображения сообщений заполнителями и загружает содержимое непосредственно перед тем, как оно станет видимым для конечных пользователей во время прокрутки.
- Rocket Lazy Load — Rocket Lazy Load представляет собой небольшой (менее 2 КБ) скрипт, который отображает все изображения страницы — виджеты, встраивания, миниатюры, аватары и многое другое во время прокрутки. Он наиболее известен своими небольшими размерами.
Промежуточный уровень: установите несколько удобных плагинов для анимации
После того, как вы освоили время загрузки и скорость, пришло время перейти к чему-то более продвинутому, но все же выполнимому для большинства обычных пользователей WordPress. Эти анимационные плагины делают существующие GIF-файлы более удобными для пользователя и еще более визуально привлекательными. Удобные анимационные плагины, перечисленные ниже, расширяют возможности WordPress по отображению GIF-файлов.
Анимированный GIF Изменить размер
Animated GIF Resize исправляет функцию автоматического изменения размера WordPress, чтобы вы могли изменять размер анимированных GIF-файлов, не нарушая анимацию. Это устраняет часто встречающуюся проблему, когда WordPress отображает первый кадр анимированного GIF без чего-либо еще.
Гифипресс
Любой, кто часто работал с анимированными GIF-файлами, вероятно, знаком с Giphy, анимированным архивом GIF, который позволяет пользователям искать по тегу и находить GIF-файлы, относящиеся практически к любой теме. Giphypress упрощает встраивание файлов Giphy на ваш сайт — просто используйте кнопку, добавленную плагином, для поиска идеального изображения и нажмите «Вставить в публикацию».
Предварительный просмотр GIF-анимации
Предварительный просмотр GIF-анимации ищет и находит все места, где вы использовали анимированный GIF-файл на своем сайте WordPress, и заменяет их изображениями для предварительного просмотра. Независимо от того, где был создан GIF (работают как локальные, так и сторонние источники изображений), плагин использует первый кадр анимации для создания предварительного просмотра. Затем посетителям сайта предоставляется возможность нажать кнопку воспроизведения, чтобы увидеть оставшуюся часть анимации, или перейти дальше, не просматривая анимацию.
Это отличный способ сократить время загрузки страниц на вашем сайте, особенно если вы решили не использовать плагин отложенной загрузки — вместо того, чтобы загружать каждый кадр каждого анимированного GIF на странице, посетителям нужно только загрузить первый кадр. Этот тип функциональности используется крупными веб-сайтами, такими как BuzzFeed, особенно для посетителей с мобильных устройств, у которых больше причин быть избирательными в отношении того, какие данные они выбирают для загрузки.
Продвинутый уровень: Делайте крутые вещи с анимированными GIF-файлами
Эти плагины и методы немного сложнее в настройке, но они довольно мощные. Продолжайте читать, чтобы узнать, как установить GIF в качестве избранного изображения (что-то, что мы все чаще видим на таких сайтах, как BuzzFeed, Mashable и TechCrunch) и как превратить серию отдельных файлов изображений в анимированную последовательность прямо на вашем сайте.
Установка анимированного GIF в качестве избранного изображения
По большей части веб-дизайнеры и разработчики были ограничены — особенно в WordPress — при попытке установить анимированный GIF в качестве избранного изображения. Поскольку WordPress автоматически создает миниатюру из предоставленного вами избранного изображения, разбивая анимированные GIF-файлы, это может быть очень сложно осуществить. Однако это не значит, что это невозможно.
Один из способов обойти задержку — вставить URL-адрес изображения в поле избранного изображения вместо того, чтобы загружать и загружать графику с вашего компьютера или где-то в Интернете. Это удар или промах.
Другой — возможно, менее идеальный, но все же работающий для тех, кто хорошо разбирается в разработке WordPress — вариант изменения формата избранного изображения с «избранного» на «полный» внутри индексного файла темы. Это позволяет избранному изображению извлекать оригинальные, неискаженные анимированные GIF-файлы. Это требует готовности немного кодировать и имеет недостаток, заключающийся в том, что это применимо ко всем вашим избранным изображениям, поэтому вам нужно будет начать вручную изменять их размер до нужной ширины и высоты.
Это не должно быть сложно. На самом деле, есть и плагины, облегчающие процесс. Autoset Featured Image и Automatic Featured Image Posts — это два плагина (выберите один), которые автоматически устанавливают первое изображение — независимо от его формата — в качестве избранного изображения. Это означает, что если ваше первое изображение, отображаемое внутри поста, представляет собой анимированный GIF, оно станет избранным изображением. Однако у этого обходного пути есть и другие недостатки, а именно то, что вам всегда нужно быть разборчивым в отношении изображения, которое вы размещаете в своих сообщениях выше всего!
Автоматически анимированные изображения
Плагин Auto Animate Image позволяет пользователям вставлять анимации, созданные из серии отдельных файлов, вместо стандартного анимированного GIF. Его можно использовать, чтобы обойти максимум 256 цветов анимированных GIF-файлов, что обеспечивает более естественное и плавное ощущение. С другой стороны, легко создать что-то, что сильно замедляет работу вашего сайта, поэтому использование этого плагина требует некоторой ловкости.
Плагин не только отображает несколько изображений — в противном случае неподвижные изображения — непрерывно, как анимация, он также поддерживает произвольные имена файлов, не требующие стандарта. Это означает, что форматы GIF, PNG, JPEG, JPEG XR и другие параметры HD Photo (BMP, TIFF, WebP и SVG) можно использовать взаимозаменяемо для создания чего-то нового и совершенно оригинального. Анимации, созданные с помощью Auto Animate Image, могут быть настроены на задержку, повтор, перемотку назад, паузу и даже пустые, что дает больше возможностей, чем стандартный GIF. Он устраняет необходимость написания JavaScript, но при желании им можно управлять. Плагин поддерживает большинство браузеров, поэтому вам не нужно беспокоиться о различных возможностях для конечных пользователей.
Все дело в том, чтобы сделать ваших посетителей счастливыми
Гифки вернулись. Многие утверждают, что они восстали из мертвых. Однако вместо старых безвкусных анимаций, которыми они были раньше, они теперь являются неотъемлемыми аспектами чистого, надежного и эффективного веб-дизайна. Однако при работе в WordPress они могут быть более чем проблематичными.
Начните сначала – с базового уровня. Потратьте время, чтобы изучить плагины, чтобы увеличить скорость загрузки, найти то, что вам удобно, и проверить, как сокращается время. Оттуда работайте над более продвинутыми плагинами для анимации. Затем проявите творческий подход. Вырваться из «стандартной» рутины анимированных GIF, создав собственную анимацию из статических изображений и обеспечив возможность установки ваших анимированных GIF в качестве избранных изображений.
Анимированный GIF не должен вызывать разочарование, негатив или ужасные часы перед экраном компьютера, пытаясь заставить ваши страницы загружаться быстрее или отображаться правильно. Они предназначены для развлечения, и плагины и опции, описанные выше, делают их такими.