Сайт находиться на текущей реконструкции, могут наблюдаться ошибки. Просим не производить платежи. Просим извинения за доставленные неудобства!

Как обслуживать изображения в форматах следующего поколения с помощью WordPress

0
Want create site? Find Free WordPress Themes and plugins.

Что такое WebP? Это лучший формат изображения, о котором никто не слышал, но он скоро изменится.

В этом посте я собираюсь показать вам, как начать использовать изображения WebP на вашем сайте WordPress. Мы рассмотрим, как преобразовать ваши изображения в WebP и как их использовать для совместимых браузеров. 

Что такое изображения следующего поколения?

GIF были изобретены в 1987 году. Первый стандарт JPEG был выпущен в 1992 году, а PNG стал Рекомендацией W3C в октябре 1996 года.

Я знаю, что 90-е годы не ощущаются так давно, но прошло уже почти 30 лет, и мы все еще используем те же форматы изображений! Разве не пришло время для обновления?

Введите следующее поколение форматов изображений . JPEG 2000, JPEG XR и WebP – это современные форматы изображений с превосходными возможностями сжатия и превосходным качеством, чтобы порадовать веб-пользователей. Это означает, что они создают намного меньшие файлы изображений, так что вы можете значительно улучшить скорость ваших страниц, используя форматы следующего поколения.

WebP является самым экономичным и обычно обеспечивает сжатие на 30% больше, чем JPEG и JPEG 2000, поэтому на этом формате мы сосредоточимся сегодня.

Что такое WebP?

WebP – это графический формат Google с открытым исходным кодом. Они используют расширение файла .webp

Существует несколько вариантов изображений WebP, один из которых использует сжатие с потерями и сопоставим с изображениями JPEG, но с размером файла на 25-34% меньше . Изображения с потерями в WebP также поддерживают прозрачность, чего не могут делать JPEG.

Другой – формат без потерь WebP, который похож на формат изображения PNG, но с размером файла на 26% меньше .

Изображения WebP также универсальны, потому что они имеют возможности GIF, JPEG и PNG в одном формате. Вы сможете оптимизировать и упростить. Если это не вызывает радости, ничего не будет.

Вот краткий обзор функциональности

WebP поддерживает следующее:

  • Анимация
  • Сжатие без потерь
  • Сжатие с потерями
  • Прозрачность альфа-канала

Это означает, что вы можете конвертировать PNG, GIF и JPEG в один удобный формат, чтобы получить преимущества в производительности.

Для непосредственного сравнения различных форматов файлов, проверьте этот пост . Не забудьте получить загружаемый шпаргалку, пока вы на нем.

Бесплатный WebP

Теперь плохие новости. Не все браузеры поддерживают изображения WebP . Но это история возвращения помните? Mozilla поднялась на борт в декабре 2018 года , так всего несколько месяцев назад, и дала изображениям WebP столь необходимый импульс. Сейчас мы в основном ждем Safari, хотя Internet Explorer и Firefox для Android также пока не поддерживают WebP.

Тем не менее, с таким гигантом, как Google, стремящимся сделать Интернет быстрее и поддержать проект, вполне вероятно, что будущее за изображениями WebP.

Настоящий тонкий

Фактически, если вы недавно использовали Google PageSpeed ​​Insights , вы, возможно, заметили сообщение о возможности « Служить изображениям в форматах следующего поколения ». Это способ Google подтолкнуть вас к принятию изображений WebP. (Если в Google PageSpeed ​​Insights появляется сообщение «изображения правильного размера», попробуйте масштабировать изображения .)

Как добавить изображения WebP в WordPress

Если вы хотите быть первопроходцем и использовать изображения WebP в WordPress, вы также заметите, что медиатека WordPress не позволяет загружать изображения WebP по соображениям безопасности. Не позволяйте этому пугать вас. Это не ситуация SVG . Сайт WordPress разрешает использование изображений WebP, и вы можете включить эту функцию и на своем сайте WordPress.

Жаль не жаль

Существует несколько способов обойти эти проблемы раннего внедрения в WordPress, чтобы вы могли начать использовать изображения WebP. Для этого нам понадобится решение, которое будет:

  1. Используйте конвертер WebP для преобразования существующих изображений в медиатеке в WebP, а также для будущих загрузок
  2. Уметь определять, поддерживает ли браузер посетителя изображения WebP
  3. Служите изображениям WebP, если они поддерживаются, или устаревшим форматам файлов, таким как PNG или JPEG, если это не так

Оповещение о спойлере: если вы не хотите проходить через все эти шаги и сталкиваться с проблемами изменения файлов вашего сайта и оптимизации ваших изображений, Smush Pro – это универсальное решение, которое может конвертировать ваши изображения в WebP в WordPress и обслуживайте их до совместимых браузеров с помощью нескольких переключателей. Вы можете получить бесплатную пробную версию, чтобы проверить преимущества производительности, прямо здесь.

Преобразование изображений в WebP для WordPress

Хотя вы можете конвертировать изображения в форматы следующего поколения перед загрузкой в ​​медиатеку WordPress, это не практично, если у вас много изображений.

Если вам нужно пойти по этому пути (возможно, вы хотите проверить производительность различных типов изображений), вы можете использовать конвертер WebP, такой как image.online-convert . Вы просто загрузите файл JPEG, PNG или GIF, подождите, пока он создаст WebP, а затем загрузите новое изображение.

Один вниз, тысяча, чтобы пойти

Adobe Photoshop по умолчанию не экспортирует файлы в WebP, но вы можете добавить эту функцию с помощью плагина . Это не то же самое, что плагин WordPress. Это плагин, который вы загружаете и добавляете в папку Adobe Photoshop на вашем компьютере.

Вы также можете загрузить и установить WebPonize для Mac  или Webpconv для Windows . Оба могут делать преобразования JPEG в WebP или PNG в WebP.

Для изображений WebP WordPress вы можете использовать SFTP для загрузки файлов WebP прямо в папку загрузки, минуя медиа-библиотеку.

Для удобства вы также можете разрешить WebP в медиатеке WordPress , изменив файл функций вашего сайта.

Массовое преобразование изображений WebP для WordPress

Если у вас есть зрелый сайт с большим количеством изображений для конвертации, вам понадобится более качественный инструмент, чтобы вы могли конвертировать изображения в форматы следующего поколения.

Вы можете использовать плагин, такой как Smush Pro, для предоставления WebP-версий всех ваших изображений с ее CDN. Smush оставляет ваши исходные изображения нетронутыми и выполняет преобразование перед передачей изображения. Это означает, что CDN Smush Pro не изменяет ваши изображения напрямую и не наносит им никакого вреда. Если вы отключите опцию преобразования webp, сервер больше не будет конвертировать ваши изображения в WebP, и ваш сайт вернется к исходному формату файла, который использовался при загрузке.

Smush Pro также дает вам возможность конвертировать изображения в другие папки, чтобы вы могли оптимизировать фоновые изображения и иконки вашей темы, например.

Вы также можете использовать командную строку. 

Как обслуживать изображения в форматах следующего поколения

Некоторые плагины для оптимизации изображений только конвертируют ваши изображения в формат WebP, но не несут ответственности за предоставление нужного изображения вашим посетителям. Для этого вам, возможно, придется использовать дополнительный плагин или выполнить одно из следующих действий.

Smush Pro заботится об обоих: конвертирует в формат WebP в WordPress и предоставляет его совместимым браузерам, чтобы вы могли пропустить всю эту ерунду.

1. Используйте JavaScript для определения поддержки WebP

Вы можете сделать это, написав свой собственный код, который пытается декодировать изображение WebP. Если тест пройден успешно, вы можете отправить дополнительные изображения WebP. 

Вы также можете использовать библиотеку JavaScript, такую ​​как Modernizer, которая почти так же обнаруживает поддержку WebP .

Тестирование реальных возможностей браузеров также избавляет вас от необходимости переписывать код, когда несовместимые браузеры начинают поддерживать WebP. Так, например, когда Safari поддерживает изображения WebP и проходит тест на декодирование WebP, пользователи Safari будут получать изображения WebP без необходимости переписывать логику кода, чтобы включить Safari.

2. Используйте браузер, чтобы принять заголовки

Браузер посетителя отправит заголовок запроса «принять», указывающий, какие форматы изображений он будет принимать с веб-сервера ( love, Firefox ).

Если вы когда-нибудь заказывали еду у друга, вы сделали что-то подобное, когда сказали им принести вам макароны, но ничего с креветками, потому что у вас аллергия. В этой аналогии ваш друг – сервер, а вы – браузер, который указывает, что вы примете.

Если браузер указывает, что он принимает изображения WebP, веб-сервер знает, что он может безопасно отправлять WebP.

Это метод, используемый Smush Pro CDN для определения того, какие браузеры будут принимать изображения WebP.

3. Измените файл доступа к гипертексту (.htaccess) в WordPress.

Таким образом, ваш файл .htaccess находится в корневом каталоге и является уникальным файлом по нескольким причинам:

  1. Он начинается с точки (.), Означающей, что это скрытый файл. Вы не увидите его, если не сделали скрытые файлы видимыми
  2. У него нет расширения файла
  3. Если вы допустите ошибку при редактировании, ваш сервер может серьезно работать со сбоями, поэтому редактируйте его, только если вы знаете, что делаете!

В WordPress этот файл обычно используется для перезаписи URL. В этом случае URL-адрес изображения изменяется и добавляется расширение .webp.

Вот как обычно выглядит файл .htaccess в WordPress

В коде Vincent Orback на GitHub , например, файл .htaccess изменяется. URL-адреса изображений JPEG и PNG изменяются, если в одной папке есть версия WebP и если браузер поддерживает WebP. В этом случае ответственность за правильное отображение изображения ложится на веб-сервер Apache.

4. Обслуживание нескольких размеров и форматов с HTML 5

Одним из лучших способов предоставления изображений WebP является использование браузера для выбора лучшего изображения и использование элемента HTML5 для передачи различных изображений, доступных для выбора браузером . Вы можете использовать этот элемент не только для представления различных форматов изображений, но и для мобильных устройств и устройств Retina разных размеров. 

Как обслуживать изображения следующего поколения с помощью Smush Pro

Если это над вашей головой, есть более простой способ конвертировать ваши изображения в WebP и предоставлять их совместимым браузерам с помощью Smush Pro.

Сначала вам нужно активировать Smush Pro CDN. В настройках Smush, перейдите в раздел CDN и нажмите Get Started кнопку.

Smush CDN входит в состав Smush Pro

После активации CDN прокрутите вниз до преобразования WebP в настройках CDN и включите.

Ну это было легко

Перейти к оптимизации

Быть первопроходцем не без трудностей, поэтому мы упростили начало работы с WebP без всякой драмы. Это только вопрос времени, когда изображения WebP станут нормой, так что вы можете начать.

Раздутые изображения часто ответственны за снижение скорости вашей страницы. Ваши посетители ожидают большие красивые изображения, которые будут видны на их огромных устройствах Retina, а также хотят, чтобы они загружались мгновенно. Изображения WebP могут помочь вам достичь этой высокой планки.

Если вам нужна помощь в оптимизации изображений, ознакомьтесь с другими нашими публикациями по выбору правильного формата изображения и масштабированию изображений . И обязательно попробуйте Smush Pro, если вы еще этого не сделали. Мы добавили много новых функций, таких как поддержка WebP, чтобы вы могли оставаться на переднем крае оптимизации изображений.

Если перед Вами часто встречается проблема, что служба узла грузит диск, то возможно дело в Superfetch. Узнайте, как решить проблему на нашем сайте.

Did you find apk for android? You can find new Free Android Games and apps.
Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0