Nginx - изменение размера картинок на примере GHOST

Поставил Ghost, особо не замечал, но тут стал замечать что при большом количестве картинок они очень уж туго подгружаются в браузере, боялся что с сервером что-то не так, а оказалось беда в Ghost, он прямо в оригинальном размере в статьях картинки размещает. Раньше я мало картинок вставлял и не замечал, а тут заметил...

Как же быть? Вспоминаем то что у нас всё идет через NGINX

Проверим что наш nginx собран с нужным модулем, для этого в консоли

nginx -V

Там должен быть параметр сборки

 --with-http_image_filter_module

За это можно особо не париться, в свежих дистрибутивах с этим всё хорошо

Но вот в том же Debian выдаст ошибку

nginx: [emerg] unknown directive "image_filter"

Потомучто нужно установить пакет

apt install libnginx-mod-http-image-filter

А если такой пакет уже утсноавлен, то нужно в самом верху /etc/nginx/nginx.conf прописать

load_module modules/ngx_http_image_filter_module.so;

Открываем конфиг nginx, где прописан наш сайт

У нас там есть что-то типа такого

        location /
        {
        access_log off;
        proxy_pass http://127.0.0.1:3001;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header Nginx-Https "on";
        proxy_connect_timeout 2s;
        }

Перед этим еще один раздел location создадим для картинок (обратите  внимание на порт и на адрес для прокси)

Но у нас сервис находится на локальном сервере, поэтому для картинок не будем ничего проксировать, а сразу прокинем папку локальную

  location ~* ^/content/images/(.+\.(?:gif|jpe?g|png))$                      
        {                                                                    
        set $width "-";                                                      
        set $height "-";                                                     
        set $quality "95";                                                   
        if ($arg_w != '')                                                    
        {                                                                    
         set $width $arg_w;                                                  
        }                                                                    
        if ($arg_h != '')                                                    
        {                                                                    
         set $height $arg_h;                                                 
        }                                                                    
        if ($arg_q != '')                                                    
        {                                                                    
         set $quality $arg_q;                                                
        }                                                                    
        #proxy_pass http://localhost:2368;                                   
        #proxy_set_header X-Forwarded-Proto https;                           
                                                                             
        alias /var/www/mysite/content/images/$1;                   
        access_log off;                                                      
        expires 10d;                                                         
        image_filter resize $width $height;                                  
        image_filter_jpeg_quality $quality;                                  
 }                                                                           

Перезагрузим nginx

Тепепь, если открыть любую картинку и добавить к адресу например ?w=100, то увидим что она сразу меньше стала!!!

Если выдает ошибку 415 Unsupported Media Type, значит ваша картинка ну очень огромная, я с таким сталкивался, нужно прописать

image_filter_buffer 6M;

Но тут будет конечно не супер, можете всю оперативку скушать на сервере с такими размерами...

Дальше нужно модифицировать SRC в шаблонах...

Вот тут я запнулся, пришел к выводу, что Ghost нужно или конкретно патчить, или же переходить на альтернативный продукт, жаль что я не имею опыта в NodeJS, но придется его получить! Когда время будет - вернусь к этому вопросу.

Линки

NGINX Docs | Image-Filter
Crop, resize, rotate, and perform other transformations on GIF, JPEG, and PNG images, with the Image-Filter dynamic module supported by NGINX, Inc.
Показать комментарии