Сжатие и изменение размера изображений для Интернета

Question

Так что в настоящее время я создаю веб-сайт с использованием PHP-интерфейса и полимерного интерфейса. Клиент хочет иметь возможность получать новости для своих событий. Для этого я хочу преобразовать все изображения в webp и создать несколько разных размеров, чтобы я мог быстро их обслуживать в разных браузерах (Mobile, Tablet, Desktop и т. Д.). Однако я не смог найти хороший способ сделать это в PHP или JS. Squoosh отлично подходит для статических ресурсов, но не для контента, созданного пользователем. Любая помощь приветствуется!

Answer 1

PHP имеет функции для работы с изображениями webp. Попробуй это.

<?php
$im = imagecreatefromstring(file_get_contents('path/to/image.jpg')); // Create image identifier
imagewebp($im, 'path/to/image.webp'); // Generate webp image and save to location
imagedestroy($im); // Free up image identifier
?>

Answer 2

Я очень рекомендую использовать Adobe Photoshop. При этом вы можете вручную сжимать / изменять размер изображений или отправлять их в пакетном режиме.

Answer 3

Я не знаю, есть ли у вас доступ к серверу, но одним из способов может быть вызов ImageMagick из PHP. PHP должен взаимодействовать с сервером, что может быть опасно, поэтому имейте это в виду.

Насколько мне известно, ImageMagick не поддерживает webm, но я уверен, что вы поняли эту идею.

Если вы не хотите, чтобы PHP взаимодействовал с самим сервером, вы также можете сканировать неконвертированные / измененные изображения, а затем конвертировать их. В Linux это может быть: find ./ -name "*.jpg" -exec CONVERT_FUNCTION{} \;

Answer 4

Изменение размера должно быть обязательно сделано на стороне сервера. То, что вы можете сделать, это использовать srcset а также sizes Атрибуты тега изображения для оптимизации используемой версии:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />

(непосредственно из документации Mozilla)

Answer 5

Для изменения размера и сжатия изображения вам понадобится библиотека изображений, установленная с вашим PHP, например ImageMagick или GD.

Вы можете написать свою собственную функцию изменения размера, как показано на /questions/24854056/izmenit-razmer-izobrazheniya-v-php/24854080#24854080, но вы должны быть осторожны с типами изображений, поскольку они могут иметь свою собственную функцию для каждого типа.

Возможно, более простой способ изменить размер — использовать пакет обработки изображений. https://image.intervention.io/v2/api/resize (для этого также необходимо установить GD или IamgeMagick):

      // resize image to fixed size
$img->resize(300, 200);

// resize only the width of the image
$img->resize(300, null);

// resize only the height of the image
$img->resize(null, 200);

// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

Используя эту библиотеку, вы также можете сжать изображение, используя функцию кодирования или сохранения:

https://image.intervention.io/v2/api/encode

https://image.intervention.io/v2/api/save

      // open and resize an image file
$img = Image::make('public/foo.jpg')->resize(300, 200);

// save file as jpg with medium quality
$img->save('public/bar.jpg', 60);

Вы также можете использовать API tinypng для сжатия изображений: https://tinypng.com/developers , он сжимает jpg, png и WebP и предоставляется бесплатно, если вы масштабируете 500 изображений в месяц.