სურათების ოპტიმიზაციის სახელმძღვანელო ვებისთვის

ვებსაიტის წონის საშუალოდ 50-70%-ს სურათები შეადგენს. ანუ, თუ თქვენი გვერდი ნელია, მიზეზი დიდი ალბათობით კოდი კი არა, ატვირთული ფოტოებია. კარგი ამბავი ის არის, რომ სურათების ოპტიმიზაცია საიტის სიჩქარის გასაზრდელად ყველაზე მარტივი და ყველაზე მომგებიანი საქმეა.

რატომ ანელებს სურათები ჩემს საიტს?

ვებსაიტის წონის საშუალოდ 50-70%-ს სურათები შეადგენს. კამერიდან გამოსული სახით ატვირთული ფოტო შეიძლება 3-5 MB იყოს, მაშინ როცა იგივე სურათი WebP-ში გადაყვანილი და რეალურ საჩვენებელ სიგანეზე დაყვანილი 100-200 KB-მდე ჩამოდის. ნელა გახსნადი გვერდების უმეტესობაში მიზეზი სერვერი კი არა, არაოპტიმიზებული სურათებია.

რატომ არის მნიშვნელოვანი

Google-ის გვერდის გამოცდილების მეტრიკებს შორისაა LCP (Largest Contentful Paint): რამდენ ხანში ჩნდება გვერდის ყველაზე დიდი ვიზუალური ელემენტი. საიტების უმეტესობაში ეს ელემენტი ფოტოა. ანუ თქვენი სურათის ჩატვირთვის დრო ძიების რანჟირებაზე პირდაპირ მოქმედ მეტრიკად იქცევა.

ამის მიღმა:

• მობილური ინტერნეტი: ვიზიტორების უმეტესობა მობილურიდანაა. 4 MB-იანი გვერდი შეზღუდული პაკეტის მქონე მომხმარებლისთვის ძვირია.
• კონვერსია: გვერდის ჩატვირთვის ყოველი წამიანი დაყოვნება მიტოვების მაჩვენებელს ზრდის. თუ პროდუქტის გვერდი ნელია, შესყიდვა არ სრულდება.
• სკანირების ბიუჯეტი: საძიებო ბოტები თქვენს საიტზე შეზღუდულ დროს ხარჯავენ. მძიმე გვერდები ნაკლებად სკანირდება.

რომელი ფორმატი როდის გამოვიყენოთ

ფორმატის შერჩევა ოპტიმიზაციის ყველაზე მომგებიანი ნაბიჯია. არასწორი ფორმატის არჩევისას, რამდენიც არ უნდა შეკუმშოთ, სასურველ შედეგს ვერ მიიღებთ.

პრაქტიკული წესი: ფოტოებისთვის WebP, ლოგოებისა და ხატულებისთვის SVG. გამჭვირვალობის საჭირო, მაგრამ ვექტორად გადაუყვანელი სურათებისთვის — ისევ WebP.

ყველაზე ხშირად ნანახი შეცდომა ლოგოების PNG-ად გამოყენებაა. თუ თქვენი ლოგო ვექტორული ნახატია, SVG-დ შეინახეთ: 10-ჯერ პატარაც იქნება და ყველა ეკრანის გარჩევადობაზე მკაფიოდაც გამოჩნდება.

სწორი ზომა: ყველაზე გავრცელებული შეცდომა

ეს თავისთავად ყველაზე დიდი ფლანგვის წყაროა. ტელეფონით გადაღებული ფოტო 4000 პიქსელის სიგანისაა. თქვენს საიტზე იმ ფოტოს საჩვენებელი არე კი შეიძლება 800 პიქსელი იყოს. ბრაუზერი 4000 პიქსელს ჩამოტვირთავს და 800-მდე ამცირებს — ანუ უსარგებლოდ ხუთჯერ მეტ მონაცემს ხარჯავთ.

სწორი მიდგომა:

1. განსაზღვრეთ, სურათი თქვენს საიტზე რამდენი პიქსელის სიგანით გამოჩნდება.
2. Retina ეკრანებისთვის ამ მნიშვნელობის 2-მაგს დაისახეთ მიზნად.
3. სურათი იმ ზომამდე დაიყვანეთ, შემდეგ შეკუმშეთ.

მაგალითი: თუ ბლოგის სტატიაში სურათი 800-პიქსელიან არეში გამოჩნდება, 1600 პიქსელის სიგანით შეინახეთ. სრულეკრანიანი hero სურათისთვის 2560 პიქსელი ჩვეულებრივ სავსებით საკმარისია.

ზომის შეცვლისა და ფორმატის კონვერტაციის ერთ ნაბიჯში გასაკეთებლად ჩვენი სურათების კონვერტერი შეგიძლიათ გამოიყენოთ; ერთდროულად 30-მდე სურათს გარდაქმნის და ამასშტაბირებს.

შეკუმშვისას სად გავჩერდეთ

შეკუმშვის ხარისხი 0-100-ს შორის მნიშვნელობაა და აქ არჩევანი მთლიანად თვალით კეთდება. ზოგადი ტენდენციები:

• 90-95: თვალით შეუმჩნეველია. პროდუქტის ფოტოებისთვის, პორტფოლიოს სურათებისთვის — სადაც დეტალი მნიშვნელოვანია.
• 80-85: უმეტეს შემთხვევაში იდეალური ბალანსი. ბლოგის სურათები, ფონები, ბარათების სურათები.
• 70-ზე დაბლა: თვალსაჩინო დამახინჯება იწყება. განსაკუთრებით ერთფეროვან არეებში ლაქები ჩნდება.

კრიტიკული წერტილი: ყოველი ხელახალი შენახვა ხარისხს კარგავს. JPG და WebP დანაკარგიანი ფორმატებია. 85 ხარისხით შენახული სურათი ისევ 85-ზე რომ შეინახოთ, მეორე დანაკარგს მიიღებთ. ამიტომ ყოველთვის ორიგინალი ფაილიდან იმუშავეთ, ოპტიმიზებული ფაილი ხელახლა არ დააოპტიმიზოთ.

უამრავი სურათის ერთბაშად შესამცირებლად სურათების ჯგუფური შეკუმშვის ხელსაწყო გამოგადგებათ.

ჩატვირთვის ქცევა: lazy loading

გვერდის ბოლოში მდებარე სურათის ჩამოტვირთვას აზრი არ აქვს, თუ ვიზიტორი იქამდე საერთოდ არ ჩავა. HTML-ში ერთი ატრიბუტი ამას წყვეტს:

<img src="foto.webp" loading="lazy" width="800" height="600" alt="აღწერა">

სამი დეტალი მნიშვნელოვანია:

• loading="lazy" მხოლოდ ეკრანს გარეთ მყოფ სურათებზე უნდა გამოიყენოთ. გვერდის თავში მდებარე hero სურათზე რომ გამოიყენოთ, თქვენს LCP-ს გააუარესებთ.
• width და height აუცილებლად უნდა ეწეროს. თუ არ ეწერება, სურათის ჩატვირთვისას გვერდი ხტება; ეს კი თქვენს CLS (Cumulative Layout Shift) ქულას ამცირებს.
• alt ხელმისაწვდომობისთვისაც და SEO-სთვისაც აუცილებელია. დაწერეთ, რას გადმოსცემს სურათი, საკვანძო სიტყვებით არ გაავსოთ.

სხვადასხვა ეკრანს — სხვადასხვა სურათი

ერთი და იგივე სურათის დესკტოპზეც და ტელეფონზეც გაგზავნა არ გევალებათ. srcset-ით ბრაუზერს არჩევანს სთავაზობთ:

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="აღწერა">

ბრაუზერი ეკრანის სიგანესა და პიქსელების სიმკვრივეს უყურებს და ყველაზე შესაფერის ფაილს ტვირთავს. მობილური მომხმარებელი 400-პიქსელიან ფაილს იღებს, retina დესკტოპი — 1600-ს.

ეს ის ნაბიჯია, რომლის განხორციელებაც ცოტა შრომას მოითხოვს, მაგრამ მობილურ სიჩქარეში ყველაზე დიდ განსხვავებას ქმნის.

პრაქტიკული სამუშაო პროცესი

საიტზე ახალი სურათის განთავსებისას დასაცავი თანმიმდევრობა:

1. ორიგინალი შეინახეთ. ოპტიმიზებული ფაილი არქივად არ გამოიყენოთ.
2. ჩამოჭერით. სურათის ზედმეტი კიდეები მოაშორეთ; საუკეთესო შეკუმშვა არარსებული პიქსელია.
3. ზომა შეცვალეთ. საჩვენებელი არის 2-მაგი სიგანე.
4. ფორმატში გადაიყვანეთ. თუ ფოტოა — WebP.
5. შეკუმშეთ. 80-85-ს შორის დაიწყეთ, თვალით შეამოწმეთ.
6. სახელი დაარქვით. არა IMG_2847.jpg, არამედ antalya-otel-web-sitesi.webp. ფაილის სახელიც SEO სიგნალია.
7. alt დაწერეთ. სურათის შინაარსი ერთი წინადადებით აღწერეთ.

ხშირი შეცდომები

• შეკუმშული ფაილის ხელახლა შეკუმშვა. ხარისხი უკან არ ბრუნდება, უბრალოდ მეტს კარგავთ.
• ყველაფერზე lazy loading-ის გამოყენება. hero სურათი მაშინვე უნდა ჩაიტვირთოს.
• ფოტოს PNG-ად შენახვა. იგივე ფოტო PNG-ად 5-10-ჯერ დიდი გამოდის.
• ზომის ატრიბუტების გამოტოვება. ჩატვირთვისას გვერდი ხტება, მომხმარებელი არასწორ ადგილას აჭერს.
• ეკრანის ანაბეჭდების ისე ატვირთვა. 2560-პიქსელიანი ანაბეჭდი ჩვეულებრივ 1200 პიქსელზეც იმავე საქმეს აკეთებს.
• alt ტექსტის საკვანძო სიტყვებით გავსება. საძიებო სისტემები ამას ამჩნევენ და უარყოფითად აფასებენ.

რიცხვითი მაგალითი

დავუშვათ, ტიპური კორპორატიული საიტის მთავარ გვერდზე 12 სურათია. ოპტიმიზაციამდე და შემდეგ:

ჯამში: დაახლოებით 10,4 MB → 0,7 MB. მობილურ კავშირზე ეს გვერდის გახსნასა და არგახსნას შორის განსხვავებაა.

ეს პროპორციები შეიძლება გადაჭარბებულად მოგეჩვენოთ, მაგრამ პრაქტიკაში ნანახი სურათი ჩვეულებრივ ასეთია; რადგან საიტების უმეტესობაში სურათები ხელუხლებლად, კამერიდან გამოსული სახითაა ატვირთული.

სურათების ატვირთვის მიღმა: ქეშირება

ოპტიმიზებული სურათიც რომ ყოველ ვიზიტზე ხელახლა იტვირთებოდეს, საქმე ნახევრად გაკეთებულია. სურათებს გრძელვადიანი ბრაუზერის ქეში განუსაზღვრეთ:

Cache-Control: public, max-age=31536000, immutable

ერთი წელი დიდი შეიძლება მოგეჩვენოთ, მაგრამ უსაფრთხოა — რადგან სურათის შეცვლისას ფაილის სახელსაც ცვლით. თუ logo.webp-ის ნაცვლად logo-v2.webp-ს ან კონტენტის ჰეშის მქონე სახელს იყენებთ, ძველი ფაილი ქეშში დარჩენილიც რომ იყოს, ახალი სახელი ახალ ჩამოტვირთვას ნიშნავს.

თუ ფაილის სახელი საერთოდ არ იცვლება, გრძელი ქეში საშიშია: მომხმარებელი თვეობით ძველ სურათს ხედავს.

დავიწყებული სურათები

გვერდის შიგნით არსებულის გარდა, თქვენს საიტს სხვა სურათებიც აქვს და ისინიც უნდა დააოპტიმიზოთ:

• Favicon. ბრაუზერის ჩანართის ხატულა. Favicon გენერატორით ერთი ფაილიდან ყველა ზომას შექმნით.
• სოციალური გაზიარების სურათი (OG image). ბარათი, რომელიც თქვენი საიტის WhatsApp-ში ან LinkedIn-ზე გაზიარებისას ჩნდება. სტანდარტი 1200×630 პიქსელია. თუ არ არის, გაზიარება შიშველ ბმულად გამოჩნდება.
• Apple touch icon. iPhone-ზე მთავარ ეკრანზე დამატებისას გამოყენებული ხატულა.

როგორ გამოიყურება თქვენი გვერდი გაზიარებისას — მეტა თეგების გადახედვის ხელსაწყოთი შეამოწმეთ.

ხშირად დასმული კითხვები

რა მოხდება, თუ ძველი ბრაუზერები WebP-ს მხარს არ უჭერენ? პრაქტიკაში ეს აღარ არის პრობლემა; ყველა თანამედროვე ბრაუზერი უჭერს მხარს. თუ მაინც გარანტია გსურთ, <picture> თეგით JPG სარეზერვო ვარიანტი შეგიძლიათ განსაზღვროთ.

AVIF-ზე უნდა გადავიდე? უფრო პატარა ფაილს ქმნის, მაგრამ კოდირება ნელია და ხელსაწყოების მხარდაჭერა WebP-სავით ჩამოყალიბებული არ არის. საიტების უმეტესობისთვის WebP საკმარისია.

სურათები CDN-იდან უნდა მივაწოდო? თუ თქვენი ვიზიტორები გეოგრაფიულად გაფანტულები არიან, სასარგებლოა. ერთ ქალაქში მომუშავე ბიზნესისთვის პრიორიტეტი ჯერ ზომა უნდა იყოს, შემდეგ CDN.

გამჭვირვალე ფონის მქონე პროდუქტის ფოტოსთვის რომელი ფორმატი? WebP. გამჭვირვალობასაც უჭერს მხარს და PNG-ზე გაცილებით პატარაა.

სურათების ოპტიმიზაცია გვერდის სიჩქარეში ყველაზე ნაკლები შრომით ყველაზე მეტი მოგების მომტანი ნაბიჯია. სისტემის ერთხელ დაყენების შემდეგ ყოველ ახალ სურათზე იმავე ნაბიჯების გამეორება საკმარისია.

არსებული სურათები სურათების ჯგუფური შეკუმშვის ხელსაწყოთი ერთბაშად შეგიძლიათ შეამციროთ.