0

Изображение, которое отправляется, допустим 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 картинок. Каждую из них не сможешь отредактировать

10
  • может gzip настроить ? 16 сен 2018 в 0:05
  • @НикитаФаст это сжимание самого изоражение. А я про уменьшение самого размера) 16 сен 2018 в 1:23
  • тогда ffmpeg почитайте в сети как им пользоваться, сработает если хостинг не shared 16 сен 2018 в 2:27
  • 1
    @AlexanderProkoshev да да точно ..прошу прощения ... но я им фотки тоже обрабатывал но в линуксе 16 сен 2018 в 9:37
  • 1
    @AlexanderProkoshev я в смысле слайдшоу делал ... 16 сен 2018 в 9:43

2 ответа 2

0

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

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

4
  • Ужасы какие-то. И при каждом открытии страницы оно будет постоянно запускать скрипт на ресайз? 15 сен 2018 в 22:27
  • при каждом запросе графики в нужном размере. серверу будет сложновато, но вы что предлагаете? 15 сен 2018 в 22:32
  • 1
    Я предлагаю делать, как делает большинство - на сервере хранить все варианты и отдавать нужное. 15 сен 2018 в 22:32
  • Ну, автор попросил не предлагать такое. Хотя место наверно все же дешевле производительности. Можно дополнительно задействовать кеширование или ресайзнутый файл хранить определенное время после последнего запроса. 15 сен 2018 в 22:35
0

Не самый лучший вариант, но пишется относительно быстро, сервер почти не нагружает и идеально подходит для тех мест, где картинки тянутся "автоматически" (каталоги, галереи, 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.