Ha azon dolgozunk egy weboldal megtervezése, a képek alapvető alkotás. Segítenek a tartalom szemléltetésében, kiegészítésében, sőt irányítsa a felhasználót a cél elérése felé megjelölt.

Ezért a webhely megkezdése előtt az egyik alapvető feladat a jól optimalizálta a képeket.

Mi a rosszul optimalizált kép?

A fogalom magyarázata képoptimalizálás webhez, Szerintem könnyebb megmagyarázni, ha a fényképet rosszul optimalizálták:

  • Amikor sokkal nagyobb képünk van (szélességben vagy magasságban), mint az a hely, ahol látható lesz.
  • Amikor a kép deformálódott az interneten.
  • Amikor a fájl a szükségesnél sokkal több információt tartalmaz (Tudta, hogy a fotók rejtett információkat tartalmaznak, például a fényképezőgépet vagy a készítés helyét?).
  • Amikor nem megfelelő formátumot használunk (nézd meg ezt a bejegyzést a JPG-ről és a PNG-ről).

Ha a fényképeket közvetlenül a kameráról tölti fel az internetre, vagy feltölti anélkül, hogy belegondolna a létrehozás módjába, akkor az nagyon valószínű, hogy az oldalon található képek egy vagy többel találkoznak ezen jellemzők közül.

És sürgősen orvosolnia kell.

Miért fontos optimalizálni a fotókat a webhelyén?

létezik 3 fő ok, amiért aggódnia kellene a fotóoptimalizálás miatt a webhelyén. Fordított fontossági sorrendben mondom nekik, az alapvetőet pedig utoljára hagyva:

Súly/méret ...

A rosszul optimalizált kép funkciójának mindig túl nagy a súlya és/vagy mérete. Ez két területet érint:

  1. A szerver ahol az internetet tárolja, több helyre lesz szüksége a feleslegesen nagy fotók tárolásához.
  2. A Navigator akikkel a jövőbeni ügyfelei meglátogatják Önt, többet kell dolgoznia a fényképek megfelelő méretben történő megjelenítésén.

Rakodási sebesség:

Az előző ponttól az következik, ha mindenki többet dolgozik, akkor a weblapja lassabban töltődik be. A betöltési idő pedig elengedhetetlen: ha azt szeretné, hogy a Google és a felhasználói szeressenek, akkor a webhelyének a lehető leggyorsabban be kell töltődnie.

Felhasználói tapasztalat:

Tudta, hogy egy webhely, amelynek betöltése több mint 3 másodpercet vesz igénybe, a látogatások 53% -át elveszíti? Úgy gondolom, hogy ez a legfontosabb ok a webhelyen található képek optimalizálására: ne ijessze meg ügyfeleit.

A webfejlesztés terén szerzett tapasztalataim szerint láttam olyan eseteket, amelyekben a fényképek optimalizálása elért 60% -kal csökkenti a képek súlyát (méretük egy részét 96% -kal csökkentve) és 70% -kal javítja a mobilok töltési idejét csak azzal a változtatással.

tömörítheti
Webes példa a képek optimalizálása előtt és után

A Squoos.app, az all-in-1 eszköz a fényképek optimalizálásához

Ha a profi fotós a weboldal képeihez, biztosan ad egy optimalizált verziót felbontásban és méretben, amely alkalmas online megtekintésre.

Ennek ellenére szinte mindig szükség van egy későbbi optimalizálásra, mint ez a végső fejlesztés a megjelenéstől, a helytől és a kontextustól függ a képek.

Hogyan tudja megtenni ezt az optimalizálást? Számos olyan eszköz létezik, mint a Compressor.io vagy a TinyJPG, amelyek használata nagyon egyszerű. De egy ideje a MrKii-ban a legtöbbet használjuk, a Squoss.app.

A Squoosh.app egy a Google által kifejlesztett eszköz az internetes képek optimalizálására, szerszámokkal tele és rendkívül könnyen használható.

Csak muszáj húzza a fényképet a számítógépről, állítsa be a paramétereket és töltse le az optimalizált képet. Ráadásul élőben is összehasonlíthatja, hogy a beállítások hogyan befolyásolják a képminőséget.

A fenti példában látható acgyakorlati összefüggés a cikk fejlécfotójával:

  • Méret Photoshopból történő mentéskor: 296 KB.
  • Méret a Squoosh segítségével történő optimalizálás után: 76,3 KB (74% -kal kevesebb)

Mit tehet a Squoosh-val?

A Squoosh eszközeinek száma nagyon széles. És ha őszinte vagyok, nem hiszem, hogy felhasználtam még annak 40% -át is, amit kínál.

Többek között a Squoosh segítségével:

  • A képminőség beállítása.
  • Váltás a különféle tömörítési formátumok között.
  • Átméretezze a fényképek méretét, hogy az megfelelő legyen az interneten.
  • Csökkentse a fotó színeinek számát.

És a webes képek kivágásához?

Az egyik dolog, ami A Squoosh nem engedélyezi a képek kivágását például egy nagyobb fénykép területének megtartása a részletek megszerzéséhez vagy a panorámásabb kép elkészítéséhez.

Ezekben az esetekben, ha nem akarja használni a Photoshopot, húzhatja egy másik ingyenes online eszköz, például az imageresize.org:

Is használata meglehetősen egyszerű, és tartalmaz egy kis képoptimalizálót. Az optimalizálás nem olyan hatékony, mint a Squoosh, de ha mindent ugyanabban az alkalmazásban szeretnél megtenni, akkor hasznos lehet.

Mi az ideális beállítás egy optimalizált webképhez?

Most jön a nagy kérdés: Mi a legjobb beállítás a fénykép optimalizálásához? És a válasz, ahogy el lehet képzelni, relatív: attól függ.

Ideális a weboldal fotóinak optimalizálásához végezzen egyéni munkát minden képhez vagy képcsoporthoz, amelyek ugyanúgy viselkednek: elemezze, hogy mekkora méretben jelennek meg, milyen formátumban vannak, mekkora a felbontás ... és dolgozzon részletesen az optimalizáláson.

Ennek ellenére hagyunk egy sor általános sort, amelyek segíthetnek Önnek útmutató a fényképek típusának megfelelő optimalizálására:

Webes logó

  • Méret: legfeljebb 250-300 pixel széles.
  • Ügyeljen arra, hogy ne töltse fel óriási méretre.
  • Felbontás: 72ppp, bár akár 300-at is elérhet, hogy megbizonyosodjon arról, hogy minden eszközön kiváló minőségűnek tűnik.
  • Minőség: Játsszon Squoosh-t kis súlyig, anélkül, hogy elveszítené a minőségét.
  • Súly: 50Kb alatt, ideális, ha 20Kb-t kap.

Nagy képek, fejlécek vagy hátterek számára

  • Méret: 1280 pixel széles (1980 képpont, ha a fotó nagy hangsúlyt kap)
  • Felbontás: 72dpi.
  • Súly: mindig 100Kb alatt.

Képek a tartalomban

  • Méret: 450 - 500 pixel széles, ha a szöveg mellett jelenik meg.
  • Felbontás: 72dpi
  • Súly: mindig 100Kb alatt

Ezeket a tippeket követve képesnek kell lennie kezdje el optimalizálni a webhelyén található képeket, és gyorsabban töltse be hogy felhasználói örüljenek.

Ismerte Squooshot? Optimalizálja a webhelyén található fotókat feltöltés előtt? Hagyja véleményét a megjegyzésekben.