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

CDN OptiPic — простае рашэнне праблемы "Падаваць выявы ў фарматах наступнага пакалення"
184 рэцэнзіі
Паводле рэкамендацый
Google PageSpeed Insights
Лёгкае падлучэнне
за 5 хвілін
Бясплатная тэхнічная падтрымка
+ дапамога па ўстаноўцы
Smart WebP канверсія на лета
Што робіць OptiPic CDN, калі спрабуе запытаць у яго выяву:
  • Вяртае версію выявы WebP.
    калі браўзер падтрымлівае фармат WebP
  • Вяртае сціснутую версію без webp
    калі браўзер не падтрымлівае WebP
  • Рэагуе на мабільныя экраны
    калі выява адкрываецца з мабільнага
  • Кэш і паскарае загрузку
    зніжэнне нагрузкі ад вашага хостынгу
  • Абараняе вашыя выявы
    захаванне аўтарскіх правоў з дапамогай тэгаў EXIF і IPTC
  • Выкарыстоўвайце сваё ўласнае
    даменнае імя
    каб загрузіць выявы з img.domain.com і г.д
  • Lazy load
    малюнкі
    Выявы загружаюцца пры пракрутцы старонак
Пераўтварэнне ў Webp і сціск малюнкаў адбываецца ў фонавым рэжыме і не запавольвае адкрыццё малюнкаў у браўзеры.
Калі на момант запыту выявы аптымізаваная версія яшчэ не гатовая, зыходная версія вяртаецца без апрацоўкі.
Што атрымлівае аптымізацыя малюнкаў на сайце
  • Паскарэнне
    сайта
  • Паляпшэнне
    SEO
  • Павышэнне
    канверсіі
  • Павышэнне Google
    Pagespeed Insights

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

Выкарыстанне 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

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

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

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

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

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

 

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

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

Як падключыць OptiPic CDN да Laravel?

Варыянт #1: Універсальнае падключэнне праз PHP (бібліятэка GitHub)

URL-адрасы малюнкаў на сайце змяняюцца аўтаматычна. Дастаткова проста дадаць 1 радок у ваш .htaccess або php.ini.

Прыклад падлучэння праз .htaccess

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

Прыклад падлучэння праз php.ini

; 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
Бібліятэка на GitHub
бясплатная інтэграцыя па запыце

Варыянт #2: Універсальнае падключэнне праз проксі Nginx

URL-адрасы малюнкаў на сайце не мяняюцца. Толькі цяпер увесь трафік малюнкаў аўтаматычна пераходзіць да OptiPic CDN
# 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;
}
XXXXXX — Ідэнтыфікатар вашага сайта ў вашым акаўнце CDN OptiPic
Мы настойліва рэкамендуем вам праверыць правільнасць новай версіі канфігурацыі перад перазагрузкай nginx. Вы можаце зрабіць гэта з дапамогай каманды nginx -t.
Мяккая перазагрузка (перачытанне канфігурацый) Nginx можа быць па камандзе nginx -s reload

Дакументацыя для проксі nginx
Атрымайце бясплатную дапамогу ў падключэнні
Праверце, ці загружаецца выява праз OptiPic CDN
Атрымаць бясплатную інтэграцыю
нават па бясплатным тарыфе

Варыянт #3: Падключэнне праз .htaccess (проксі-сервер Apache)

URL-адрасы малюнкаў на сайце не мяняюцца. Толькі цяпер увесь трафік малюнкаў аўтаматычна пераходзіць да OptiPic CDN
#---------------------------------------
# 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>
#----------------------------------------
XXXXXX — Ідэнтыфікатар вашага сайта ў вашым акаўнце CDN OptiPic
Перад змяненнем .htaccess мы настойліва рэкамендуем вам зрабіць рэзервовую копію файла і пераканацца, што ў вас ёсць доступ да файла па FTP.
Атрымайце бясплатную дапамогу ў падключэнні
Праверце, ці загружаецца выява праз OptiPic CDN
Атрымаць бясплатную інтэграцыю
нават па бясплатным тарыфе

Варыянт #4: Проста зменіце URL малюнкаў на вашым сайце!

Ён
не аптымізаваны

<img src="/upload/foo/bar/image.png">

Ён стаў
аўтаматычна аптымізаваны

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — Ідэнтыфікатар вашага сайта ў вашым акаўнце CDN OptiPic

Пачніце зараз з БЯСПЛАТНЫМ пакетам

Аднаразовы плацёж — няма штомесячнай платы

Набыты пакет не выгарае ў канцы месяца - яго выгадна набываць на некалькі месяцаў наперад
Вы плаціце за прагляды малюнкаў CDN. Агульны кошт выкарыстання залежыць ад колькасці трафіку на ваш сайт. У сярэднім гэта ад 1,5 долара за 1 000 000 праглядаў выявы.
Першая дэманстрацыя 100,000 праглядаў бясплатная.
100,000
праглядаў

бясплатна

1,000,000
праглядаў

$ 10.00 $ 7.00

2,000,000
праглядаў

$ 14.00 $ 10.00

5,000,000
праглядаў

$ 24.00 $ 18.00

10,000,000
праглядаў

$ 40.00 $ 30.00

20,000,000
праглядаў

$ 74.00 $ 55.00

50,000,000
праглядаў

$ 165.00 $ 123.00

80,000,000
праглядаў

$ 235.00 $ 176.00

100,000,000
праглядаў

$ 282.00 $ 211.00

Чаму выбраць нас?

184 рэцэнзіі

OptiPic лёгка інтэгруецца з іншымі платформамі

?