WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

[РЕШЕНО 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'] ){
  .... 
}
Заметки к вопросу:
Kama 5.5 лет назад

Да у этого формата просто потрясающе маленький размер. И пока неполная поддержка. Тема интересная держи в курсе smile

0
kolshix
5.5 лет назад 779
  • 0

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

    И еще тут http://php.net/manual/ru/function.imagewebp.php видно что это функция модуля GD так что он должен быть установлен на сервере.

    kolshix 5.5 лет назад

    Нет смысла особо

    Для меня это спасение для этой страницы

    воспользовался кодом ниже для разграничения вывода .WEBP или .PNG

    <?php
      $user_agent = $_SERVER["HTTP_USER_AGENT"];
      if (strpos($user_agent, "Firefox") !== false) $browser = "Firefox";
      elseif (strpos($user_agent, "Opera") !== false) $browser = "Opera";
      elseif (strpos($user_agent, "Chrome") !== false) $browser = "Chrome";
      elseif (strpos($user_agent, "MSIE") !== false) $browser = "Internet Explorer";
      elseif (strpos($user_agent, "Safari") !== false) $browser = "Safari";
      else $browser = "Неизвестный";
      echo "Ваш браузер: $browser";
    ?>
    Kama 5.5 лет назад

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

    Подробнее (caniuse)

    kolshix 5.5 лет назад

    ну с гуглом трудно состязаться , особенно если ещё идея формата отличная:

    • Великолепное сжатие
    • Небольшие потери в качестве при сжатии
    • Альфаканал
    • поддержка передовых браузеров
    Olgaal05 1.1 года назад

    У WebP есть такой нюанс - не все браузеры его поддерживают.
    К примеру, некоторые версии iOS Safari, обычный Safari, IE - не поддерживают WebP.
    https://caniuse.com/#feat=webp
    Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
    И отдавать нужную версию в зависимости от браузера.
    А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла.
    У сервиса optipic я недавно заметила новый функционал, в который это все уже заложено в коробку.
    https://optipic.io/ru/webp/wordpress/
    Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
    Получается совсем все просто и красиво, да и недорого))

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация