Hát nem imádod a képeket?

A képek feldobják a blogbejegyzést, megosztottabbá teszik azt, és meghatározzák az egész webhely hangvételét és márkáját.

És tudod mit? A képekre reagálunk, ezért a képek beépítése a tartalomba hatékony eszköz a blogod marketingje során.

De ha nem vigyázol, a képek a weboldal teljes méretének több mint a felét (vagy még többet) is kitehetik. Néhány évvel ezelőtt egy weboldal átlagos mérete 600-700K volt, ma már átlagosan 2MB, és ez évről évre növekszik.

Ez óriási!

Ennek fő oka az, hogy a weboldalakon egyre gyakrabban használnak több képet, és ezek a képek nincsenek megfelelően méretezve és optimalizálva. Ez azt jelenti, hogy nem webbarát módon mentik vagy állítják össze őket, hanem felduzzasztják az oldalakat.

A legtöbben azonban a képek optimalizálását utólag hagyjuk, és inkább élvezzük a szórakoztató dolgokat, mint például egy epikus poszt elkészítése vagy más bloggerekkel való kapcsolatépítés a saját fülkénkben.

De ha az oldalak felduzzadnak, az azt jelenti, hogy az oldal betöltési sebessége csökken. Lehet, hogy Ön nem gondolja, hogy ez nagy dolog, ha Ön nagy sebességű kapcsolaton van, de sok látogatója nem ilyen. A Google sem szereti a lassan betöltődő oldalakat, és ez negatívan befolyásolhatja a SEO-ját.

Miért kell optimalizálni a képeket

Keményen dolgozol a kiváló tartalom létrehozásán, és számtalan órát töltesz a blogod népszerűsítésével és más bloggerekkel való kapcsolatépítéssel, így a legutolsó dolog, amit szeretnél, hogy a potenciális látogatók elhagyják a weboldaladat, mielőtt még betöltődne!

Tanulmányok azt mutatják, hogy a látogatók 40%-a kattint a vissza gombra, ha egy webhely betöltése három másodpercnél tovább tart.

Tudom, három másodperc tényleg nem olyan hosszú idő, de ha mobilkapcsolaton vagy, és arra vársz, hogy egy webhely betöltődjön, egy másodperc is örökkévalóságnak tűnhet.

És mivel a látogatók nagy része lassabb mobilkapcsolattal rendelkezik, egyértelművé válik, hogy csökkenteni kell az oldal méretét. És már tudjuk, hogy mi a legnagyobb okozója az oldal méretének felduzzadásának - a képek.

A szükségtelenül nagy képek szintén helyet foglalnak a tárhelyen. Míg néhányan "korlátlan" tárhelyet biztosítanak, sok prémium tárhelyszolgáltató az alacsonyabb szintű csomagokon körülbelül 10 GB tárhelyre korlátozza a tárhelyet. Ez gyorsan megtelhet, különösen, ha több, képekkel teli webhelyet is üzemeltet ugyanazon a fiókon.

Hogyan állapíthatja meg, hogy a képek lassítják-e webhelyét? Tesztelje webhelye sebességét a Google PageSpeed Insights segítségével.

Ha a Google optimalizálatlan képeket jelez problémaként, a következőkről kell tudnia a javításhoz.

Képoptimalizálás alapjai

A képek optimalizálásakor a blogodon néhány különböző dologgal kell tisztában lenned: a fájltípus, a kép mérete és dimenziója, a képek kiszolgálásának módja és a képtömörítés.

Nézzük meg közelebbről az egyes területeket.

Fájltípus

A webes képeket általában PNG vagy JPEG fájlformátumban mentik - vagy GIF formátumban, ha animációról van szó. Ki ne szeretné azokat a vicces animált GIF-eket, amelyek a világhálón keringenek!

Most már technikailag Oké ha a képeket bármelyik formátumban elmenti - a látogató böngészőjének nem lesz gondja a weboldal megjelenítésével -, de a legjobb minőség és optimalizálás érdekében tartsa magát a következő szabályokhoz:

• JPEG - olyan fényképekhez és mintákhoz, ahol emberek, helyek vagy tárgyak szerepelnek
• PNG - a legjobb grafikákhoz, logókhoz, szöveget tartalmazó mintákhoz, képernyőmentésekhez, és ha átlátszó hátterű képekre van szükséged.
• GIF - ha animációra van szükséged, egyébként használd a PNG-t.

Akkor miért vannak különböző formátumok?

Nos, a PNG-t hagyományosan logók és grafikák mentésére használják, mert megőrzi az eredeti kép minőségét - senki sem akar elmosódott szöveget és pixeles alakzatokat. De ha megpróbálsz egy fényképet PNG-ként menteni, az elképesztően fog kinézni, de az eredményül kapott fájlméret nem lesz annyira lenyűgöző.

A JPEG formátumot hagyományosan fényképek mentésére használják. A drasztikusan kisebb fájlméret elérése érdekében a képadatok egy részét kidobják, de mivel a fényképek sokféle színt és természetes variációt tartalmaznak, a minőségromlás az emberi szem számára általában észrevehetetlen.

A tömörítésről később részletesebben is szólunk, de most, ha csak két dologra emlékszel, ne feledd: JPEG a fényképekhez és PNG a szöveghez/grafikához.

Képméretek

Töltöttél már be egy weboldalt, és észrevetted, hogy egy apró kép (például egy fejkép) f-o-r-e-v-e-v-e-r lassan töltődik le? Olyan lassan, hogy minden egyes sort látni lehet? Gondolod magadban, hogy lehet, hogy egy ilyen kis kép letöltése ilyen sokáig tart?

És ha ez egy nagy fejlécképpel történik, az még rosszabb, mert az egész oldal betöltését megakaszthatja.

Ennek oka az, hogy a blogger nem megfelelően méretezte át és optimalizálta a képét, és a fejképes példánk esetében lehet, hogy egy teljes felbontású JPEG képet töltött fel közvetlenül a DSLR fényképezőgépéről.

És ez egy hatalmas fájl!

A webböngésző (általában) lekicsinyíti a képet az eredeti méretétől, hogy az szépen elférjen a helyén a weboldalon. Ami a képernyőn kis képnek tűnik, az valójában egy hatalmas, 10 megapixeles fotó lehet, amelyet a böngésző valós időben kicsinyít le.

Egyes webes publikációs platformok automatikusan létrehozzák a teljes felbontású kép több változatát különböző méretekben, de ha nem, akkor érdemes a képeket előzetesen átméretezni egy képszerkesztő programban, például Photoshopban, Lightroomban, Pixlr-ben - vagy akár MS Paintben. Ez jelentheti a különbséget egy 50K-s és egy 5MB-os fájl között.

A WordPress például automatikusan létrehozza a feltöltött kép három (vagy a témától függően több) másolatát - mind különböző méretekkel -, amelyeket a blogbejegyzésekben használhat, ahelyett, hogy mindig a teljes méretű képet használná.

Ha szokásod, hogy hatalmas stockfotó-képeket töltesz fel, és szeretnél helyet spórolni a tárhely-fiókodon, az Imsanity WordPress plugin a segítségedre lesz.

Átméretezi és kicseréli az eredeti képet valami kezelhetőbbre, így még akkor sem lesz olyan rossz, ha a teljes méretű képet illeszti be a posztjába.

Az Imsanity aktiválás után a meglévő képeket is át tudja keresni és ennek megfelelően átméretezni.

A képek kiszolgálása

A képek látogatói számára történő megjelenítésének módja nem szigorúan az optimalizálásukról szól, de drámai hatással lehet az oldal betöltési idejére.

A legtöbb blogger a képeket egyenesen a tárhelyükről tölti fel, és ez általában rendben is van, de ha valóban minden kis teljesítményt ki szeretne hozni az oldalából, akkor a képek CDN-en (Content Delivery Network) történő tárolása nagy különbséget jelenthet.

A CDN stratégiailag elhelyezett webkiszolgálókból áll, amelyek a világ különböző pontjain található adatközpontokban találhatók. Ezek a szerverek az Ön képeinek másolatát tárolják, és amikor a látogató böngészője képet kér az Ön weboldaláról, a CDN automatikusan a hozzá földrajzilag legközelebbi szerverre irányítja a böngészőt.

Ez azt jelenti, hogy például az Európából érkező látogatók a képeket egy helyi európai szerverről kapják meg, nem pedig az Egyesült Államokból vagy máshonnan. Mivel a válaszidő és a hálózati késleltetés csökken, a képek sokkal gyorsabban töltődnek le, ami csökkenti az oldal betöltési idejét.

A Blogging Wizard a Sucuri-t használja (ez egy tűzfalat is tartalmaz a biztonság érdekében, valamint egy CDN-t), de vannak más minőségi szolgáltatók is, mint például az Amazon Cloudfront vagy a KeyCDN. Még a népszerű CloudFlare is, amely nem szigorúan CDN, ingyenes CDN-t kínál, és könnyen beállítható a legtöbb megosztott tárhelycsomagban.

Kép tömörítés

Ha a képek optimalizálásáról van szó, semmi sem csökkenti jobban a fájlméretet, mint a fejlett veszteséges képtömörítés.

A legtöbb képszerkesztő eszköz, mint például a Visme vagy a Photoshop, veszteséges JPEG tömörítéssel menti a fájlokat, mivel ez csökkenti a legjobban a fájlméretet. Így, miközben a kép minősége kissé romlik, a veszteséges tömörítés használata a hatalmas képeket webbarát méretűre csökkenti.

Biztos vagyok benne, hogy sokan, akik használják a Photoshop lehet, hogy úgy látja, hogy Mentés a webre funkciót, mint a képoptimalizálás mindenek felett álló funkcióját. És még az olyan online képszerkesztő eszközök, mint a PicMonkey vagy a Visme is optimalizálják a képeket.

De tudtad, hogy vannak olyan eszközök, amelyek képesek a Photoshopból vagy más szerkesztőeszközökből származó "optimalizált" képet 40%-kal (vagy még többel) összetömöríteni, és még mindig hogy az emberi szemmel majdnem azonosnak tűnjön?

Íme néhány ingyenes és fizetős eszköz, amelyek segítségével webbarát állapotba hozhatja képeit.

Asztali eszközök

ImageAlpha / ImageOptim

A Mac-felhasználók számára az ImageOptim egy ingyenes asztali eszköz, amelyet minden nap használok PNG-képek - főként képernyőképek - optimalizálására, mielőtt feltöltöm őket. Ezek az eszközök könnyen használhatók, csak húzza és dobja be a fájlokat, de egyszerre csak egy képet kell készítenie.

Pro tipp : A technikában járatosak számára ott van az ImageOptim-CLI, ahol egyszerre optimalizálhat egy egész mappa képet.

Az ImageAlpha egy veszteséges PNG tömörítő, és csodákra képes a PNG fájlok zsugorításában, míg az ImageOptim fejlett veszteségmentes (veszteséges) tömörítést végez - és eltávolítja a felesleges metaadatokat a PNG, JPEG és GIF fájlokból.

A PNG képeimet először az ImageAlpha programon futtatom át:

Itt a képernyőképemet 103K-ról 28K-ra csökkentette.

Ezután átfuttattam az ImageOptim programon, és további 10%-ot takarítottam meg.

JPEGmini

A JPEG-fájljaimat az asztali JPEGmini alkalmazással optimalizálom, amely Macre és Windowsra is elérhető.

A Lite verzióban naponta legfeljebb 20 képet optimalizálhat ingyenesen, a korlát megszüntetése 19,99 $-ba kerül.

Pro tipp : Azok a haladó felhasználók, akik a JPEGminit egy plugin segítségével integrálni szeretnék a Photoshopba vagy a Lightroomba, megvásárolhatják a Pro verziót 99,99 dollárért.

Online / Cloud / SaaS eszközök

TinyPNG

Ha egy kiváló minőségű online képtömörítő eszközt keres, a TinyPNG (a neve ellenére JPEG fájlokat is optimalizál) egy webes alkalmazás, amely lehetővé teszi, hogy akár 20 darab 5 MB-os vagy annál kisebb képet is behúzzon a böngészőjébe, és egyszerre optimalizálja őket.

Fejlesztői API-val is rendelkeznek, és elérhetővé tesznek egy WordPress plugint, amely automatikusan optimalizálja a képeket feltöltéskor.

A TinyPNG havonta 500 ingyenes képoptimalizálást biztosít, ezt követően pedig képenként 0,002-0,009 dollár közötti díjat számít fel, a mennyiségtől függően.

Most 500 kép havonta soknak tűnhet, de ha figyelembe vesszük, hogy a WordPress gyakran három-öt variációt hoz létre minden képből különböző méretben, 500 kép nem tűnik olyan nagy számnak. hogy sokan Szerencsére a képenkénti költségek kedvezőek a költségvetés számára.

EWWW képoptimalizáló

Ha nem vagy hajlandó pénzt költeni, és nem akarsz a képeid manuális optimalizálásával bajlódni, az ingyenes EWWW Image Optimizer plugin for WordPress képes automatikusan optimalizálni a feltöltött képeidet.

Választhat egy prémium előfizetést, amely veszteséges tömörítést végez, de az ingyenes verzió csak veszteségmentes tömörítést végez, így a megtakarítás közel sem olyan jelentős. Időt takarít meg, és jobb, mint a semmi.

Megjegyzés: A teljes áttekintésért tekintse meg a képtömörítő eszközökről szóló bejegyzésünket.

Befejezés

Egyes előrejelzések szerint 2017-re az átlagos weboldalméret megközelíti a 3 MB-ot, ezért itt az ideje, hogy elkezdje a képek optimalizálását.

Ne feledje, hogy nem minden látogatója rendelkezik nagy sebességű kapcsolattal, és az oldal felduzzadása és a lassú betöltési idő potenciálisan befolyásolhatja a Google rangsorolását. Hogy úgymond könnyítsen a terhelésen, szoktassa hozzá magát a képek optimalizálásához még ma.

Figyeljen a képméretekre, és a túl nagyméretű stockfotókat vagy digitális fényképezőgéppel készített képeket méretezze át megfelelő méretűre.

Ezután használja ki a modern képtömörítés előnyeit olyan asztali alkalmazásokkal, mint a JPEGmini, vagy olyan felhőalapú eszközökkel, mint a TinyPNG vagy a Kraken - lehetőség szerint integrálva őket a WordPressbe egy pluginnal.

Végül, ha a közzétételi platform automatikusan létrehozza az eredeti kép átméretezett változatait, válasszon ezek közül egyet a blogbejegyzéséhez, és ne az eredeti, teljes méretű képet.

Kapcsolódó olvasmányok: 7 mód a PDF-fájlok méretének csökkentésére.