php jpeg to webp

Php jpeg to webp

Convert JPEG & PNG to WebP with PHP

This library enables you to do webp conversion with PHP. It supports an abundance of methods for converting and automatically selects the most capable of these that is available on the system.

The library can convert using the following methods:

In addition to converting, the library also has a method for serving converted images, and we have instructions here on how to set up a solution for automatically serving webp images to browsers that supports webp.

News: 2.6.0 has just been released

Require the library with Composer, like this:

Here is a minimal example of converting using the WebPConvert::convert method:

The WebPConvert::convert method comes with a bunch of options. The following introduction is a must-read: docs/v2.0/converting/introduction-for-converting.md.

If you are migrating from 1.3.9, read this

Serving converted images

The WebPConvert::serveConverted method tries to serve a converted image. If there already is an image at the destination, it will take that, unless the original is newer or smaller. If the method cannot serve a converted image, it will serve original image, a 404, or whatever the ‘fail’ option is set to. It also adds X-WebP-Convert-Log headers, which provides insight into what happened.

Example (version 2.0):

The old introduction (for 1.3.9) is available here: docs/v1.3/serving/convert-and-serve.md

The library can be used to create a WebP On Demand solution, which automatically serves WebP images instead of jpeg/pngs for browsers that supports WebP. To set this up, follow what’s described in this tutorial (not updated for 2.0 yet).

Projects using WebP Convert

CMS plugins using WebP Convert

This library is used as the engine to provide webp conversions to a handful of platforms. Hopefully this list will be growing over time. Currently there are plugins / extensions / modules / whatever the term is for the following CMS’es (ordered by market share):

Other projects using WebP Convert

webp-convert-cloud-service A cloud service based on WebPConvert

webp-convert-concat The webp-convert library and its dependents as a single PHP file (or two)

Supporting WebP Convert

Bread on the table don’t come for free, even though this library does, and always will. I enjoy developing this, and supporting you guys, but I kind of need the bread too. Please make it possible for me to have both:

Persons who contributed with coffee within the last 30 days:

About

Convert jpeg/png to webp with PHP (if at all possible)

Источник

imagewebp

(PHP 5 >= 5.4.0, PHP 7, PHP 8)

imagewebp — Вывод изображения WebP в браузер или файл

Описание

Выведет или сохранит WebP-версию данного изображения ( image ).

Список параметров

quality варьируется от 0 (худшее качество, меньший размер файла) до 100 (наилучшее качество, большой файл).

Возвращаемые значения

Возвращает true в случае успешного выполнения или false в случае возникновения ошибки.

Список изменений

Примеры

Пример #1 Сохранение WebP-файла

User Contributed Notes 6 notes

To convert a PNG image to Webp, we can do this:

// Image
$dir = ‘img/countries/’ ;
$name = ‘brazil.png’ ;
$newName = ‘brazil.webp’ ;

WebP is not yet supported by Safari, although they are experimenting with it.

Check out https://caniuse.com/#search=webp for the latest support information.

Safari on mac now has limited support (limited to Safari 14+ on Big Sur or later)

Safari on iOS 14.4 and higher has full support

WebP is a great file format, but it’s basically supported only by Chrome. For WebP files with transparency it’s necessary to have PNG fallback for other browsers (otherwise it won’t work in iOS, Firefox, IE, etc.).

If you have pngquant 1.8 on your server (just get package from official pngquant website), then you can create small fallback images (with quality better than from PHP’s libgd):

// guarantee that quality won’t be worse than that.
$min_quality = 60 ;

// you don’t need move_uploaded_file().

Источник

Готовим WebP правильно

Хабр уже насыщен статьями на тему «нового» формата изображений WebP (описание, сравнение с JPEG2000, сравнение с BPG, использование, подключение на сайте). К сожалению, открытыми остаются вопросы: как правильно подключить WebP на сайте, чтобы «все работало», и насколько он лучше (меньше) PNG/JPEG. В этой заметке я буду отвечать на оба вопроса.

Предполагаю, что вы уже в курсе оптимизации изображений, умеете конвертировать изображения в WebP, понимаете разницу между использованием JPEG и PNG на сайте, знаете инструменты ExifTool, jpegtran, mozjpeg, JPEGrescan, optipng, pngcrush, pngwolf, zopflipng и TruePNG, а также различаете пастеризацию молока и постеризацию изображений.

Если все так — то переходим к сути.

Плюсы WebP

Во всех источниках упоминается существенное уменьшение размера изображений, что PNG, что JPEG, если их перекодировать в WebP. При этом перекодирование должно выполняться с сохранением качества. В Айри.рф уже три года используется автоматическая оптимизация изображений без потерь и с незначительными потерями (2 режима). Это позволяет достаточно точно сравнить, когда WebP выигрывает в сравнении с уже оптимизированными PNG (прогоняется через TruePNG, pngwolf и zopflipng) и JPEG (ExifTool, mozjpeg, перевод в png), а когда нет.

На тестовой выборке из 13 тысяч изображений WebP показал выигрыш относительно уже оптимизированных PNG и JPEG файлов на 31% (580 Мб против 837 Мб). WebP-файлы примерно на треть меньше уже оптимизированных аналогов JPEG и PNG. Здесь нужно оговориться, что перевод PNG в WebP выполняется без потерь (lossless), а перевод в JPEG выполняется с минимальными потерями (качество 100), это позволяет в автоматическом режиме отгружать WebP для всех браузеров, которые его понимают, без опасений что-то «поломать» у клиентов.

В подавляющем большинстве случаев выигрыш WebP относительно уже оптимизированных JPEG (mozjpeg) составлял не более 10%. Исключения были в тех случаях, когда из JPEG-файлов нельзя было безопасно вырезать EXIF-данные (в частности, палитру), и перевод их в WebP давал существенный выигрыш. Поэтому если вы создаете JPEG сразу по «нормальному» сценарию, то в большинстве случаев существенного выигрыша не предвидится. PNG-файлы даже после оптимизации относительно неплохо (30%) «теряют в весе», если перевести их в WebP.

Что важнее, относительно всех оптимизированных изображений только в 10% случаев (да, выборка из 13000 изображений — это было только 10% всех оптимизированных изображений) WebP «без потерь» давал выигрыш в размере. Для остальных 90% выигрыша не было (из них 75% — это JPEG файлы). Цифры еще могут быть обусловлены жестким подходом к оптимизации изображений без потерь: возможно, тонкая настройка WebP с «небольшими» потерями качества даст визуально «тот же результат», но будет меньше по размеру. К сожалению, в автоматическом режиме оценить все 130 тысяч изображений, чтобы понять, насколько в каждом конкретном случае сжатие с потерями может быть лучше, не представляется возможным. Сами изображения не представляют какой-либо закономерности: это фоновые картинки и галереи сотен сайтов.

Для справки, перевод PNG в WebP

Отличной иллюстрацией является изображение к статье. Исходный PNG занимал 15,6 Кб. После оптимизации и постеризации — 12,5 Кб. lossless webp из него — 8 Кб.

Реальное использование WebP

Если вы уже научились правильно конвертировать или сохранять изображения в WebP (тема для отдельной статьи), то остается проблема подключения WebP на сайте, которая уже поднималась здесь (игра стоит свеч, ибо Chrome браузеры уже составляют более 2/3 рынка). На стороне браузера возможны варианты с JavaScript (использование тега noscript, ymatuhin):

Источник

WebP вместо изображений в браузерах где он поддерживается

В данной статье приведены примеры как сделать подгрузку WebP вместо jpg и png в тех браузерах где он поддерживается.

Конвертация в WEBP через SSH

Самый быстрый способ – конвертировать изображения с помощью утилиты cwebp (если он установлен на сервере) через SSH.

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

Конвертация в WEBP в Windows

Если сайт очень редко обновляется, то можно выкачивать весь сайт по FTP, конвертировать изображение и закачать обратно.

Пакетно перекодировать изображения можно с помощью программы XnConvert.

PHP-скрипт

Еще один вариант конвертации – PHP-скрипт, который вызывается по URL на несуществующий файл *.webp, ищет в той же директории файл с расширением png или jpg и создает из него файл WebP.

Главное чтобы на хостинге была установлена библиотека GD версией не ниже 2.2.5, т.к. в более ранних версиях у WebP нет поддержки прозрачности при конвертации из PNG.

Посмотреть версию GD можно в phpinfo() :

auto-webp.php

Вывод на сайте

После выбора метода и генерации изображений встает вопрос о выводе их на сайте, специально для этого есть элементы

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

Но во всех браузерах работает и так:

Второй вариант – полная замена расширений в тегах если браузер передал в user agent что поддерживает WebP с помощью PHP буферизации и её функции обратного вызова.

Источник

Чиним генерацию WEBP на PHP

Баг генерации WEBP в PHP. Решаем при помощи костылей.

На днях добавил к блогу поддержку формата WEBP. Работать начало всё сразу, но без костылей не обошлось.
Каналы передачи данных становятся всё шире, скорости растут, а дух оптимизатора все никак не унимается. WEBP обещает выигрыш до 30% на размер файла по сравнению с JPG при примерно одинаковом количестве деталей. Проверено, так и есть.

Реализация WEBP на этом блоге

Сегодня, из всех браузеров, полноценно поддерживают WEBP только Chromium-подобные браузеры. Не очень-то и обширно, но радует, что крупные игроки один за одним сообщают о внедрении технологии в ближайшее время. Тем не менее, реализуя поддержку WEBP уже сегодня, мы получаем ощутимый прирост скорости загрузки. А по данным comss.ru, мы покрываем более 60% всех пользователей.

Как же быть с браузерами, не поддерживающими WEBP? Умные головы придумали тег

, а в нём теги с указанием типа изображения и пути к файлу. Браузеры сами решают, какое изображение они будут показывать. Например, Chrome выбирает WEBP. Современные браузеры корректно обработают эту конструкцию, а старые пропустят неизвестные теги. Особое внимание нужно обратить на атрибут type, в нем указывается mime-тип изображения.

Я был приятно удивлен, обнаружив поддержку WEBP в библиотеке php-gd. На стороне сервера за сохранение изображений отвечают следующие функции:

PHP ломает WEBP

Как и положено, у этого блога есть 2 сервера. На тесте стоит php 5.6.36, на проме php 5.6.37. Внеся все необходимые правки, я протестировал сайт на домашнем компьютере и обновил пром. Я был удивлен, изображения на проме не отображались, вообще, хотя на тестовом сервере работали без проблем.

В консоли хрома ошибок не было, более того Хром рапортовал о нормальной загрузке изображений.

Консоль хрома рапортовала о успешной загрузке изображений.

Я скачал сгенерированный WEBP-файл с блога и. файл отлично открылся в ACDSee. Сравнивая файлы прома и теста, я обнаружил несоответствие размеров для сгенерированных WEBP-файлов на сервере и на домашнем компьютере. Размер файлов отличался всего лишь в 1 байт.

Изображение с теста и прома. Размер файлов не совпадает.

Сдул пыль с HEX-редактора и полез смотреть, чего там не хватает. Оказалось, что промовкий PHP не дописывает 1 байт в конец файла, файл оказывается не валидным и Chrome не может его отобразить. Обновление пакетов php5.6 и php5.6-gd на проме не дало, ровным счётом, никаких результатов.

В конце файла отсутствует байт x00 Проблема невалидности WEBP.

Немного поисследовав структуру WEBP, я пришел к выводу, что все живые файлы всегда заканчиваются байтом x00, кроме того WEBP продолжает нормально работать, если добавить любое количество x00 в конец. Можете проверить сами, всё отлично работает:

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

Источник