Как реализовать конвертацию изображений в WebP на Opencart 2.x

WebP — это Формат изображений, который предложил Google в 2010 году. По началу этот тип изображений поддерживался очень небольшим количеством браузеров и поэтому вебмастера не сильно активно переходили на WebP.

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

Внедрение формата WebP в CMS Opencart 2

CMS Opencart по умолчанию не поддерживает WebP, менеджер изображений просто не видит этот формат.

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

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

Открываем файл:

/index.php

Данный файл лежит в корне сайта.

Находим строку:

<?php

После неё добавляем:

if (strpos($_SERVER['REQUEST_URI'],'.webp') !== false) {
    $file = pathinfo($_SERVER['REQUEST_URI']);
    $file = __DIR__.$file['dirname'].$file['filename'];
    if (!file_exists($_SERVER['REQUEST_URI'])) {
        if (file_exists($file.'.gif')) {
            $iimage = imagecreatefromgif($file.'.gif');
        } elseif ($file.'.png') {
            $iimage = imagecreatefrompng($file.'.png');
        } elseif ($file.'.jpg') {
            $iimage = imagecreatefromjpeg($file.'.jpg');
        } elseif ($file.'.jpeg') {
            $iimage = imagecreatefromjpeg($file.'.jpeg');
        } 
		if(!$iimage){
			exit('Error: Could not load image ' . $file . '!');
		}
        imagewebp($iimage, __DIR__.$_SERVER['REQUEST_URI']);
        header('Content-type:image/webp');
        imagewebp($iimage);
        die();

    } else {
        exit('Error: Could not load image ' . $file . '!');
    }
}

Открываем файл:

/system/library/response.php

Находим строчки:

public function setOutput($output) {
		$this->output = $output;
	}

Заменяем весь этот блок на: 

public function setOutput($output) {
		if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
		    $output = preg_replace('/\b.jpg\b/u', '.webp', $output);
			$output = preg_replace('/\b.png\b/u', '.webp', $output);
			$output = preg_replace('/\b.jpeg\b/u', '.webp', $output);
		}
		$this->output = $output;
	}

Ищем файл:

/system/library/image.php

Находим строки:

if ($this->mime == 'image/gif') {
				$this->image = imagecreatefromgif($file);
			} elseif ($this->mime == 'image/png') {
				$this->image = imagecreatefrompng($file);
			} elseif ($this->mime == 'image/jpeg') {
				$this->image = imagecreatefromjpeg($file);
			}

Меняем их на:

if ($this->mime == 'image/gif') {
				$this->image = imagecreatefromgif($file);
			} elseif ($this->mime == 'image/png') {
				$this->image = imagecreatefrompng($file);
			} elseif ($this->mime == 'image/jpeg') {
				$this->image = imagecreatefromjpeg($file);
			} elseif ($this->mime == 'image/webp') {
				$this->image = imagecreatefromwebp($file);
			}

В этом же файле ищем строки:

if (is_resource($this->image)) {
			if ($extension == 'jpeg' || $extension == 'jpg') {
				imagejpeg($this->image, $file, $quality);
			} elseif ($extension == 'png') {
				imagepng($this->image, $file);
			} elseif ($extension == 'gif') {
				imagegif($this->image, $file);
			}

Меняем их на:

if (is_resource($this->image)) {
			if ($extension == 'jpeg' || $extension == 'jpg') {
				imagejpeg($this->image, $file, $quality);
			} elseif ($extension == 'png') {
				imagepng($this->image, $file);
			} elseif ($extension == 'gif') {
				imagegif($this->image, $file);
			} elseif ($extension == 'webp') {
				imagewebp($this->image, $file);
			}

После открываем файл:

/catalog/model/tool/image.php

Находим строки: 

$image_new = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . '.' . $extension;

Перед ними добавляем: 

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
            $extension = 'webp';
        }

Получаем конструкцию:

$image_old = $filename;
		if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
            $extension = 'webp';
        }
		$image_new = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . '.' . $extension;

На версии php 5.4 нет поддержки webp. По этому убедитесь, что пользуетесь актуальной версией php перед тем, как внедрять данное решение на свой проект на CMS Opencart.

Подводим итог

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

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

Советую как можно быстрее переходить на современные форматы, особенно магазинам с большим количеством товаров. WebP заметно выигрывает перед другими форматами в размере (весе) и скорости загрузки. И не стоит забывать, что этот формат разработал Google и настоятельно рекомендует использовать на сайтах.

Чтоб не быть голословным, прикрепляю изображение с советом Pagespeed Insights по увеличению скорости сайта.

Вот что говорит сервис Гугла Pagespeed Insights: