SEO Sprendimai | Nuotraukų optimizavimas svetainėje – alt tekstai, dydžiai ir greitis
Svetainės greitis dažnai krenta ne dėl sudėtingo kodo, o dėl paprastos priežasties: į puslapius keliamos per didelės nuotraukos. Tai ypač dažna WordPress svetainėse, kur vaizdai įkeliami tiesiai iš telefono ar fotoaparato, nekeičiant nei formato, nei dydžio, nei kompresijos. Viena 5 MB nuotrauka dar gali atrodyti kaip smulkmena, bet kai puslapyje jų kelios dešimtys, mobilus lankytojas laukia per ilgai.
Nuotraukų optimizavimas svetainei reiškia ne tik mažesnį failo svorį. Svarbu, kokiu formatu vaizdas pateikiamas, kokio dydžio jis rodomas skirtinguose ekranuose, kada jis įkraunamas ir kaip jis aprašomas Google bei ekrano skaitytuvams. Teisingai sutvarkyti vaizdai pagerina puslapio greitį, Core Web Vitals rodiklius, vartotojo patirtį ir vaizdų paieškos matomumą.
Gerai optimizuotos nuotraukos padeda svetainei greičiau užkrauti svarbiausią matomą turinį, sumažina nereikalingą duomenų kiekį mobiliajame tinkle ir leidžia išvengti situacijos, kai kokybiškas dizainas techniškai veikia prasčiau vien dėl netinkamai paruoštų vaizdų.
LCP, arba Largest Contentful Paint, yra Core Web Vitals rodiklis, kuris parodo, per kiek laiko vartotojui įkraunamas didžiausias matomas puslapio elementas. Dažniausiai tai būna pagrindinė nuotrauka: hero baneris, produkto vaizdas arba straipsnio antraštės iliustracija.
Geras LCP rezultatas yra iki 2,5 sekundės. Jei rodiklis viršija 4 sekundes, puslapis laikomas lėtu, o vartotojo patirtis prasta. Konkurencingose nišose tai gali paveikti ir organines pozicijas, nes Google vertina ne tik turinio kokybę, bet ir techninę puslapio patirtį.
Viena dažniausių LCP problemų priežasčių yra per didelis originalus nuotraukos failas. Pavyzdžiui, jei 4000 × 3000 pikselių nuotrauka rodoma tik 800 pikselių pločio turinio bloke, naršyklė vis tiek turi atsisiųsti visą didelį failą ir tik tada jį sumažinti ekrane. Tai reiškia daugiau duomenų, ilgesnį laukimą ir prastesnį LCP rezultatą.
JPEG ilgą laiką buvo numatytas pasirinkimas svetainių nuotraukoms, tačiau šiandien jis ne visada yra geriausias formatas. WebP ir AVIF leidžia išlaikyti panašią vizualinę kokybę, bet dažniausiai sukuria mažesnius failus. Tai reiškia trumpesnį įkėlimo laiką, mažesnę apkrovą serveriui ir geresnę patirtį mobiliesiems vartotojams.
WebP dažnai sumažina nuotraukos failo dydį lyginant su JPEG, išlaikydamas pakankamai gerą kokybę įprastam svetainės naudojimui. AVIF gali būti dar efektyvesnis, tačiau jo apdorojimas sudėtingesnis, o suderinamumas su senesnėmis naršyklėmis ne visada idealus. Dėl to daugeliui WordPress svetainių WebP išlieka praktiškiausias pasirinkimas kasdieniam naudojimui.
WordPress jau palaiko WebP įkėlimą į Media Library, todėl šį formatą galima naudoti be sudėtingų papildomų sprendimų. Tokie įskiepiai kaip ShortPixel ar Imagify gali automatiškai konvertuoti nuotraukas į WebP, suspausti failus ir pateikti tinkamą versiją pagal vartotojo naršyklę. Tai patogu, nes po pradinės konfigūracijos optimizavimas vyksta automatiškai.
PNG formatą verta naudoti tada, kai reikia skaidrumo arba labai aiškių grafinių elementų, pavyzdžiui, logotipų, ikonų ar iliustracijų. Fotografijoms PNG dažniausiai netinka, nes failai tampa gerokai didesni nei JPEG ar WebP. Jei produkto, komandos ar projekto nuotraukos svetainėje įkeltos PNG formatu, tai dažniausiai yra techninė klaida, kurią verta ištaisyti.
Alt tekstas yra alt atributas <img> žymoje, trumpai apibūdinantis, kas matoma nuotraukoje ar iliustracijoje. Pirmiausia jis svarbus prieinamumui: ekrano skaitytuvai šį tekstą perskaito vartotojams, kurie nemato vaizdo. Kartu alt tekstas padeda Google geriau suprasti vaizdo turinį ir jo ryšį su puslapio tema.
Veikiantis alt tekstas aprašo vaizdą, o ne bando į jį sugrūsti raktažodžius. Pavyzdžiui, pilka sofa su medinėmis kojomis šviesioje svetainėje yra geresnis aprašymas nei sofa pirkti sofa Vilnius baldai pigiai. Pirmasis variantas aiškiai nusako vaizdą, antrasis atrodo kaip dirbtinis raktažodžių kartojimas ir gali pakenkti puslapio kokybės signalams.
Dekoratyviniams vaizdams, tokiems kaip fono tekstūros, dizaino elementai ar informacinės vertės neturinčios ikonos, alt atributas turėtų būti tuščias: alt=””. Taip ekrano skaitytuvai jų nepraneša kaip svarbaus turinio, o paieškos sistemos gauna aiškų signalą, kad vaizdas yra tik dizaino dalis.
Dar prieš įkeliant nuotrauką į svetainę verta sutvarkyti jos failo pavadinimą. Pavadinimas DSC_04821.jpg Google nesuteikia aiškaus konteksto, o pilka-sofa-skandinaviskas-stilius.webp iš karto parodo, kas yra vaizde.
Google Images gali atvesti papildomo srauto e. komercijos, interjero, maisto, kelionių ir kitoms vizualiai stiprioms svetainėms. Failo pavadinimas nėra vienintelis reitingavimo veiksnys, bet jis padeda paieškos sistemai geriau suprasti vaizdą kartu su alt tekstu, šalia esančiu turiniu ir techniniu vaizdų indeksavimu.
Praktinė taisyklė paprasta: naudokite trumpus, aiškius ir aprašomuosius pavadinimus. Žodžius atskirkite brūkšneliais, rašykite mažosiomis raidėmis, venkite lietuviškų raidžių, datų, atsitiktinių skaičių ir bendrinių failų pavadinimų, kurie nieko nepasako apie nuotraukos turinį.
Lazy loading reiškia, kad nuotraukos įkraunamos ne visos iš karto, o tik tada, kai vartotojas artėja prie jų slinkdamas puslapį. Tai sumažina pradinį puslapio svorį ir pagreitina pirmą įkrovimą, nes naršyklė neatsisiunčia vaizdų, kurių lankytojas dar nemato.
Standartinis sprendimas yra HTML atributas loading=”lazy”. Jį palaiko šiuolaikinės naršyklės, todėl daugeliu atvejų papildomų sudėtingų sprendimų nereikia. WordPress nuo 5.5 versijos automatiškai prideda šį atributą daugumai paveikslėlių, kad puslapiai būtų įkraunami efektyviau.
Svarbiausia išimtis yra viršutinėje puslapio dalyje matomas vaizdas, pavyzdžiui, hero nuotrauka ar pagrindinis produkto paveikslėlis. Tokiam vaizdui lazy loading neturėtų būti taikomas, nes jis gali pavėlinti LCP rodiklį. Pagrindiniam vaizdui geriau naudoti fetchpriority=”high” arba preload, kad naršyklė jį pradėtų krauti kuo anksčiau.
Kompresija reiškia failo dydžio mažinimą. Ji gali būti dviejų tipų: lossless, kai išlaikoma visa vaizdo informacija, arba lossy, kai pašalinama dalis duomenų, kurių žmogaus akis įprastai nepastebi.
Daugelyje įrankių JPEG kompresija dažniausiai nustatoma ties maždaug 80–85% kokybe. Tai riba, kur failo dydis sumažėja reikšmingai, o vizualinis skirtumas ekrane dažniausiai lieka nepastebimas. Tokie įrankiai kaip TinyPNG, ShortPixel ar Imagify taip pat dažnai naudoja lossy kompresiją, nes svetainėms svarbiausia rasti balansą tarp greičio ir vaizdo kokybės.
Per stipri kompresija svetainės nuotraukoms kenkia. Failas tampa mažesnis, bet atsiranda matomi artefaktai: išplaukę kraštai, netolygūs spalvų perėjimai, prastesnės detalės. Tai ypač svarbu produktų, interjero, paslaugų ar portfolio nuotraukose, kur vaizdo kokybė tiesiogiai formuoja pasitikėjimą.
Praktikoje dažniausiai geriausiai veikia saikinga WebP kompresija. Maždaug 80% kokybės WebP versija dažnai sumažina originalaus failo svorį 60–70%, bet išlaiko pakankamai gerą vizualinę kokybę, kurios vartotojas įprastame ekrane beveik neskiria nuo originalo. Daugumai svetainių tai yra saugus ir efektyvus kompromisas.
srcset atributas leidžia naršyklei pasirinkti tinkamiausią to paties vaizdo versiją pagal ekrano dydį ir raišką. Pavyzdžiui, mobiliajam įrenginiui gali būti pateikiama 400 px pločio nuotrauka, planšetei 800 px, o staliniam kompiuteriui 1200 px. Taip įrenginys neatsisiunčia didesnio failo, nei jam realiai reikia.
WordPress įkeliant nuotrauką automatiškai sukuria kelias jos dydžio versijas ir daugeliu atvejų prideda srcset atributą. Tačiau tai veikia tik tada, kai originalus failas yra pakankamai didelis. Jei įkeliate 600 px pločio nuotrauką į vietą, kurioje hero banneris rodomas 1400 px pločiu, sistema neturi iš ko sukurti kokybiškos didesnės versijos. Rezultatas bus ištemptas, neryškus arba pikseliuotas vaizdas.
Praktinė taisyklė paprasta: įkelkite nuotrauką bent 2 kartus didesnę nei didžiausias jos rodymo dydis svetainėje. Jei banneris rodomas 1400 px pločiu, originalus failas turėtų būti apie 2800 px pločio. Tada WordPress galės sugeneruoti mažesnes versijas skirtingiems ekranams, o vaizdas išliks ryškus ir retina ekranuose.
Net ir gerai optimizuotos nuotraukos neišspręs visų svetainės greičio problemų. Jei hostingas lėtas arba serveris į pirmą užklausą atsako per ilgai, problema slypi ne vaizduose, o infrastruktūroje. Pavyzdžiui, kai Time to First Byte, arba TTFB, viršija 2 sekundes, pirmiausia reikėtų vertinti serverio našumą, talpinimo planą, kešavimo konfigūraciją ir bendrą svetainės techninę bazę.
Taip pat svarbu suprasti, kad vienkartinis nuotraukų optimizavimas neišsprendžia darbo proceso problemos. ShortPixel, Imagify ar panašūs įrankiai gali sumažinti jau įkeltų failų dydį, tačiau jei komanda ir toliau kelia 8 MB nuotraukas tiesiai iš telefono, tos pačios problemos kartosis po kiekvieno turinio atnaujinimo. Ilgalaikiam rezultatui reikia aiškių turinio kėlimo taisyklių: kokio dydžio nuotraukas naudoti, kokį formatą rinktis ir kaip jas paruošti prieš įkeliant į svetainę.
Jei svetainė jau veikia ir nuotraukos anksčiau nebuvo tvarkytos, pirmiausia verta atlikti auditą. Google PageSpeed Insights parodo, kurios nuotraukos labiausiai lėtina puslapio įkėlimą, ar jos veikia LCP rodiklį ir kiek duomenų galima sutaupyti jas optimizavus. Screaming Frog leidžia patikrinti visą svetainę vienu nuskaitymu: rasti vaizdus be alt tekstų, per didelius failus, netinkamus formatus ir puslapius, kuriuose šios problemos kartojasi.
Jei svetainė sukurta su WordPress, praktinis pirmas žingsnis gali būti ShortPixel, Imagify arba panašus optimizavimo įskiepis. Tokie įrankiai leidžia automatiškai suspausti esamas nuotraukas, konvertuoti jas į WebP formatą ir palikti atsargines originalų versijas. Pradėjus nuo mažesnio kiekio vaizdų, lengva pamatyti realų skirtumą: kiek sumažėjo failų svoris, ar pagerėjo PageSpeed rodikliai ir ar puslapis greičiau kraunasi mobiliajame tinkle.
Per artimiausias 30 dienų patikrinkite pagrindinio puslapio mobiliąją versiją su Google PageSpeed Insights ir atkreipkite dėmesį į LCP elementą. Jei tai nuotrauka, naršyklės DevTools skiltyje Network pasirinkite Img filtrą ir pažiūrėkite jos failo dydį. Kai svarbiausias puslapio vaizdas sveria daugiau nei 200 KB, optimizuota WebP versija dažnai duoda aiškiai matomą greičio pagerėjimą.
SEO Sprendimai atlieka techninį svetainių auditą, įskaitant nuotraukų optimizavimą, Core Web Vitals gerinimą ir greičio konfigūraciją – nuo PageSpeed diagnozės iki plugin’ų diegimo ir darbo eigos nustatymo. Susisiekite, jei norite sužinoti, kiek jūsų svetainės greitis šiandien kainuoja pozicijų ir lankytojų.