Як пераўтварыць у WebP усе выявы на Concrete5

Чаму варта выкарыстоўваць WebP для Concrete5?

Выкарыстанне Webp вырашае праблему "Падаваць выявы ў фарматах наступнага пакалення" у Google Pagespeed Insights.

Карацей кажучы, WebP сціскае файл лепш, пры іншых роўных умовах, чым старыя фарматы (png і jpeg), што азначае, што ён займае менш месца на хостынгу і хутчэй загружаецца ў браўзеры пры праглядзе старонкі.

Укараненне WebP актыўна прасоўвае Google - яны даюць такую статыстыку:

• WebP сціскае выявы без страт на 26% лепш, чым PNG.
• WebP сціскае выявы са стратамі лепш, чым JPEG, на 25-34% з такім жа індэксам структурнага падабенства (SSIM)
• WebP падтрымлівае празрыстасць без страт (вядомую як альфа) з павелічэннем памеру ўсяго на 22%.

Калі браўзер наведвальніка не падтрымлівае WebP, CDN верне стары фармат (png / jpeg), але сціснуты (аптымізаваны для Інтэрнэту)

Што такое сціск малюнкаў

Аптымізацыя выявы - гэта спецыяльная апрацоўка графічнага файла з мэтай мінімізацыі яго памеру без страты візуальнай якасці.

Для выканання гэтай працэдуры існуе вялікая колькасць даволі складаных алгарытмаў. Аднак усе яны заснаваныя на адной і той жа аснове - усе сэрвісныя дадзеныя там (напрыклад, назва праграмы, якая захоўвае файл і г.д.) неабходна выдаліць з графічнага файла, а таксама з дапамогай спецыяльных праграм аб'яднаць / гладкія падобныя колеры.

У выніку мы атрымліваем той жа малюнак, які візуальна не змяніўся. Аднак аб'ём (вага) гэтага файла ў байтах будзе значна меншы за зыходны. Калі гэтая апрацоўка праведзена правільна, файл выявы можна паменшыць да 98% без страты якасці выявы.

Гэта азначае, што пасля аптымізацыі карцінкі на старонках сайта будуць загружацца ў разы хутчэй.

Што будзе аптымізаваць выявы для вашага сайта

• Эканомце месца на дыску.
• Паскорыць загрузку старонкі.
• Мінімальная загрузка сервера.
• Павялічыць канверсіі.
• Лепшы рэйтынг сайта для вынікаў пошуку.

Даказана, што паскарэнне вэб-сайта можа палепшыць паводніцкія фактары, а таксама павялічыць канверсію вэб-сайта (павялічыць продажы). Чым даўжэй будзе загружацца старонка сайта, тым меншая колькасць кліентаў зможа здзейсніць там пэўныя мэтавыя дзеянні. Калі ваш сайт у інтэрнэце будзе працаваць недастаткова хутка, у вас ёсць усе шанцы ўпусціць свой патэнцыйны даход. Паскарэнне інтэрнэт-рэсурсу дасць магчымасць палепшыць канверсію і за кошт гэтага значна павялічыць даход і прыцягнуць больш кліентаў.

Перавагі OptiPic

• Штомесячных плацяжоў няма.
• Поўная аўтаматызацыя.
• Бясплатная дапамога з падключэннем.
• Для падключэння і выкарыстання сэрвісу не трэба мець спецыяльных навыкаў у праграмаванні або адміністраванні.
• У сістэме няма абмежаванняў на памер выявы.
• Дружная тэхнічная падтрымка.

Як аптымізацыя малюнкаў для Concrete5 можа паскорыць працу сайта?

Старонка любога сайта часцей за ўсё складаецца з:

• малюнкі;
• html-код (тэкставы змест, макет, разметка);
• відэа;
• скрыпты javascript з логікай, якая запускаецца з браўзера;
• файлы css са стылямі старонак.

Такі элемент, як малюнак, займае большую частку ўсяго аб'ёму на старонках сайта і з'яўляецца самай «цяжкай» часткай старонак. Памяншэнне (аптымізацыя) малюнкаў, несумненна, істотна паскорыць загрузку любога інтэрнэт-рэсурсу.

 

Адпаведна, калі змяніць (паменшыць) памер малюнкаў, усе старонкі сайта пачнуць загружацца значна хутчэй.

Сцісканне малюнкаў на сайце дасць магчымасць паменшыць іх аб'ём да 75-98%, не страціўшы іх візуальнай якасці.

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

; Automatically add files before PHP document.
; http://php.net/auto-prepend-file
auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php

# OptiPic CDN: insert it into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    resolver 8.8.8.8; # Google DNS
    set $cdn_host_value "cdn.optipic.io";
    set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value
    if ($arg_no_optipic) {
        set $from_optipic "no";
        set $cdn_host_value $host;
    }
    
    proxy_redirect     off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $cdn_host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://$cdn_host_value;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}

#---------------------------------------
# OptiPic CDN 
# Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module`
# Add new 'IfModule mod_rewrite.c' block or inject into exist one
# Get support: https://optipic.io/get-free-help/?cdn=1
<IfModule mod_rewrite.c>
    RewriteEngine On
    SSLProxyEngine On

    RewriteCond %{QUERY_STRING} !no_optipic=
    RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P]
</IfModule>
#----------------------------------------