javascript — сжатие и изменение размера изображений для Интернета
Так что в настоящее время я создаю веб-сайт с использованием PHP-интерфейса и полимерного интерфейса. Клиент хочет иметь возможность получать новости для своих событий. Для этого я хочу преобразовать все изображения в webp и создать несколько разных размеров, чтобы я мог быстро обслуживать их в разных браузерах (Mobile, Tablet, Desktop и т. Д.). Однако я не смог найти хороший способ сделать это в PHP или JS. Squoosh отлично подходит для статических ресурсов, но не для контента, созданного пользователем. Любая помощь приветствуется спасибо!
Решение
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
?>
Другие решения
Изменение размера должно быть обязательно сделано на стороне сервера. То, что вы можете сделать, это использовать 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)
Я очень рекомендую использовать Adobe Photoshop. При этом вы можете вручную сжимать / изменять размер изображений или отправлять их в пакетном режиме.
Я не знаю, есть ли у вас доступ к серверу, но одним из способов может быть вызов ImageMagick из PHP.
PHP должен взаимодействовать с сервером, что может быть опасно, поэтому имейте это в виду.
Насколько мне известно, ImageMagick не поддерживает webm, но я уверен, что вы поняли эту идею.
Если вы не хотите, чтобы PHP взаимодействовал с самим сервером, вы также можете сканировать неконвертированные / измененные изображения, а затем конвертировать их.
В Linux это может быть: find ./ -name «* .jpg» -exec CONVERT_FUNCTION {} \;