Vaizdų dydžio svetainėms gairės 2026 m.

Šiandien daugiau žmonių naršo internete naudodami mobiliuosius įrenginius nei stalinius kompiuterius. Kadangi naudojami įvairių dydžių ekranai, kurdami svetainę turite pasirinkti tinkamiausią vaizdų dydį, kad visi lankytojai turėtų gerą naudojimo patirtį, nepriklausomai nuo jų įrenginio.

Jei neoptimizuosite vaizdų, svetainės lankytojai gali matyti per mažus ir neryškius vaizdus arba per didelius, dėl kurių padidėja įkėlimo laikas ir tenka bereikalingai slinkti bei priartinti.

Gera žinia ta, kad nesunku pritaikyti vaizdus keliems įrenginiams. Pasirinkę tinkamus vaizdo matmenis, sumažinę failų dydžius ir naudodami prisitaikantį svetainės dizainą, galite užtikrinti puikią naršymo patirtį.

Vadovaukitės toliau pateiktu vadovu, kad optimizuotumėte vaizdus mobiliesiems ir staliniams įrenginiams.

Geriausi vaizdų dydžiai svetainėms

Pikselių plotis: priklauso nuo rodymo srities, tačiau bendrosios gairės siūlo 1920 px reklamjuostėms, 1200 px pagrindiniam turiniui ir 400–800 px miniatiūroms. Suglaudinti WebP formato vaizdai geriausiai padeda išlaikyti greitą įkėlimo spartą.

Vaizdo dydis: geriausias bendras jūsų vaizdų dydis (pikseliais) priklauso nuo naudojimo atvejo, pvz., fono vaizdai turi būti didesni nei tinklaraščio įrašo vaizdas.

Failo dydis: bet kas, kas viršija 20 megabaitų, gali žymiai paveikti jūsų svetainės spartą. Mažesni vaizdai (iki dviejų megabaitų, bet apie 500 kilobaitų) dažniausiai yra geresni.

Vaizdo atributas: vaizdo atributai (alternatyvusis tekstas arba alt žyma) yra tekstiniai ir neturi įtakos svetainės veikimui. Tačiau jie naudojami vaizdams interpretuoti per ekrano skaitytuvo programinę įrangą ir yra pagrindinis žiniatinklio prieinamumo elementas. Būkite glausti aprašydami atributus – geriausia praktika yra išlaikyti alternatyvųjį tekstą iki 100 simbolių, įskaitant tarpus.

Geriausi vaizdų matmenys staliniams ir mobiliesiems įrenginiams

Toliau pateiktoje lentelėje nurodyti rekomenduojami vaizdų dydžiai tiek staliniams, tiek mobiliesiems įrenginiams skirtoms svetainėms.

Tai siūlomi dydžiai, kuriuos gali tekti koreguoti atsižvelgiant į tai, ar naudojate prisitaikantį svetainės dizainą.

Beveik visada verta pasirūpinti, kad vaizdų atvaizdavimo dydis būtų mažesnis nei jų įkėlimo dydis.

Svetainės vaizdų dydžio gairės

Svetainėje matysite penkis pagrindinius vaizdų tipus:

• Fono vaizdų dydžiai
• Pagrindinių vaizdų dydžiai
• Reklamjuosčių vaizdų dydžiai
• Tinklaraščio vaizdų dydžiai
• Logotipų dydžiai

Kiekvienam žiniatinklio vaizdo tipui taikomi skirtingi dydžio reikalavimai. Panagrinėkime geriausius vaizdų dydžius įprastiems svetainės vaizdų tipams.

Fono vaizdų dydžiai

Fono vaizdai paprastai yra didžiausi svetainės vaizdai. Vaizdas tarnauja kaip pagrindinio puslapio arba kito nukreipimo puslapio fonas.

Pavyzdžiui, dviračių pardavėjas „Cowboy“ savo produktą paverčia pagrindiniu elementu, naudodamas jį kaip pagrindinio puslapio foną. Jis užpildo ekraną, nepriklausomai nuo to, kokiu įrenginiu žiūrima.

Rekomenduojamas vaizdo plotis: 2560 pikselių

Rekomenduojamas vaizdo aukštis: 1400 pikselių

Kraštinių santykis: 16:9

Rekomenduojamas failo dydis: 20 MB

Pagrindinių vaizdų dydžiai

Pagrindiniai vaizdai panašūs į fono vaizdus, bet paprastai yra maždaug perpus mažesnio aukščio. Pagrindinis vaizdas yra puikus pasirinkimas, jei reikia ekrane pateikti daugiau teksto, neverčiant vartotojų slinkti, kad jį pamatytų.

Aukščiau pateiktame pavyzdyje „BLK & Bold“ naudoja pagrindinį vaizdą su siauru kraštinių santykiu, kad užpildytų ekraną, bet paliktų vietos turiniui žemiau.

Rekomenduojamas vaizdo plotis: nuo 1280 pikselių iki 2500 pikselių

Rekomenduojamas vaizdo aukštis: nuo 720 pikselių iki 900 pikselių

Kraštinių santykis: 16:9

Rekomenduojamas failo dydis: 10 MB

Reklamjuosčių vaizdų dydžiai

Reklamjuosčių vaizdai gali būti skirtingų dydžių ir formų, priklausomai nuo to, kur jie yra ir ką norite parodyti lankytojams. Labiausiai įprastas svetainės reklamjuostės tipas yra reklamjuostės skelbimas. Viena populiariausių paslaugų reklamjuosčių skelbimams reklamuoti yra „Google Ads“.

Jei galvojate apie reklamjuostės vaizdą, kuris nėra skelbimas, stačiakampiai variantai (pvz., 300 x 200 pikselių arba 970 x 90 pikselių) paprastai yra geresni.

Rekomenduojamas vaizdo plotis: patikrinkite skelbimų platformoje

Rekomenduojamas vaizdo aukštis: patikrinkite skelbimų platformoje

Kraštinių santykis: įvairūs

Rekomenduojamas failo dydis: 150 KB (patikrinkite skelbimų platformoje)

Tinklaraščio vaizdų dydžiai

Tinklaraščio vaizdai gali skirtis pagal tipą ir dydį. Aukščiau pateiktas įrašas yra iš rinkodaros analizės platformos „Whatagraph“, ir nors pagrindinio vaizdo įkėlimo dydis yra 1880 x 1058 pikselių, atvaizdavimo dydis yra mažesnis – 589 × 331 pikselių.

Nustatydami atvaizdavimo dydį savo tinklalapiams, padėsite patobulinti dizainą ir išlaikysite mažus failus.

Kalbant apie pagrindinius tinklaraščio įrašų antraščių vaizdus (tuos, kurie yra puslapio viršuje), jie turėtų būti vienodo dydžio visame tinklaraštyje.

Rekomenduojamas vaizdo plotis: 1200 pikselių

Rekomenduojamas vaizdo aukštis: 800 pikselių

Kraštinių santykis: 3:2

Rekomenduojamas failo dydis: 3 MB

Logotipų dydžiai

Jūsų logotipas greičiausiai bus vienas mažiausių vaizdų svetainėje (nebent skaičiuojate svetainės piktogramą skirtukų juostoje). Priklausomai nuo jūsų logotipo dizaino, turėtumėte pasirinkti stačiakampį arba kvadratinį kraštinių santykį.

Dauguma logotipų tinka kvadratiniam 1:1 santykiui. Stačiakampiai santykiai gerai tinka ilgesniems prekių ženklų pavadinimams arba kai logotipą sudaro žodžiai, o ne grafiniai elementai. Pačios „Shopify“ svetainės logotipas naudoja ilgesnį 4:1 santykį.

Rekomenduojamas vaizdo plotis: 100 pikselių

Rekomenduojamas vaizdo aukštis: 100 pikselių

Kraštinių santykis: 1:1, 2:3, 4:1

Rekomenduojamas failo dydis: 1 MB

Mobiliųjų vaizdų dydžio rekomendacijos

Pasirinkite tinkamus vaizdo matmenis

Mažesniuose mobiliųjų ekranuose daugelis vartotojų vertina galimybę priartinti vaizdą. Todėl stenkitės rasti pusiausvyrą tarp vaizdo dydžio ir failo dydžio.

Didelės raiškos vaizdai suteikia jūsų svetainei profesionalų ir išbaigtą vaizdą su puikiomis priartinimo galimybėmis. Išlaikykite panašių vaizdų kraštinių santykį vienodą, kad išlaikytumėte vienodą dizainą skirtingų tipų puslapiuose.

Pavyzdžiui, galite padaryti visus produktų vaizdus el. prekybos parduotuvėje kvadratinius. Kvadratinius vaizdus lengviau perkelti mažesniuose ekranuose. Be to, kvadratiniai ir vertikalūs vaizdai gerai tinka mobiliųjų ekranams, leidžiantys lankytojams matyti daugiau vaizdų be slinkimo.

Atsižvelkite į failo dydį

Vaizdai su didesniais failų dydžiais gali turėti įtakos jūsų svetainės spartai, ypač kai lankytojai naudoja išmanųjį telefoną. Daugelis svetainių kūrimo platformų taip pat turi maksimalius failų dydžio apribojimus įkėlimams. Pavyzdžiui, „Shopify“ naudoja maksimalų 20 MB failo dydį.

Jei reikia suspausti vaizdus, kad sumažintumėte jų dydį, yra internetinių vaizdų dydžio keitimo įrankių, kurie gali padėti. Naudodami šiuos įrankius galite performuoti didelius vaizdo failus į naujus matmenis arba failų tipus.

Dažniausiai antraščių fono vaizdai turėtų būtų mažesni nei 10 MB, o produktų nuotraukos turėtų būti daug mažesnės – apie 300 KB.

Pakeiskite nuotraukų dydį mobiliųjų ekranų matmenims

„Shopify“ automatiškai pakeičia jūsų vaizdų dydį, kad jie tilptų mažesniuose ekranuose. Tačiau kitose platformose vaizdams gali reikėti rankinio redagavimo, kad jie būtų paruošti mobiliesiems įrenginiams. Atminkite, kad stalinių ir mobiliųjų įrenginių ekranai turi priešingas orientacijas.

Vėlgi, atminkite, kad dideli failai sulėtina svetainės įkėlimo laiką. Nors suspaudimas be nuostolių gali suteikti aukščiausios kokybės vaizdą, jis dažnai sukuria didelius failus, kurių įkėlimas į svetainę gali užtrukti amžinybę. Apsvarstykite galimybę naudoti mažiausius vaizdo failus su geriausia raiška.

Nors „Shopify“ prisitaikantys dizainai ir algoritmai gerai keičia jūsų vaizdų dydį ir juos rodo įvairiuose įrenginiuose, padėdami jiems apgalvotu failų dydžio nustatymu galite užtikrinti sklandesnę apsipirkimo patirtį.

Kodėl vaizdo dydis svarbus svetainėms?

Svetainėms vaizdo dydis svarbus dėl trijų pagrindinių priežasčių:

• jis sukuria geresnę vartotojo patirtį;
• jis pagerina svetainės puslapio spartą;
• jis padeda svetainės reitingavimui.

Sukuria geresnę vartotojo patirtį

Tinkamo dydžio vaizdai kiekvienam svetainės naudojimo atvejui padeda pagerinti vartotojo patirtį. Lankytojai gali pasiekti tinkamą detalumo lygį ir jiems nereikės slinkti, kad pamatytų visą vaizdą.

Kai vaizdai yra prastos kokybės, pikseliuoti arba per maži, jie gali turėti įtakos jūsų turinio suvokiamai kokybei. El. prekybos svetainei tai gali lemti, kad klientai suabejotų jūsų verslo ar produktų kokybe.

Priešingai, aukštos kokybės, tinkamo dydžio vaizdai padidina jūsų produktų suvokiamą vertę ir suteikia daugiau vizualinės informacijos potencialiems klientams.

Pavyzdžiui, pažiūrėkite, kaip žemiau pateikti vaizdai iš tvarios avalynės prekių ženklo „Allbirds“ pagerina vartotojo patirtį aiškiai parodydami įvairias produkto savybes.

Pagerina svetainės puslapio spartą

Kai į svetainę įkeliate didelius vaizdus, serveriui užtrunka ilgiau įkelti puslapį. Mažesni vaizdai (tiek matmenimis, tiek failo dydžiu) paprastai įkeliami greičiau įvairiuose įrenginiuose.

Vaizdų įkėlimo sparta dažnai vadinama „turinio atvaizdavimu“. Galite patikrinti savo tinklalapio turinio atvaizdavimą ir kitus puslapio spartos rodiklius naudodami „Google“ „PageSpeed Insights“.

Apskritai optimizuokite puslapių spartą, kad išvengtumėte didelio atmetimo rodiklio.

Padeda svetainės reitingavimui

Svetainės reitingavimas reiškia jūsų svetainės poziciją paieškos sistemų rezultatų puslapiuose (angl. „search engine result pages“, SERP). Paieškos sistemoms optimizuotos svetainės užima aukštas vietas SERP atitinkamoms vartotojų paieškos užklausoms (žinomoms kaip raktažodžiai).

„Google“ naudoja daugybę rodiklių, kad nustatytų, kurie tinklalapiai užima aukščiausias vietas jų paieškos rezultatuose. Vaizdų kokybė (arba, tiksliau, pagerintas vartotojo patyrimas, kurį jie sukuria) greičiausiai yra veiksnys „Google“ algoritme.

Koks geriausias vaizdo failo tipas?

Tinkamas vaizdo failo tipas užtikrina aukštos kokybės vaizdus, kartu išlaikant failo dydį geresniam svetainės veikimui. Čia pateikiami dažniausiai naudojami vaizdo failų formatai ir jų geriausi naudojimo atvejai:

WebP

WebP yra vaizdo formatas, kurį sukūrė „Google“. Jis suteikia suspaudimą be nuostolių žiniatinklio vaizdams, dažnai sumažindamas failo dydį daugiau nei 30 % palyginti su JPEG arba PNG.

Tai gali žymiai pagerinti svetainės įkėlimo laiką, tačiau verta pažymėti, kad WebP dar nėra visuotinai palaikomas visų naršyklių.

JPEG

JPEG (arba JPG) yra vienas plačiausiai naudojamų skaitmeninių vaizdų failų formatų, nes siūlo pusiausvyrą tarp failo dydžio ir vaizdo kokybės. Tai populiarus pasirinkimas fotografijoms ir sudėtingiems vaizdams su daugybe spalvų.

Tačiau JPEG naudoja suspaudimą su nuostoliais, o tai reiškia, kad kai kurios vaizdo kokybės prarandama, kai vaizdas suspaudžiamas.

PNG

PNG yra suspaudimo be nuostolių formatas, o tai reiškia, kad jis sumažina failo dydį neprarandant vaizdo kokybės. Jis palaiko skaidrumą, todėl yra geras pasirinkimas vaizdams, kuriems reikia skaidraus fono.

Nors PNG failai dažnai būna didesni nei JPEG, jų gebėjimas išlaikyti aiškumą daro juos tinkamus detaliai grafikai ir logotipams.

SVG

SVG (keičiamo dydžio vektorinė grafika) yra vektorinio vaizdo formatas, o tai reiškia, kad jis naudoja matematines lygtis vaizdui atvaizduoti. Tai leidžia SVG vaizdus keisti bet kokio dydžio be kokybės praradimo.

SVG yra idealus formatas logotipams, piktogramoms ir kitai grafikai, kurią reikia naudoti keliose vietose. SVG paprastai taip pat yra mažesnio failo dydžio nei kiti formatai, padedantys pagerinti įkėlimo laiką.

AVIF

AVIF (AV1 vaizdo failo formatas) yra šiuolaikinis vaizdo formatas, skirtas žiniatinkliui.

Jis suteikia puikų  suspaudimą, kuris sukuria itin mažus failų dydžius, kartu išlaikant aukštą vizualinę kokybę. AVIF failai dažnai būna daug mažesni nei jų WebP ar JPEG ekvivalentai.

Naudokite jį bet kuriam žiniatinklio vaizdui, kai greičiausias įmanomas veikimas ir mažiausias failo dydis yra pagrindiniai tikslai. Pagrindinis jo apribojimas yra tas, kad tai naujesnis formatas ir dar nėra palaikomas visų senesnių žiniatinklio naršyklių.

GIF

GIF yra rastrinio vaizdo formatas, žinomas dėl gebėjimo palaikyti paprastas animacijas. Jis naudoja  suspaudimą be nuostolių ir sumažina vaizdus iki maksimaliai 256 spalvų, todėl gaunami mažesni failų dydžiai.

Nors GIF statiniams vaizdams daugiausia pakeitė PNG, jis išlieka populiarus pasirinkimas trumpoms, besikartojančioms animacijoms ir yra visuotinai atpažįstamas naršyklių.

Kaip sužinoti vaizdų dydžius svetainėje

Greičiausias būdas sužinoti vaizdo dydį bet kuriame tinklalapyje (neatsisiunčiant vaizdo) yra naudoti naršyklės „Inspect“ įrankį.

Šis metodas veikia „Mac“ ir „Windows“ su „Safari“, „Chrome“ arba „Firefox“ naršyklėmis.

Eikite į tinklalapį ir užveskite pelės žymeklį ant vaizdo, apie kurį norite gauti informacijos. Spustelėkite dešiniuoju pelės mygtuku, kad atsirastų parinkčių meniu, ir ieškokite „Inspect“:

Spustelėjus „Inspect“, atsiras puslapio HTML kodas (jis gali atrodyti bauginantis, bet nesijaudinkite).

Tikrinimo skydelyje turėtų būti paryškinta informacija apie vaizdą, kurį spustelėjote. Užvedus pelės žymeklį ant atitinkamo kodo, vaizdas taip pat bus paryškintas:

Šiuo atveju naršyklė nurodo, kiek pikselių naudoja vaizdas. Jei pakeičiate tinklalapio dydį, ta skaičius atitinkamai pasikeis.

Jei ieškote pradinių įkelto vaizdo savybių, užveskite pelės žymeklį ant vaizdo saugojimo nuorodos:

Norėdami uždaryti tikrinimo skydelį, tiesiog spustelėkite X viršutiniame dešiniajame kampe.

Vaizdų optimizavimo įrankiai

Internetiniai vaizdų optimizavimo įrankiai yra paprastas, greitas (ir paprastai nemokamas) būdas pakeisti svetainės vaizdų dydį. Čia pateikiami trys populiarūs vaizdų optimizavimo įrankiai:

„Image Resizer“

„Shopify“ nemokamas internetinis vaizdo dydžio keitimo įrankis yra patogus būdas pritaikyti vaizdus naudojimui įvairiuose rinkodaros kanaluose ir socialiniuose tinkluose.

Galite pasirinkti iš įvairių oficialių tinkamų matmenų „Instagram“ įrašams ir istorijoms, „YouTube“ miniatiūroms ir kitiems socialinio turinio tipams.

„Image Optimizer by Squirai“

„Squirai“ vaizdo optimizavimo įrankis yra išbandytas spartos atžvilgiu, kad užtikrintų, jog jūsų vaizdai būtų paruošti SEO. Jis automatiškai optimizuoja visus svetainės vaizdus – įskaitant naujus, kuriuos pridėsite vėliau.

Be to, galite pritaikyti vandens ženklą, kad apsaugotumėte savo produktų fotografiją, nereikalaujant jokių kodo žinių.

„LoyaltyHarbour Image Optimizer“

„LoyaltyHarbour Image Optimizer“ veikia panašiai kaip „Squirai“ įrankis, automatiškai suspausdamas vaizdus visoje svetainėje.

Be to, prietaisų skydelis leidžia automatiškai nustatyti vaizdo alternatyvųjį tekstą ir konvertuoti į geriausią vaizdo failo tipą geresnei puslapio spartai.

Arba, jei turite galimybę, taip pat galite naudoti „Photoshop“, kad padėtumėte sumažinti failo dydį. Tačiau tai gali būti sudėtingesnis procesas nei aukščiau nurodyti įrankiai.

Problemų sprendimas: vaizdų formatavimo klaidos

Tvarkydami svetainę, greičiausiai susidursite su vaizdų formatavimo klaidomis. Problemos su vaizdais gali svyruoti nuo netinkamo dydžio iki sugadintų nuorodų.

Panagrinėkime sprendimus kai kurioms įprastoms svetainės vaizdų problemoms.

Netinkamas vaizdo dydis

Problema: vaizdai atrodo per dideli arba maži ir gali sugadinti tinklalapio išdėstymą, dėl ko nukentės vartotojo patirtis.

Sprendimas: jei naudojate svetainės temą arba šabloną, ieškokite išteklių apie tinkamus vaizdo matmenis jūsų dizainui. Savo svetainės kūrimo įrankyje būtinai pasirinkite atvaizdavimo dydžius kiekvienam vaizdui, kad vaizdai nebūtų rodomi visu originaliu dydžiu.

Lėtas įkėlimo laikas

Problema: vaizdai įkeliami lėčiau nei likusi tinklalapio dalis arba visai neįkeliami.

Sprendimas: netinkamas failo formatas gali lemti nereikalingai didelius failų dydžius, kurie turi įtakos įkėlimo laikui. Naudokite vaizdo redagavimo arba konvertavimo įrankį, kad pakeistumėte vaizdų failo formatą. Grafikai ar logotipams apsvarstykite SVG naudojimą dėl keičiamo dydžio be kokybės praradimo. Kitiems vaizdams apsvarstykite konvertavimą į WebP, kad suglaudintumėte didelius failus.

Prasta vaizdo kokybė

Problema: vaizdai atrodo pikseliuoti arba neryškūs.

Sprendimas: jei jūsų vaizdai atrodo pikseliuoti arba neryškūs, pabandykite rasti didesnės raiškos versiją. Atminkite, vaizdo raiška skiriasi nuo vaizdo dydžio. Raiška reiškia detalumo kiekį, kurį turi vaizdas, dažnai matuojamą pikseliais colyje (PPI). Didesnė raiška reiškia aiškesnį vaizdą, nepriklausomai nuo dydžio.

Jei vaizdo kokybė mažėja dėl suspaudimo, koreguokite jo suspaudimo nustatymus arba perjunkite į suspaudimo be nuostolių formatą, pvz., PNG.

Vaizdai visai nerodomi

Problema: sugadintos vaizdo nuorodos, dėl kurių vaizdas nerodomas.

Sprendimas: patikrinkite savo vaizdų šaltinio URL. Šis URL turėtų vesti tiesiai į vaizdo failo vietą. Palyginkite vaizdo failo pavadinimą URL su faktiniu vaizdo failo pavadinimu. Jie turėtų tiksliai sutapti, įskaitant failo plėtinį (.jpg, .png, .svg).

Optimizuokite svetainės vaizdus sėkmei

Vaizdų pridėjimas į svetainę nėra tik apie tai, kad viskas atrodytų gerai – tai pagrindinis veiksnys gerinant vartotojo patirtį ir didinant paieškos sistemų reitingus.

Jūsų vaizdų dydis turi įtakos abiem šiems elementams. Jei jie per dideli, jūsų tinklalapiai gali įsikelti lėtai. Jei per maži, jūsų vaizdai gali atrodyti pikseliuoti arba neryškūs.

Būtinai supraskite svetainės dizaino vaizdo matmenų reikalavimus ir pasirinkite tinkamą failo formatą, kad subalansuotumėte vaizdo raišką ir failo dydį.