MagyarEnglishDeutschFrançais

Translation

MagyarEnglishDeutschFrançais

Képméret 85% -kal csökkenthető? Gyorsabb lesz a weboldalam?

//Képméret 85% -kal csökkenthető? Gyorsabb lesz a weboldalam?

Képméret 85% -kal csökkenthető? Gyorsabb lesz a weboldalam?

Kerültél már dugóba? Ha igen akkor tudod milyen bosszantó és lassú, ilyenek a nagy, nem optimalizált weboldalon megjelenő képek is. Hogyan oldjuk meg?

 

1. lépés: az eredeti méret csökkentése

Ha a fenti kérdésre “igen” a válasz, akkor a megoldás: csökkentsd a képméretet. Bármely képszerkesztő program tudja ezt és egyszerűen beállíthatod. Az iPhone normál vízszintes képének 3200 px szélessége van. A fejléc kép, a 13 hüvelykes képernyő teljes szélességét figyelembe véve kevesebb, mint 1300 képpont lenne. Tehát egy iPhone-val készített és azonnal feltöltött kép, szerkesztés nélkül, közel háromszor nagyobb.

Használhatod a Photoshopot, de alapvetően bármely más képszerkesztő szoftver segíthet, mivel ez egy nagyon egyszerű feladat. Használhatod az Előnézetet Mac-en vagy egy online szolgáltatást, amely lehetővé teszi az összes méret egyszerre történő módosítását. Egy másik egyszerű szoftver, amit szeretek Pixlr , egy egyszerűbb és teljesen ingyenes Photoshop stílusú szoftver, amely a böngészőben fut.

2. lépés: tömörítsd a képet a TinyJpg.com-tal

Töltsd le a képet gépedre és csak húzd és vidd a TinyJPG.com weboldalra. Néhány másodperc alatt megkapod a kép optimalizált verzióját. Az új tömörített kép alig különböztethető meg az eredetitől.

A weboldal szerint ez így működik: “A textúrák, a minták és a színek automatikusan azonosulnak. A kódoló ezen adatok alapján optimálisan tömörített JPEG fájlt hoz létre. A végeredményt összehasonlítjuk az eredeti és a optimalizált verzióval. A felesleges metaadatokat is törlik “.

Ezt a megoldást a WordPress-en kívüli platformokon futó webhelyek megoldásaként használom, ahol a következő lépést nem lehet használni.

3. lépés: használj plugint, hogy tömöríts

Számos plugin van, amely automatizálhatja a második lépést. A Imagify használom erre. Ez az eszköz tömöríti a weboldalon található összes képet, mutatja a mentett százalékot és a képméretet.

Két különböző forgatókönyvet teszteltem:

  • Öt iPhone 6 kép + MacBook Png screenshotok
  • Öt kép egy félig professzionális Sony kamerával

Mindkét esetben a következőket tettem:

  • Az eredeti kép 900 képpontra lett méretezve, hogy illeszkedjen egy blogbejegyzésbe
  • Manuálisan tömörítve a TinyJpg.com-on keresztül
  • Automatikusan tömörítve az Imagify (Ultra optimalizálás)

Minden képformátumra (eredeti, manuálisan átméretezett és TinyJpged) feltöltöttem a képeket, és ellenőrizhettem, hogy az Imagify milyen tömöríthet automatikusan. A cél az volt, hogy kiderítsem, hogy melyik jobb vagy a plugin minden munkát elvégezne számomra.

Következtetések

Mindkét esetben az egyes lépések kicsit csökkentették a képméretet, így a képek kisebbek lettek. A szabványos iPhone fotó 3200px szélességű, 3,5-szer nagyobb, mint a szükséges 900px.

Ebben az első lépésben a képméret 87% -kal csökkent:

Formátum Eredeti (px) Eredeti 900px-ig Átméretezve 900px-re – Csökkentés
JPG1 (iPhone) 591 109 -81,55%
JPG2 (iPhone) 1800 259 -85,61%
JPG3 (iPhone) 2000 250 -87,50%
JPG4 (iPhone) 1500 213 -85,80%
JPG5 (iPhone) 1000 221 -77,90%
PNG1 (Képernyőkép) 1300 566 -56,46%
PNG2 (Képernyőkép) 1400 557 -60,21%
PNG3 (Képernyőkép) 1600 624 -61,00%
PNG4 (Képernyőkép) 711 275 -61,32%
PNG5 (Képernyőkép) 1100 508 -53,82%

Továbbra is, a legtöbb esetben az iPhone képeket és képernyőképeket tömöríthetjük minden lépésben: átméretezés, tömörítés a TinyJpg és az Imagify segítségével. Minden új lépés egymás tetején helyezkedik el, a százalékértékek nem kumulatívak.

Formátum Eredeti (px) Átméretezve 900px-re

Csökken

+ Imagify

Csökken

900px + TinyJpg + Imagify

Csökken

Végső méret (kb)
JPG1 (iPhone) 591 -81,55% -24,77% 0,00% 83
JPG2 (iPhone) 1800 -85,61% -53,67% 0,00% 76
JPG3 (iPhone) 2000 -87,50% -56,80% 0,00% 70
JPG4 (iPhone) 1500 -85,80% -59,15% -47,56% 43
JPG5 (iPhone) 1000 -77,90% -64,25% -52,33% 41
PNG1 (Képernyőkép) 1300 -56,46% -81,27% -12,41% 127
PNG2 (Képernyőkép) 1400 -60,21% -80,97% -18,11% 104
PNG3 (Képernyőkép) 1600 -61,00% -81,89% -7,43% 137
PNG4 (Képernyőkép) 711 -61,32% -85,45% -20,00% 44
PNG5 (Képernyőkép) 1100 -53,82% -84,06% -8,33% 99

A Sony fényképezőgépeinek bármelyike ​​nem nyerte el a “végleges” tömörítést az Imagify-tól a TinyJpg után.

De itt van a trükk: a TinyJpg-vel való tömörítés csökkentette azokat olyan méretre, amelyet az Imagify nem tudott elérni. Ha figyelmen kívül hagytam a TinyJpg-t, a képek ugyanolyan méretűek maradnának, mint a második oszlop:

Formátum 900px + Imagify
Méret kb
900px + TinyJpg
Méret kb
Csökken
JPG1 (Sony) 421 296 -29,69%
JPG2 (Sony) 461 271 -41,21%
JPG3 (Sony) 180 106 -41,11%
JPG4 (Sony) 258 245 -5,04%
JPG5 (Sony) 304 199 -34,54%

Végső gondolatok

Ezt a problémát gyakran figyelmen kívül hagyják, nem fordítanak rá időt, energiát mert nem fontos, pedig az!

Nem kell mindhárom lépést megtenni, de kettőt kombinálhatsz. A képek átméretezése először, majd kézzel vagy automatikusan tömörítve.

Ha szeretne lenyűgözni egy ügyfelet, akkor futtasson egy sebességmérő eszközt, mint például a GMetrix vagy rögzítse a PageSpeed ​​Insights pontszámot előtte és utána. 22 kép fölé emeltem egy kép optimalizálásával.

2017-09-13T14:15:54+00:00 2017 szeptember 13th|Kategória: SEO blog|Tags: |