nem biztos abban, hogy webhelye miért nem rangsorol jól a Google-on, vagy miért nem foglalkoznak vele a fogyasztók? A webhelyek képméretei, valamint a weboldal sebessége és a SEO problémák gyakran befolyásolják a visszafordulási arányokat és a rangsorolást.
sok ember számára a képek mentése az internetre mindig rejtély volt. A nehéz képek (eredeti képméretek 5000px szélességben, optimalizált képek) nemcsak rontják a webhely felhasználói élményét, hanem negatív hatással lesznek a SEO stratégiájára is (betöltési sebesség, visszafordulási arány, rangsor stb.).
bontsuk le a weboldal képméretére vonatkozó irányelvek listáját.
miért fontosak a képméretek és a weboldal teljesítménye?
a weboldalak betöltése hosszabb időt vesz igénybe, ha a grafika nincs optimalizálva. A lassú webhelyek gyenge felhasználói élményt eredményeznek, kisebb a valószínűsége a rangsorolásnak a Google keresésekben, és ennek eredményeként kevesebb lekérdezés és fogyasztó.
a weboldal képméretére vonatkozó irányelvek megemlítik, hogy a fényképek megfelelő arányban történő mentése és az internetre történő optimalizálása számos dologban segíthet, többek között:
• sebesség
a Google kutatása szerint, ha egy weboldal betöltése 5 másodpercnél tovább tart, 90% – kal nő annak valószínűsége, hogy egy mobil látogató elhagyja az oldalt. Lehet, hogy felgyorsítja a weboldal oldalait a képméretek csökkentésével és csökkentésével.
• felhasználói élmény
a látogatók vonzóbb élményt nyújtanak a webhely böngészése során, ha kiváló minőségű, lenyűgöző képeket használ. Zökkenőmentes és zökkenőmentes élményt nyújt látogatóinak azáltal, hogy optimalizálja ezeket a fényképeket és gyorsan betölti azokat, ami arra ösztönzi őket, hogy több időt töltsenek a webhelyén, és felfedezzék a tartalmát.
minél hamarabb töltődik be webhelye, annál magasabbra rangsorolhat. Mind az asztali, mind a mobil eszközökön az optimalizált grafikával rendelkező weboldalak lényegesen gyorsabban töltődnek be.
• értékesítés
a gyorsabb betöltési sebesség és a jobb SEO segíthet több látogatót vonzani webhelyére, növelve annak esélyét, hogy kapcsolatba lépjen és lefoglaljon.
melyek a legmegfelelőbb képméretek a webhelyek számára?
a Strikingly a képméretek széles skálájával működik a különböző képernyőméretekhez, szakaszokhoz, stílusokhoz és tervekhez. Időnként azonban hasznos, ha durva fogalmunk van arról, hogy milyen dimenziókat kell feltölteni.
Íme néhány általános weboldal képméret irányelveket követni!
a kép feltűnően
1. Képek a háttérhez
a feltűnő háttérfotókat úgy tervezték, hogy a képernyőméretek széles skálájához illeszkedjenek, a monitortól a táblagépen át a telefonig. Annak érdekében, hogy a háttér minden képernyőn kiválóan nézzen ki, javasoljuk az 1600 pixel széles, 900 pixel magasságú méretet. Tartalmazza a nem háttér fotók személyek, márkák, és egyéb információk óvatosan!
2. A háttér beállításai
a háttér méretezéséhez/igazításához van néhány alternatíva.
stretch/Cover default: ez az opció kiterjeszti a képet, hogy kitöltse a teljes képernyőt, mind magasságban, mind szélességben. Mivel a kép bármilyen képernyőméretben háttérként fog működni, ez általában a legjobb megoldás. Ha azonban a kép oldalán tartalom található (különösen a bal és a jobb oldalon), előfordulhat, hogy a mobiltelefonokon nem látható.
Contain: a Contain megjeleníti a teljes képet, biztosítva, hogy annak egyetlen része sem legyen levágva. Egyes eszközökön azonban ez némi fehér helyet eredményezhet.
középpont: a kép a szakasz közepén jelenik meg, és nem lesz méretezve, ha a középpontot választja. Másrészt, a háttér azt mutatja, fehér tér szélei körül a kép túl kicsi. A kép egyes elemei levághatók, ha túl nagy, különösen kisebb kijelzőkön.
csempe: a csempe középre helyezi, majd megismétli a képet, ami hasznos a minták létrehozásához.
a webhely képméretére vonatkozó irányelvek elindításához jegyezze fel, hogy a kép milyen széles legyen az oldalon.
a kép feltűnően
• háttérképek
a háttérképek ideális mérete 1600x900px
• teljes szélességű képek
a legjobb eredmény érdekében legalább 1400 Pixel szélesnek kell lenniük. A weboldal képméreti irányelvei szerint
a félszélességű képeknek legalább 700 képpont szélesnek kell lenniük a legjobb minőség érdekében.
• ons szélesség képek
a képeknek legalább 480px szélesnek kell lenniük a legjobb minőségű 1/3 szélességű képekhez.
• ons szélesség képek
a legjobb minőségű 1/4 szélességű képekhez legalább 360 pixel szélesnek kell lenniük.
• Kis ikonok és logók
legalább 100 pixel szélesnek kell lenniük.
• Galéria képek
bármilyen méretű finom galéria képek! A galériában lévő képek egy fénydobozban nyílnak meg a webhely tetején.
milyen méretű kép szükséges a webhelyéhez?
a képeknek az oldal elrendezésétől függően a lehető legnagyobb méretűnek kell lenniük ahhoz, hogy elférjenek a “konténereik” a webhely maximális teljesítményéhez. A diavetítés képei például gyakran nagyobbak; a blogképek közepes méretűek (szélességük megegyezik az oldalszélességgel mínusz az oldalsávval); a miniatűrök kisebbek stb.
a webhely képméretére vonatkozó irányelvek szerint kritikus fontosságú először megállapítani a képméreteket a webhely tartalmi területének szélességének kiszámításához. Használhatja a” page ruler “böngésző plugint, hogy segítsen az intézkedések meghozatalában, vagy használhatja a webböngészőbe integrált fejlesztői eszközöket, ha van tapasztalata: kattintson a jobb gombbal bármelyik oldal elemre, majd válassza a legördülő menüből az” ellenőrzés ” lehetőséget.
a kép feltűnően
ezután az eszköztáron az elemválasztó eszközzel vigye az egérmutatót az érdeklődő kép vagy tartalom szakasz fölé:
a kép a feltűnően
a kép a Strikingly
– ből származik ebben az esetben a fenti oszlop legalább 525 Pixel szélességű képet igényel.
azt mondjuk, hogy “legalább”, mert a nagy sűrűségű “retina” képernyővel rendelkező újabb okostelefonok képeinek nagyobbnak kell lenniük, hogy a lehető legélesebbek legyenek.
vegye figyelembe a következő forgatókönyveket:
A. teljes szélességű diavetítés Webképméret
a webhely képméretre vonatkozó irányelvei 2560 képpont szélességet javasolnak teljes szélességű diavetítésekhez (amelyek automatikusan kiterjednek a böngésző teljes méretére). Ez a szokásos felbontás szélessége 27 “és 30” monitorok.
a képek olyan magasak lehetnek, amennyit csak akarsz, hogy elérjék a választott képarányt. Például a teljes oldalas diavetítések, amelyek gyakoriak az esküvői fotózási webhelyeken, fenntartják a fényképek eredeti képarányát. Más webhelyek olyan diavetítést használnak, amely az oldal teljes szélességét lefedi, de kisebb a magassága (ami 3:1 körüli képarányhoz vezet).
az alábbiakban bemutatunk egy példát a fényképészeti weboldalakról származó “panorámás” diavetítésekre:
a kép a Strike Usre weboldaláról származik
a képeknek 2560 képpont szélesnek kell lenniük (2500 képpontra kerekítve), és bármilyen magasságot kell választaniuk a böngésző teljes szélességét lefedő képekhez (attól függően, hogy meg szeretné-e őrizni a képek natív képarányát, vagy inkább panorámás vágást szeretne).
ez nem az az eset, amikor meg kell dupláznunk a retina kijelzők képméretét, mert ez hatalmas 5000 képpontos képeket eredményezne (hogy ne tegyük hozzá a képlopás veszélyeit, nagy fájlméretekkel).
állítsa be a szükséges képméretet kisebb diavetítésekhez, amelyek nem az oldal teljes szélességét, hanem csak egy részét foglalják el (esetleg 2000 képpont vagy 1800 képpont stb.)
a kép a Strikingly usre weboldaláról származik
B. a galériákban (és a Lightbox nézetben nagyított Miniatűrökben) található képméretek
a miniatűr galériák olyan egyedi helyzetek, amikor a miniatűrök méretét figyelmen kívül hagyják annak biztosítása érdekében, hogy a fényképek nagyításkor elég nagyok legyenek.
a teljes képernyős diavetítésben (általában félig átlátszó átfedéssel) megnyíló miniatűr képek rácsát “lightbox nézetnek”nevezzük:
mivel ezek a fényképek teljes képernyős módban nyílnak meg, a weboldal képméreti irányelvei azt javasolják, hogy legalább 1500 Pixel szélesek legyenek (a leghosszabb szélén), hogy jól nézzenek ki asztali számítógépeken és táblagépeken.
akár 2000 pixelt is elérhet, ha hozzá szeretne adni néhány extra “wow tényezőt”, bár ez általában nem így van.
a képeket egyébként a böngésző állítja be a mobileszközökön, és az 1500px elég nagy ahhoz, hogy éles legyen a magas PPI “retina” képernyővel rendelkező okostelefonokon.
a legfeljebb 1200 képpont magasságú függőleges/álló képek (például 800×1200 képpont 2:3 képarányú függőleges kép esetén vagy 900×1200 képpont 3:4 képarányú függőleges kép esetén) még kisebbek is lehetnek.
ha a diavetítés lehetővé teszi a fényképek közötti böngészést oldalsó nyilakkal, golyókkal, mobilon vagy billentyűzet nyilakkal az asztalon, az ilyen képméretek korlátozása ésszerű rövidséget eredményez a fájlméretben, ami gyorsabb képterhelést eredményez:
C. ajánlott képméretek blogbejegyzésekhez és egyéb statikus képekhez az Oldalelrendezésekben
ha a blogfotók nem igényelnek nagyításra kattintást (vagy “lightbox”) funkciót, akkor azokat az oszlop vagy a tartalom szerint kell méretezni a terület szélessége.
Vegyük a következő példát egyetlen blogbejegyzésre:
a kép a Striktly usre weboldaláról származik
a tartalomterület valós szélességét a szöveg bármely bekezdésének a fent vázolt módszerekkel történő mérésével állapíthatja meg, például:
a kép a Strikingly usre weboldaláról származik
Alternatív megoldásként, ha már vannak képei, láthatja, hogy a böngésző milyen méretűre méretezi őket.
ugyanazon információk megszerzéséhez használhat egy böngésző plugint, például képinformációk megtekintése (tulajdonságok).
ezzel az információval (például 825 Pixel) most megduplázhatja a méretet, hogy figyelembe vegye a retina kijelzőket (tehát 1650 Pixel szélességű).
a webhely témájától és a képlopás kockázati toleranciájától függően csökkentheti ezt a mennyiséget egy ésszerűbb 1200 pixelre a leghosszabb szélén (tehát a vízszintes képeknek 1200 képpont szélesnek, a függőleges képeknek pedig 1200 képpont magasnak kell lenniük, miközben megtartják eredeti képarányukat).
a miniatűrként használt kisebb fényképek (amelyeket nem kell kibővíteni) ugyanazon döntéshozatali folyamat tárgyát képezik.
következtetés
ezek a webhely képméretre vonatkozó irányelvei nem igazán vonatkoznak az olyan fotóarchiválási szolgáltatásokra, mint a PhotoShelter vagy a SmugMug (amelyek beépített biztonsági intézkedésekkel rendelkeznek, és alacsony felbontású miniatűröket generálnak az eredeti nagy felbontású fájlokból, amint azt a webhely igényli), vagy amikor ezeket a képeket letöltésként vagy nyomtatásként értékesíti, amint azt az elején említettük.
a weboldal képméretre vonatkozó irányelveinek betartása kötelező, ha saját üzemeltetésű webhelye van, és fényképeit csak az Interneten kell bemutatnia.
a megfelelő képek kiválasztása fontos szempont a vizuálisan vonzó és gyorsan betölthető weboldal létrehozásában. Kétségtelen, hogy van egy tanulási görbe. Vannak azonban más előnyök is, és ez mind része a weboldal létrehozásának és fenntartásának izgalmának!