WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Шаблоны сайтов на русском

[РЕШЕНО 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 4 мес назад

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

0
kolshix
4 месяца назад 512
  • 0

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

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

    kolshix 4 мес назад

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

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

    воспользовался кодом ниже для разграничения вывода .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 4 мес назад

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

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

    kolshix 4 мес назад

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

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