Képoptimalizálás ZeroMoment Marketing

A rakodási sebesség Az egyik legfontosabb tényező a weboldal optimalizálásában. A Google számos alkalommal nyíltan kimutatta, hogy egyre nagyobb figyelmet fordítanak erre a tényezőre, és ezért ez az egyik a SEO On Page tényezők egyike, amely befolyásolja webhelyeink helyzetét. Ebben az értelemben a képoptimalizálásnak sok mondanivalója van, mivel ezek az elemek a videókkal együtt a legnehezebb erőforrások, és ezért azok, amelyek leginkább befolyásolhatják online projektünk teljesítményét.

• 1 Képoptimalizálás: méretek
• 2 Kép optimalizálás: súly
• 3 Képoptimalizálás: formátumok
  • 3.1 PNG vs JPG: Tömörítés
    • 3.1.1 .JPG
    • 3.1.2 .PNG
  • 3.2 PNG vs JPG: Átláthatóság
    • 3.2.1 .JPG
    • 3.2.2 .PNG
• 4 Képtömörítő: Képek optimalizálása az internethez
  • 4.1 TinyJPG + TinyPNG
  • 4,2 Kraken
  • 4.3 Compressor.io
• 5 Képtömörítők listája
• 6 Problémák a képek vagy a betöltési sebesség optimalizálásával?

Kép optimalizálás: méretek

Amikor egy kép optimális felbontásáról beszélünk, fontos megjegyezni, hogy az egyik fő probléma, amelyet sok webhelyen tapasztalunk, az, hogy a képek kisebb méretben jelennek meg, mint a «tényleges méretek»Magáról a képről. Ez azt jelenti, hogy ha például 100 * 100 képpontos képet mutatunk a képernyőn, de a kép valóban 200 * 200 képpontos (és súlya az, amit ez a méret elfoglal), akkor pazaroljuk a jelentős súlycsökkentés lehetőségét.

Nézzünk meg jobban egy grafikus példát:

Ez egy olyan web, amely két képet mutat. Egy a bal és egy a jobb oldalon. Ha a bal oldali képre koncentrálunk, akkor azt látjuk, hogy tökéletesen illeszkedik, és élessége vitathatatlan.

Ha a böngésző elemellenőrzőjén keresztül ásunk a forráskódba, a következőket látjuk:

A kép egy 600 * 499 pixel "tényleges méret vagy méret". De vajon rendelkeznie kell-e ilyen méretekkel ahhoz, hogy elfoglalja a teljes konténert, amelybe be van helyezve? Vizsgáljuk meg még egy kicsit:

Piros színnel látjuk, hogy a képnek a fent említett valós mérete van. Zöld színnel jelöltük meg a képhez társított CSS stílust, ahol jól látható, hogy a méretek változhatnak attól az eszköztől függően, amelyről elérjük ezt a weboldalt.

A képnek ilyen rugalmassággal kell rendelkeznie, és alkalmazkodnia kell az összes lehetséges képernyőfelbontáshoz. Óvakodjon azonban attól a felesleges mérettől, amelyet az alkalmazkodási igény kielégítésére fordítottunk.

Még egy utolsó pontot kell ellenőriznünk.
Mennyi helyet foglal el a «kép tároló«?

A böngésző elemellenőrzője ismét a következőket fedezte fel:

A "tároló mérete" kisebb, mint a "kép tényleges mérete":

Konténer = 467 * 388 képpontVS.
Tényleges dimenzió = 600 * 499 képpont

A kép túl nagy a konténeréhez képest. Túlminősítjük a képeket túlzott minőséggel, és ez közvetlen hatással van a képek súlyára és ezáltal a web betöltési sebességére.

Ha figyelembe vesszük, hogy az optimalizálás ezen hiánya extrapolálható az URL-ben található összes képre, akkor kezdünk tisztában lenni azzal, hogy mekkora súlyt tudunk megtakarítani, és milyen sebességet nyerhetünk, ha ezt tennénk. Logikailag, ha ezt a körülményt hozzáadjuk a weboldal összes URL-jének súlyához, akkor a katasztrófa jelentős lehet.

Ezért az egyik képkompresszor használata előtt, amelyet alább láthatunk, Fontos, hogy a kép méreteit a lehető legnagyobb mérethez igazítsuk, amire azt a weboldalunkon meg fogjuk mutatni.

Kép optimalizálás: súly

Ami a súlyt illeti: a képek megfelelő formátumának kiválasztása elengedhetetlen. Ebben az értelemben a Google magában az eszközben olyan formátumokat javasol, amelyeket "következő generációnak" nevez. PageSpeed ​​Insights

A JPEG 2000, JPEG XR és WebP formátumok jobban tömörítik a képeket, mint a PNG vagy JPEG formátumok, így gyorsabban letöltődnek és kevesebb adatot fogyasztanak.

Google PageSpeed ​​Insights

Mint a Google kijelenti, ezek a formátumok nagyszerű tömörítést kínálnak, de nem szabad megfeledkeznünk arról, hogy a böngészőktől függően előfordulhat, hogy nem a legjobb megoldás. Az alábbiakban közvetlen hozzáférést biztosítunk az egyes kompatibilitási táblázatokhoz:

• JPEG 2000
• JPEG XR
• WebP

Amint ezeken a kompatibilitási táblázatokon látható, bár ezeknek a formátumoknak nagyobb a veszteségmentes tömörítése, a böngészők túlnyomó többsége egyelőre nem fogadja el őket.

Szerencsére számos olyan képtömörítő eszköz áll rendelkezésünkre, amelyek megkönnyíthetik életünket, amikor csökkenteni kell képeink súlyát, minőségük romlása nélkül.

Tehát egyelőre itt az ideje, hogy folytassuk a hagyományos formátumok használatát a kompatibilitási problémák elkerülése érdekében, a képek optimalizálásával olyan képtömörítőkkel, mint amilyeneket alább láthatunk.

---