[РЕШЕНО 99%] Работа с .webp — как сохранить прозрачность ??
как сохранить прозрачность с PNG в WEBP (Альфаканал) ??
[Проверил на другом сервере , прозрачность работает, в чем проблема не могу знать]
[Конечный результат в примере 3]
WP с .webp - дружит кое как, он только загружает картинки и всего, не обрабатывает, не меняет размеры, не создает миниатюры. Посмотрел уровень сжатия .webp, и мне очень понравилось, особенно мне важна прозрачность, мне нужно избавится от грамостких .PNG - вот и посмотрел в сторону этого формата.
// add_filter('wp_generate_attachment_metadata', 'custom_crop'); function custom_crop($metadata) { $uploads = wp_upload_dir(); $file = path_join( $uploads['basedir'], $metadata['file'] ); // original image file list( $year, $month ) = explode( '/', $metadata['file'] ); $target = path_join( $uploads['basedir'], "{$year}/{$month}/".$metadata['sizes']['medium']['file'] ); // intermediate size file $image = imagecreatefromjpeg($file); // original image resource $image_target = wp_imagecreatetruecolor( 44, 44 ); // blank image to fill imagecopyresampled($image_target, $image, 0, 0, 25, 15, 44, 44, 170, 170); // crop original imagejpeg($image_target, $target, apply_filters( 'jpeg_quality', 90, 'image_resize' )); // write cropped to file return $metadata; }
Решение:
1 Проверка конвертации:
не работает imagewebp() у меня на версии 5.3, на 5.6 работает.
2 Создал пример для создания миниатюр
Пример 1 создание дубля оригинала
add_filter('wp_generate_attachment_metadata', 'custom_webp_thumb'); function custom_webp_thumb($metadata) { // получение имени картинки и полного серверного пути $uploads = wp_upload_dir(); $file = path_join( $uploads['basedir'], $metadata['file'] ); // original image file $image= imagecreatefromjpeg($file); // Save the image // (картинка,полный путь для сохранения, качество) imagewebp($image, '/home/admin/web/'); return $metadata; }
Пример 2 создание миниатюры
add_filter('wp_generate_attachment_metadata', 'custom_webp_thumb'); function custom_webp_thumb($metadata) { // Create a blank image and add some text $uploads = wp_upload_dir(); // серверная папка загрузок $path_parts = pathinfo($metadata['file']); // промежуточные папки по годам и месяцам ($path_parts['dirname']) = 2018/10 $file = path_join( $uploads['basedir'], $path_parts['dirname'].'/'. $metadata["sizes"]["medium"]["file"] ); // original image file $image = imagecreatefrompng($file); // или imagecreatefromjpeg // Save the image imagewebp($image, '/home/ih208296/nuje.ru/wp-content/uploads/2018/10/'.$metadata["sizes"]["medium"]["file"].'.webp'); // unlink($file); return $metadata; }
Пример 3 - Конвертация только для PNG и размера медиум
add_filter('wp_generate_attachment_metadata', 'custom_webp_thumb'); function custom_webp_thumb($metadata) { $mime_type = $metadata["sizes"]["medium"]["mime-type"]; if ( $mime_type == "image/png" ){ // Получаем серверный путь и путь к файлу $uploads = wp_upload_dir(); // серверная папка загрузок $path_parts = pathinfo($metadata['file']); // промежуточные папки по годам и месяцам ($path_parts['dirname']) = 2018/10 $file = path_join( $uploads['basedir'], $path_parts['dirname'].'/'. $metadata["sizes"]["medium"]["file"] ); // original image file $image = imagecreatefrompng($file); // или imagecreatefromjpeg imagepalettetotruecolor($image); imagealphablending($image, false); imagesavealpha($image, true); // Корректировка имен и сохранение $new_webp_image = preg_replace("/\.png$/", ".webp", $metadata["sizes"]["medium"]["file"]); imagewebp($image, $uploads['basedir'].'/'. $path_parts['dirname'].'/'. $new_webp_image); $metadata["sizes"]["medium_webp"] = Array( "file" => $new_webp_image, "width" => $metadata["sizes"]["medium"]["file"]["width"], "height" => $metadata["sizes"]["medium"]["file"]["height"], "mime-type" => "image/svg+xml" ); // unlink($file); // удалить оригинальную миниатюру // проверка переменных // $q= serialize($uploads['basedir']. $path_parts['dirname'].'/'. $new_webp_image); // file_put_contents( '/home/admin/web/****.com/public_html/wp-content/uploads/2018/' . '_convert_image', $q); } return $metadata; }
проверка и вывод на странице
$thumb_id = get_post_thumbnail_id($post->ID); $metadata = wp_get_attachment_metadata($thumb_id); if ( isset( $metadata['sizes']['medium_webp'] ){ .... }
Да у этого формата просто потрясающе маленький размер. И пока неполная поддержка. Тема интересная держи в курсе
Нет смысла особо морочится над этим форматом... тк его пока только хром поддерживате если не ошибаюсь, никаких плюшек это не дает
И еще тут http://php.net/manual/ru/function.imagewebp.php видно что это функция модуля GD так что он должен быть установлен на сервере.
Для меня это спасение для этой страницы
воспользовался кодом ниже для разграничения вывода .WEBP или .PNG
Ну, судя по этим данным 72% юзеров используют хром и другие браузеры, которые поддерживают этот формат. А 72% это уже не шутки...
Подробнее (caniuse)
ну с гуглом трудно состязаться , особенно если ещё идея формата отличная:
У WebP есть такой нюанс - не все браузеры его поддерживают.
К примеру, некоторые версии iOS Safari, обычный Safari, IE - не поддерживают WebP.
https://caniuse.com/#feat=webp
Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
И отдавать нужную версию в зависимости от браузера.
А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла.
У сервиса optipic я недавно заметила новый функционал, в который это все уже заложено в коробку.
https://optipic.io/ru/webp/wordpress/
Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
Получается совсем все просто и красиво, да и недорого))