menti a képeket a web mindig kicsit rejtélyes sok. Nehéz képek feltöltése (eredeti képméret 5000px szélességben, nem optimalizált képek) nem csak problémákat okoz a webhely felhasználói élményével, hanem befolyásolja a SEO stratégiáját is (betöltési sebesség, visszapattanási Arány, rangsorolás stb.).,
Ez a cikk több részre oszlik, amelyek mindent tartalmaznak, amit tudnia kell arról, hogyan készítheti el a képeket az interneten. A bejegyzés első részében felsoroljuk az ajánlott képméreteket a Flothemes webhelyéhez. Ezután a cikk bemutatja, hogyan lehet ellenőrizni a webhely különböző szakaszait, hogy azonosítsa a képek megfelelő méretét, mielőtt feltölti őket az internetre. Azt is elmagyarázzuk, hogyan kell helyesen exportálni / menteni a képeket, így optimalizálva vannak a sebességre.,
végül néhány kép SEO tippet adunk arról, hogyan lehet helyesen címezni a képeket a mentéskor, és miért javítja az ALT címkék használata a SEO-t. A már feltöltött képeket a webhelyére, megmutatjuk, hogyan lehet azonosítani a képeket, amelyek túl nagy, és lassítja a webhely. Kezdjük!
miért fontosak a képméretek és a webhely teljesítménye?
a nem optimalizált képek lelassítják a webhelyeket. Lassú webhelyek = rossz felhasználói élmény, alacsonyabb esélyek a Google keresések rangsorolására, végül kevesebb érdeklődés és ügyfelek.,
A képek megfelelő méretű mentése és a képek optimalizálása az interneten segíthet néhány dologban:
- sebesség – a Google által végzett kutatás szerint, ha egy weboldal több mint 5 másodperc alatt töltődik be, akkor annak a valószínűsége, hogy egy mobil felhasználó elhagyja ezt az oldalt, 90% – kal növekszik. A képméretek átméretezésével és csökkentésével gyorsabban készíted el a weboldalad oldalait.
- felhasználói élmény-a jó minőségű, hatásos képek segítenek a látogatóknak vonzóbb élményben, miközben böngészik az Ön webhelyét., Azáltal, hogy ezeket a képeket optimalizált betöltése gyors-te biztosítja a zökkenőmentes és zökkenőmentes élményt nyújt a látogatók, ami motiválja őket, hogy több időt töltenek a webhelyen, és fedezze fel a tartalmat.
- SEO rangsor-a Webhely sebessége rangsorolási tényező. Minél gyorsabb a webhely, annál jobb lehet potenciálisan rangsorolni. Az optimalizált képekkel rendelkező weboldalak sokkal gyorsabban töltődnek be mind az asztali, mind a mobil eszközökön.
- Sales-gyorsabb betöltési idő és jobb SEO segíthet, hogy több felhasználó a webhely, ami növeli az esélyét, hogy érdeklődött, lefoglalt.,
megjegyzés: amikor a képméretről beszélünk, a képméretet képpontokban értjük.
melyek a web és a Flothemes legjobb méretű képei?
képek webre történő feltöltésekor számos szempontot kell figyelembe venni, például azt, hogy mire használják a képet, mekkora legyen a fájl, és milyen típusú képet kell használni a webhely különböző területein.,
Képhasználat és Típus
vannak olyan esetek, amikor különböző képméreteket szeretne használni a webhely különböző területein, az alábbiakban a leggyakoribb területeket és az egyes méretezési lehetőségeket fedem le. Vegye figyelembe, hogy ezek ajánlottak, retina Barát, méretezési lehetőségek, figyelembe véve, hogy a felhasználók többsége mobil vagy 13-15 hüvelyk átlagos méretű eszközön tekinti meg a webhelyet. Ha azonban arra törekszik, hogy a webhely jól nézzen ki a 27 hüvelykes monitorhoz (amely nagyon nagy felbontású), vegye figyelembe, hogy lehet, hogy nem az, amit a potenciális ügyfelek használnak.,
ha pontosabban szeretné tudni, hogy a felhasználók hogyan tekinthetik meg webhelyét és portfólióját, ellenőrizheti a webhely eléréséhez használt eszközöket a Google Analytics segítségével (lépjen a közönség – technológia – böngésző & OS – képernyőfelbontás), és állítsa be az ajánlott méretet, hogy megfeleljen az átlagos felhasználó kívánt arányának.
teljes szélességű képek
2400x1600px, JPEG, elmentve webre, és optimalizálva
az egész oldalon lehet, hogy vannak olyan szakaszok, ahol teljes szélességű képeket kell használni, amelyek balról jobbra lefedik a teljes képernyőt., Ezek a területek lehetnek hős képek, teljes képernyős diavetítések, banner képek. Annak érdekében, hogy a teljes szélességű képek jól nézzen ki minden olyan eszközön, amely nagy vagy kicsi, az ajánlott méret 2400x1600px. Vegye figyelembe, hogy az eszközök aránya eltérő, mint az, amit lőni, és lehetséges, hogy a képek lesznek vágva, amikor megtekintették az interneten. Ajánlásként próbáljon a szokásosnál szélesebb felvételeket készíteni a webes tartalomhoz, hogy elkerülje a fontos képtartalom kivágását.,
belső tartalom képek
vízszintes – max szélesség 1500px, JPEG, mentett web, és optimalizált
függőleges – max szélesség 1000px, JPEG, mentett web, és optimalizált
a webhely oldalain képek, szöveges területek, cselekvési gombok stb. Alapvetően ezek azok a szakaszok, ahol a képek a belső tartalom részét képezik (olvassa el “nem teljes szélességben”)., Ezekben az esetekben, kivéve, ha az ajánlott méretezés van megadva, mint néhány Flothemes blokkok csinálni, akkor kövesse a fenti ajánlásokat vízszintes és függőleges képek. Az Ön aránya alapján a magasság a képek mentésekor ennek megfelelően módosul.,mutasd meg galériák: győződjön meg róla, hogy minden azonos magasságban ajánlott 1500px, függetlenül attól, hogy ők vízszintes vagy függőleges
blogbejegyzést Képek
- ha készül képeket feltölteni be egy blogpost, győződjön meg róla, hogy a azonos szélességű, ajánlott 1500px, függetlenül attól, hogy ők vízszintes vagy függőleges
Kiemelt Képek
3 típusú kiemelt képek: portré, tájkép, illetve hős képek., A portré és a tájkép méretezése ugyanazt az ajánlást követi, mint a belső tartalomképek, míg a hero képek ajánlott mérete teljes szélességű képekkel van lefedve. A legfontosabb, hogy a jó kiemelt képek következetesség. Ha az összes portrét szeretné használni, Győződjön meg róla, hogy azonos méretűek, ugyanez vonatkozik a tájképekre és a hős képekre is. Ha falazott rácsot használ, a fenti méretezés nem annyira releváns, csak győződjön meg róla, hogy a képek szélessége legalább 1000px.,
Ha bármilyen problémája van a képméretezéssel, győződjön meg róla, hogy megnézi a Képméretezési lehetőségeket a Flothemes beállításaiban, hogy megbizonyosodjon arról, hogy helyesen vannak-e beállítva.
Ways to find out correct image size for your web
lehetséges, hogy a fenti ajánlott méretek nem felelnek meg az Ön igényeinek egy adott elrendezés miatt. Ha nem biztos a megfelelő kép dimenzió, hálásan, van néhány módja annak, hogy segít könnyen vizsgálja meg a honlapon képek, valamint azonosítani a megfelelő méretezés szükséges minden elem a webhelyen.,
fontos megjegyezni, hogy a retina eszközök esetében meg kell duplázni a képpont sűrűségét. Ez azt jelenti, hogy kétszer akkora képekre van szükség a retina készülékekhez, hogy jól és ropogósnak tűnjenek. Tehát miután megtalálta a megfelelő képméreteket a webhely minden egyes szakaszához, meg szeretné duplázni ezeket a méreteket, majd csak exportálni és feltölteni őket a webhelyére.
a., A képméret Info kiterjesztés használata
a webhely képméreteinek megtalálásának első módja a Chrome képméret-információ kiterjesztésének használata (ha nem használja a Chrome-ot a számítógépen, javasoljuk, hogy használja a webhely létrehozása közben). Miután telepítette a kiterjesztést, ez az eszköz lehetővé teszi, hogy megtudja a webhely minden képelemének képméretét.
nézze meg a képeket a webhelyén, jegyzeteket készítsen, majd ezzel a tudással pontosan testreszabhatja fényképeit, hogy illeszkedjen a szóközökhöz, ahogyan a téma kialakításában vannak., Ne feledje, hogy a retina képernyőkkel a képeknek kétszer olyan nagynak kell lenniük, mint a tervezett hely. Tehát ha 750x500px képterülete van, a retina esetében 1500x1000px-nek kell lennie, amikor feltölti a WordPress-t (vagy bármely más platformot).
például: amikor megvizsgáljuk egy képet ezzel a kiterjesztéssel, 780x520px-en jelenik meg, de tényleges mérete 1560x1040px. Ennek oka az, hogy retina képernyőt használunk a kép ellenőrzésekor. Ebben az esetben a méretméretek segítségével kiválaszthatja a kép méretét.,
nem retina készüléken a megjelenített méretek változatlanok maradnak. Ebben az esetben duplázzuk meg a számokat, és töltsünk fel ilyen méretű képeket.
az eszköz fő korlátozása az, hogy nem tudja ellenőrizni a háttérképeket a méretezéshez. Sok témában háttérképeket használnak a kép HTML elemek helyett, mivel rugalmasabbak a képek megjelenítésekor. Ha nem tudja ellenőrizni a képeket, mert azok háttérképek, akkor a következő módszerrel megtekintheti a webhely képméretét.
b., A
Inspector eszköz használatával a Chrome és a Safari segítségével a fejlesztők inspector eszköz segítségével képméreteket is találhat az oldalon. Az elv ugyanaz lesz, mint korábban, ellenőrizze a különböző elemeket a helyszínen, majd jegyezze fel a méreteket. Duplázza meg a retina eszközök képméretét, majd töltse fel őket a WordPressbe, miután optimalizálták őket a webre, és helyesen nevezték el a SEO-ra.
ennek a módszernek az a korlátai, hogy ha a webhely rem értékekben beállított érzékeny elemeket használ, akkor a képek zsugorodhatnak, ha az ellenőrt ugyanabban az ablakban használja., Ha a webhely érzékeny elemeket is használ, akkor nagyobb lesz a nagyobb képernyőkön, mások pedig kisebbek lesznek. A legjobb, ha egy nagyobb képernyőt használ, ahol lehetséges, a webhely ellenőrzésekor, így a legpontosabb képméretet kaphatja. Mindenesetre, ezzel a módszerrel kapsz egy jó jelzés a méret a webhely, valamint lehetővé teszi, hogy a megközelítés hozzá képeket a honlapon nagyobb gondossággal.
Chrome
a Chrome beépített fejlesztői eszközöket, ezért ez a legnépszerűbb böngésző az interneten a fejlesztők és a tervezők számára., A következő videó bemutatja, hogyan ellenőrizheti a képeket a webhelyén, hogy megtudja méretüket:
Firefox
a Firefox, hasonlóan a chrome-hoz, beépített inspector eszközzel rendelkezik, amely lehetővé teszi a webhely képeinek ellenőrzését.
Safari
Ha Safarit használ, akkor az ellenőr eszközzel láthatja a képek méretét. Ellenőrizze az alábbi útmutatót a fejlesztői eszközök engedélyezéséről.,
most már a webhely különböző szakaszaiba léphet, és elkészítheti a képméreteket.
galériák esetén érdemes megnézni a képek magasságát, mivel általában a magasság korlátozza őket (így a szélesség auto értékre állítható).
blogbejegyzéseknél meg kell jegyezni a képek szélességét, mivel azok szélessége korlátozott (a magasság automatikus lehet).,
a webhely többi eleméhez a fent leírt módszert kell használnia a megfelelő méretek eléréséhez,majd töltse fel a webhely optimális méreteit.
most, hogy tudja, milyen méretekre van szüksége a webhely összes eleméhez, elmagyarázzuk, hogyan lehet optimalizálni az összes képet méretre, ez az adatok méretezése szempontjából. A képek fájlmérete szintén nagyon fontos az interneten. A felduzzadt és nehéz képek feltöltése a webhelyére megterheli a szerver erőforrásait, lelassítja webhelyét, és gyakorlatilag negatív felhasználói élményt hoz létre.,
képek optimalizálása és mentése webre
számos szempontot kell figyelembe venni a képek webre történő optimalizálásakor és mentésekor. A céltól függően meg kell fontolnia, hogy milyen fájltípust használjon, JPG, PNG vagy GIF. A képeket SEO célokra kell helyesen címkézni, majd a megfelelő színformátumban (sRGB for web) kell elmenteni.
a céltól függően a képeket a következő formátumok egyikébe kell menteni .jpg, .gif, vagy .png. A JPG lesz a leggyakoribb formátum, amikor képeket ment a Portfólió webhelyére, ők is a legkönnyebb méretűek lesznek.,
a fájlnevek esetében ellenőrizze, hogy azok megfelelnek-e minden egyes képnek vagy blogbejegyzésnek. Csak betűket, számokat, aláhúzásokat és kötőjeleket használjon. Próbáljon csak angol betűket használni. Más nyelvek karakterei, kérdőjelek, terek, százalékos jelek helytelenül tölthetnek fel, vagy váratlan viselkedést okozhatnak a galériákban vagy a blogbejegyzésekben.
például, ha éppen boho esküvőt tett a Biltmore Santa Barbara-ban, jelölje meg a képeket, boho-esküvő-biltmore-santa-barbara_0001.jpg ez lesz sokkal SEO barátságos, és lehetne jobb rangsor a webhely.,
képek optimalizálása A Lightroomban
nézzünk szembe a tényekkel, sok különböző beállítás közül választhat, végtelen számkombinációkat adhat meg. Ha azonban már ismeri a képformátumot és a szükséges fájlképméreteket, akkor sokkal könnyebb.
A Lightroom, lehet, hogy az Export Dialógusban 3 módon:
Jelölje ki, majd Kiviteli
egyszerűen jelölje ki / válassza ki a fényképet a Lightroom könyvtárat, majd kattintson a jobb gombbal a képre. A felbukkanó menüből válassza az Exportálás lehetőséget.,
Fájl Export
A második út, hogy menjen a Fájl -> Export
Segítségével a billentyűparancsok
A harmadik, a leggyorsabb módja az, hogy egy billentyűparancsot:
shift + command + E (⇧+⌘+E)
nem számít, hogy ott vagy. Ezek bármelyike működni fog, ezért válassza ki a legegyszerűbbet az Ön számára.,
Lightroom Export párbeszédablak
most, hogy tudod, hogyan exportálhatod a képeket webre, a Lightroom export párbeszédpanelen kiválasztható 4 szakaszra és a különféle lehetőségekre fogunk kiterjedni, hogy optimalizált képeket exportálhass az internetre.
1. A fájl elnevezése
minden exportálás saját átnevezési beállításokat tartalmazhat. Ha ragaszkodik az alapértelmezett opcióhoz, a képek neve megegyezik az eredeti fájlokkal, majd jpeg képként mentésre kerülnek., Javasoljuk azonban, hogy jelölje be az “Átnevezés” négyzetet, majd válasszon egyet a Lightroom által kínált sok átnevezési sablon közül az exportált képek testreszabásához. A fájl elnevezésekor átneveztük a képfájlneveket “egyéni Névsorra”, ahol az Egyéni szöveg szorosan kapcsolódik a blogbejegyzés címéhez vagy a blogbejegyzés kulcsszavaihoz.
2. A
Fájlbeállításokban ellenőrizze, hogy a kép formátuma JPEG-re van-e állítva. Ez a leginkább web-barát lehetőség. A minőség nem lehet kevesebb, mint 65., Általában 75-re állítottuk. A színtér kell sRGB. Ez a színtér által használt web, így teszi a legjobb. Ne jelölje be a “fájlméret korlátozása:”négyzetet. A jelölőnégyzet bejelölése jelentősen csökkentené a fájl minőségét.
összefoglalva, a képek mentésekor használja ezeket a beállításokat:
- 75% minőség
- .jpeg formátum (.PNG logók és ikonok esetén)
- sRGB színek
3. Képméretezés
jelölje be a négyzetet átméretezés, hogy illeszkedjen, majd válassza a Width & Height lehetőséget., A W: H mezőben adja meg a W (szélesség pixelben) értéket a szükséges értékhez (1500px blogbejegyzésekhez, 2880 diavetítéshez). Ha az értéket H (magasság) üresen hagyja, akkor az automatikus méretezésre kerül.
Galériáknál a w-t üresen hagyhatja, a H-T (magasságot) pedig 1500px-re állíthatja, ennek a legtöbb témához optimálisnak kell lennie.
a fenti méretek már optimalizálva vannak retina eszközökhöz.
4. Kimeneti élezés
jelölje be a “Élesítés” melletti négyzetet, majd válassza ki a “magas”értéket.
most exportálhatja a képeket, majd ezt a folyamatot bármikor követheti, amikor képeket exportál.,
képminőségi Beállítások
egy fotós álomvilágában mindig maximális minőségben exportálnánk a képeket. A valóságban kiderül, hogy a maximális minőségi exportra nincs szükség. Webméretekben a minőségbeli különbségeket gyakran nehéz érzékelni, ami azt jelenti, hogy kissé csökkenthetjük a minőséget, jelentősen csökkentve a fájl méretét.
mindaddig, amíg a képek nem puhaak, az ügyfelek nem fogják tudni a különbséget az Ön által készített kép és a webhelyén megjelenő kép között.
Ez vonatkozik a képek színeire is., Mindenki képernyőjét másképp kalibrálják, így a böngészőben lévő kép és a választott szerkesztőeszköz közötti Kis színváltozások miatt aggódni időpocsékolás, kivéve, ha ez tönkreteszi a képminőséget.
a minőségi skála felső végén csökkenő hozamok vannak. Az érzékelt minőség 75-100% közötti különbségét nehéz látni, de jelentősen növeli a fájl méretét.
a fenti eredmények alapján kiválasztva a 65-75 minőségű exportot., A megfelelő képminőségi egyensúlyt és optimális képfájl-méretet biztosítja.
most rajtad a sor, hogy nevezd át a fájlokat, exportáld őket az internetre, mentsd el őket webre, és lesz néhány igazán jól optimalizált képed az interneten.
bónusz lépés: optimalizálja a képeket, mielőtt feltölti őket a webhelyére
van egy utolsó lépés, amely segíthet drasztikusan eltávolítani a felesleges adatokat a képekről, és csökkenti a fájl méretét – olyan eszközökről beszélünk, mint a JPEGmini vagy a TinyJPG.
Ezek az eszközök segíthetnek a képek további optimalizálásában., Válassza ki az egyiket, majd futtassa a képeket rajta:
- JPEGmini-ez az alkalmazás lehetővé teszi, hogy tömörítse a képeket, és csökkentse a fájl méretét anélkül, hogy látható hatást gyakorolna a kép minőségére. Ha rendelkezik a Pro verzióval, van egy kiterjesztés a Lightroom számára, amely ezt automatikusan exportálja – ez egy nagyon ajánlott eszköz minden fotós számára.
- TinyJPG vagy TinyPNG-a képeket tinyJPG vagy tinyPNG segítségével futtathatja, hogy tovább tömörítse a képeket. Vannak 2 korlátozások, bár., Az eszköz ingyenes verziójával egyszerre csak 20 képet tömöríthet, a képenkénti fájlméretnek pedig 5 MB alatt kell lennie.
Ez lesz az utolsó lépés a gyors webes optimalizált képek létrehozásában, hogy a Webhely sebessége gyors legyen, a képek pedig jól néznek ki!
További információ Olvassa el ezt az átfogó útmutatót arról, hogyan lehet optimalizálni a képeket a WordPress webhelyére.
Image SEO
most, hogy már megvan a képek mérete, optimalizált és feltöltött a webhely-most akkor szeretnénk hozzáadni ALT címkék! Ez az utolsó lépés az optimalizált képek SEO célokra történő létrehozásában., Az ALT címke az, amit a keresőmotorok használnak a képek olvasásához. Nélkülük a képek nagyjából nem léteznek az interneten.
szerencsére a WordPress segítségével feltöltés után bemehetsz a médiakönyvtárba, és címkézhetsz minden képet., Egy nagyszerű plugin, hogy majd hagyom, hogy ezt tedd, hogy gyorsan WP Meta-SEO, amikor ki lehet menni WP Meta-SEO > Kép Információ hozzáadása ALT tag, hogy olyan képek, ahol nincs jelen, miután befejezte a plugin lehet kapcsolva:
vannak is több plugin, amely növeli az alt tag automatikusan. A Rank Math egy jó plugin megoldás erre, egyszerűen telepítse, és automatikusan hozzáadja az ALT címkéket a képleírásból vagy a címből történő feltöltéskor.,
olvassa el ezt a képet SEO útmutató felfedezni további tippeket és trükköket, és győződjön meg róla, hogy a legtöbbet hozza ki a képeket a keresési eredmények között.
tehát ez az emberek. A 3 lépés, hogy miután optimalizált képeket a honlapon.
kezdje el kitalálni a kép méreteit, majd mentse el őket helyesen az interneten, adjon hozzá megfelelő címeket, optimalizálja méretüket. Végül adjon hozzá alt címkéket a SEO javításához a WordPress segítségével (lehetővé kell tenni ALT címkék hozzáadását az összes tartalomkezelő rendszerben,olvassa el a dokumentációt, hogy megtudja, hogyan, vagy elérje a támogatást).,
nem optimalizált képek keresése
Ha már feltöltött képeket a webhelyére, és szeretné tudni, hogyan találja meg azokat, amelyek lelassítják az oldalt, nézze meg a következő videót. Az olyan eszközök, mint a GTMetrix vagy a Pingdom, vagy a böngészőkonzol használata könnyen lehetővé teszi, hogy olyan képeket találjon, amelyek túl nagyok az internethez.
Ha szeretne többet megtudni a webhely gyors optimalizálásáról, nézze meg ezt a hasznos útmutatót.
Flothemes
Leave a Reply