Уменьшить размер изображения

194

27 декабря 2018, 12:10

Изображение, которое отправляется, допустим 1600x800 пикселе, с нашего сервера на html страницу - отправляется как файл 1600x800 и уж потом благодаря CSS обретает размеры 600x800, 432x222 и т.д.

Как сделать так, чтобы сервер "уменьшал изображение" до нужного в CSS и присылал на сервер изображение нужного размера?

Вопрос возник после любопытной проверки страницы сайта через www.gtmetrix.com и PageSpeed Insight, где мне писали на каждом из них https://***.jpg s resized in HTML or CSS from 1600x800 to 255x127. Serving a scaled image could save 43.0KiB (97% reduction). и т.д.

Ответ с изменением изображения вручную не принимается. Стоит представить, что если надо выгрузить на страницу 1000 картинок. Каждую из них не сможешь отредактировать

Answer 1

Вам нужно сделать так, чтобы в html-коде при запросе картинки серверу передавались ее размеры, например: <img src="//site.com/img/image.jpg?w=432&h=222"> Далее нужно для папки site.com/img настроить .htaccess (или что-то иное, в зависимости от сервера) так, чтобы любом обращении к этой папке запускался скрипт, задача которого распарсить запрос к серверу и запустить некий софт или плагин (не знаю в какой форме они существуют), который выполнит ресайз вашей графики. Общий принцип такой.

зы: Существует софт для десктопа, который может выполнять операции над графикой в пакетном режиме, т.ч. обработать по определенному правилу 1000 картинок - проблем нет. Для win это imbatch например. Другое дело, что одна и так же картинка лежит на сервере в нескольких размерах и жрет место...

Answer 2

Не самый лучший вариант, но пишется относительно быстро, сервер почти не нагружает и идеально подходит для тех мест, где картинки тянутся "автоматически" (каталоги, галереи, etc)

Создаете php обработчик для картинок и папку для складирования кешированных картинок

    public static function resizeImage($imgPath, $width, $height="")
    {
        //генерируйте имя картинки на свой вкус
        $path = "/path/to/cahched/image" . $width . "_" . $imgName;
        $fullPath = $_SERVER['DOCUMENT_ROOT'] . $path;
        if (file_exists($fullPath))
        {
            return $path;
        }
        //Пишите логику резайза любым удобным вам способом
        return $path;
    }

Далее на страницу вставляете изображение таким способом:

<picture>
 <source srcset="<? resizeImage("/image.jpg", 300) ?>" media="(min-width: 600px)">
 <source srcset="<? resizeImage("/image.jpg", 600) ?>" media="(min-width: 900px)">
 <img src="/image.jpg" alt="MDN">
</picture>