Вопрос или проблема
Я хочу загрузить анимированные гифки на свой сайт и использовать их как изображение в заголовке. У меня есть несколько вопросов.
Во-первых… как мне остановить WordPress от автоматического изменения размера изображения при загрузке и в процессе превращения моей анимированной гифки в статичную? Я смотрел обучающие материалы по этому вопросу в интернете, но большинство из них говорят, что нужно выбрать “изображение полного размера” при загрузке. Однако, похоже, что это не является вариантом в WordPress 4.2.3?
Во-вторых, какие альтернативы анимированным гифкам есть в наши дни? Я знаю, что это не идеальный вариант, и они могут быть громоздкими. Но я работаю с киноизображениями, поэтому мне нравится использовать гифки для моего изображения в заголовке. Хотя я могу переключиться на комбинацию статичных гифок и анимированных гифок для изображений в заголовке, я мог бы иметь до 20 гифок, загружаемых одновременно, что, я полагаю, не идеально. Я смотрел некоторые плагины, и есть один, который конвертирует анимированные гифки в html5. Однако его скачали менее 40 раз, и у него нет рейтинга.
Использовать анимированные гифки в любом качестве в WordPress, даже в качестве изображений в заголовке, совершенно нормально. Когда вы загружаете изображение, WordPress обрабатывает его в различные формы и размеры, согласно вашему шаблону и, возможно, некоторым плагинам.
Версия изображения, которая отображается, определяется вашим шаблоном ИЛИ, если не указано, ядром WordPress (миниатюра = 150×150). Затем изображение отображается шаблоном с функцией the_post_thumbnail() – по умолчанию это будет использовать размер ‘миниатюра’, который, как правило, является самым маленьким доступным размером.
Чтобы гарантировать, что ваши загруженные гифки отображаются как загруженные (без какой-либо обработки), вам нужно изменить the_post_thumbnail() в ваших шаблонах темы, чтобы вместо этого было the_post_thumbnail( 'full' ). Это будет использовать оригинальное изображение без какой-либо обработки.
Я использовал следующее условие, чтобы показать изображение полного размера, если тип изображения – гиф, иначе показать измененное изображение, если это не гиф.
if(substr(get_the_post_thumbnail_url($post->ID), -4) == '.gif') {
$thumb = get_the_post_thumbnail_url($post->ID, 'full');
} else {
$thumb = get_the_post_thumbnail_url($post->ID, 'medium_large');
}
Ответ или решение
Использование анимированных GIF в качестве выпускного изображения на WordPress
Вопрос, поднятый вами, очень актуален для пользователей WordPress, стремящихся применить анимированные GIF-изображения на своих сайтах. В этой статье я подробно расскажу о том, как избежать автоматического изменения размера изображений, а также предложу альтернативы анимированным GIF.
Проблема с размером изображений
Когда вы загружаете анимированные GIF в WordPress, система автоматически обрабатывает их, создавая множество различных размеров. Это может повлечь за собой замену анимации на статичное изображение. Чтобы избежать этой проблемы, вам необходимо убедиться, что ваш сайт отображает загруженные гифки в полном размере.
-
Изменение функции
the_post_thumbnail(): Стандартная функция, используемая для отображения миниатюр, по умолчанию использует размер "thumbnail", что приводит к обрезке анимированных GIF. Вы можете изменить этот вызов, чтобы использовать полный размер изображения. Например:if (substr(get_the_post_thumbnail_url($post->ID), -4) == '.gif') { $thumb = get_the_post_thumbnail_url($post->ID, 'full'); } else { $thumb = get_the_post_thumbnail_url($post->ID, 'medium_large'); }В приведенном коде отображается полное изображение для GIF и предварительно уменьшенное изображение для остальных типов.
-
Включение поддержки больших изображений: Убедитесь, что ваша тема поддерживает отображение изображений полного размера. Это можно сделать в файлах темы.
Альтернативы анимированным GIF
Хотя анимированные GIF популярны, они действительно могут быть неэффективными и перегружать страницы. Рассмотрим некоторые альтернативы:
-
HTML5 и CSS-анимация: Использование HTML5 для создания анимаций позволяет избежать проблем с производительностью и качеством, с которыми сталкиваются GIF. Вы можете использовать CSS-анимации или встроенные видеоплееры для отображения контента.
-
Видеоформаты: Вместо GIF-файлов рассмотрите использование форматов видео, таких как MP4 или WebM. Эти форматы обеспечивают лучшее качество и меньший размер файлов. Они также позволяют управлять воспроизведением, например, добавлять кнопку воспроизведения.
-
Плагины для конвертации GIF: Хотя вы упомянули, что наткнулись на плагин с низкой оценкой, стоит обратить внимание на более популярные решения. Некоторые плагины могут значительно улучшить загрузку ваших GIF, конвертируя их в видеоформаты.
-
Смешанная стратегия: Как вы уже упомянули, имеет смысл использовать комбинацию статических и анимированных изображений. Это может помочь сбалансировать визуально привлекательное содержание с производительностью вашего сайта.
Заключение
Использование анимированных GIF в качестве выпускных изображений на WordPress — это вполне осуществимая задача, если вы знаете, как правильно настроить функционал темы. В то же время стоит обратить внимание на современные альтернативы GIF, которые могут предложить лучшие результаты как с точки зрения скорости загрузки, так и UX. Это поможет вашему веб-сайту выглядеть более профессионально и предлагать пользователям лучший опыт.
Если у вас есть дополнительные вопросы или нужна помощь с реализацией, не стесняйтесь обращаться!
