Tartalom
- 01. Veszteségmentes optimalizálás
- 02. Helyes méretek
- 03. Mentés webre
- 04. Ellenőrizze és távolítsa el a képeket
- 05. GIF-ek és PNG-k
- 06. Alulminta PNG-k
- 07. A megfelelő fájlformátum
- 08. Gyorsítótár-vezérlés: nincs átalakítás
- Nginx
- Apache
- 09. CSS és SVG
- 10. Progresszív JPEG-ek
Ma a digitális kereslet erősebb, mint valaha. Rengeteg csatlakoztatott eszköz létezik, és mivel az internet mindenhol elérhető, nyilvánvaló, hogy nincs hiány az emberekből, akik szeretnék használni a termékeinket. Azok a vásárlók azonban, akik tolerálni fogják a hosszú várakozási időt, sokkal ritkábban fordulnak elő, és még mindig nagyon kemény munkát kell elvégezni ezen a területen.
Mi az a DPI? Olvassa el a képfelbontás végső útmutatóját - beleértve a PDF-féle csalólapot is!
A fejlett országokban a sávszélesség folyamatosan növekszik, de ugyanez elmondható a távoli területeken, a tömegközlekedésnél és a túlterhelt ingyenes Wi-Fi-nél is. A böngésző elfogadásához hasonlóan a legjobb elérhető technológiához való hozzáférés nem mindig mindenki számára elérhető. Nagyon jó tudatosság ma, hogy mennyire fontos a gyorsaság. Az eszközök, a monitorozás és az erőforrások a legjobbak, amik valaha voltak, és a gyenge teljesítmény pénzügyi következményei jól ismertek. Mégis, hónapról hónapra tovább nő a weboldalak súlya.
Számos nagy szervezetben nem az a probléma, hogy a fejlesztőcsapatok nem tudják, mit kell tenni, hanem az, hogy a webes teljesítmény-fejlesztések ütemezésére vonatkozó kérelmek kiszolgáltatottak a prioritásmentesítésre, amikor az érdekeltek versenyeznek a fejlesztési időért. Az általuk kiszolgált vállalkozások más tevékenységekre fordítják idejüket, például új funkciók fejlesztésére.
Ha gyorsan javítania kell a termék sebességén, azt javaslom, hogy a képoptimalizálást tegye első lépésként a következő okok miatt:
- Az átlagos weboldal túlnyomó része kép (64 százalék)
- A képek optimalizálása jobban csökkenti a fájlméretet, mint az átlagos oldal bármely más aspektusa
- A képek optimalizálása valószínűleg a legegyszerűbb webes teljesítmény, amelyet megtehet
- Veszteségmentes képoptimalizálás esetén a kép teljesen ugyanolyan megjelenésű, a PNG-k esetében azonban a fájlméret körülbelül 20-40, JPEG esetén pedig 5-20 százalékkal csökken.
- Viszonylagos könnyűsége azt jelenti, hogy hamarabb szállíthat gyorsabb terméket
- Olyan fejlesztések szállítása, amelyeket az érdekelt felek láthatnak, és amelyekre hivatkozhat, segíteni fog abban, hogy megerősítse az egyéb optimalizálások fontossági sorrendjét
Így remélhetőleg meggyőződve bemutatok néhány technikát, amelyek segítségével optimalizálhatja a képek használatát.
01. Veszteségmentes optimalizálás
Ha nem tesz mást, azt javaslom ebben a cikkben, kérjük, töltse le és használja az ImageOptim for OS X vagy a FileOptimizer for Windows és Linux elemeket a képek kötegelt optimalizálásához. Ezek az alkalmazások nem igényelnek mást, mint azt, hogy a képmappát az alkalmazásba kell húzniuk, mielőtt elkalandoznának, hogy kávét készítsenek, miközben varázslatosak. A folyamat könnyedén zajlik, és hihetetlen, hogy ezek az alkalmazások mennyire csökkentik a képfájl méretét - a megjelenésük bármilyen változása nélkül.
02. Helyes méretek
A rossz dimenziók használata olyan hiba, amelyet most nagyon kevesen követnek el, de a teljesség kedvéért érdemes megemlíteni. Legtöbbször akkor fordul elő, ha máshol nagyobb kép miniatűrjét jeleníti meg.
img src = "threepwood-retina-2x-large.webp" width = "140" height = "84">
Nagyobb kép használata és méretének beállítása kóddal gyorsan megrobbanhat az oldalmérete, különösen akkor, ha figyelembe vesszük, hogy hány oldal van rajtuk.
Győződjön meg arról, hogy a tényleges kép mérete megegyezik a megjelenített terület méretével.
img src = "threepwood-140x84.webp" width = "140" height = "84">
Az adaptív képek természetesen egy másik történet, de ugyanez az elv érvényes például arra is, hogy nem például az asztali retina képeket kell mobilon kiszolgálni és méretezni. Ehhez a problémához a ReSRC.it kiváló szolgáltatás, amely sokkal egyszerűbbé teszi ezt a folyamatot.
03. Mentés webre
Az egyik legfontosabb dolog megtalálni az édes helyet a fájlméret és a minőség között a kép első exportálásakor. JPEG exportálásakor a 0–100 minőségi mutató minden 10 pontja 30-50 százalékkal nagyobb fájlt eredményez, így például annak tudása, hogy mikor válasszon 70 helyett 70 helyett 70-et, nagyobb nyereséget eredményez, mint bármelyik optimalizáló.
Váltás a közeli nagyítás és a kép természetes méretben történő megtekintése között. A közelség segít megítélni, hogy mennyivel tovább tudja tolni az értéket, de azok a területek, amelyek miatt aggódhatott a közelről, természetes méretben nézve nem feltétlenül észrevehető. A kettő közötti váltás a skála beállítása közben segít megtalálni az optimális beállítást.
04. Ellenőrizze és távolítsa el a képeket
Célszerű egy kis időt tölteni a termék használatával és néhány korábbi tervezési döntés elemzésével - valóban szüksége van minden képre?
05. GIF-ek és PNG-k
A PNG a GIF továbbfejlesztett, nem szabadalmaztatott helyettesítőjeként jött létre. Mindaddig, amíg nincs szüksége animációra, a PNG ugyanazokat a gyakorlati célokat fedi le, mint a GIF - beleértve az átláthatóságot is -, de kisebb fájlméretek előnyével (nevezetesen kivéve az olyan dolgokat, mint az 1x1 pixeles képek).
A preferenciáktól és a GIF-képek számától függően vagy újra exportálhatja őket a grafikus alkalmazásból PNG-ként, vagy az ImageMagick-ból való konvertálás segítségével szakaszosan feldolgozhatja őket a parancssorban. Mint mindig, ne felejtse el utána futtatni az új képeket egy veszteségmentes optimalizálón keresztül.
06. Alulminta PNG-k
Általános tévhit, hogy az egyetlen félig átlátszó képpontokat biztosító képformátum a 24 bites PNG. A félig átlátszó képpontok valójában 8 bites PNG használatával érhetők el, és további bónuszként sokkal kisebb fájlméretet kínálnak, mint a 24 bites PNG. A 24 bites PNG-ket 8 bitesre csökkentheti az ImageAlpha for OS X vagy a PNGyu for Windows használatával.
07. A megfelelő fájlformátum
Ma három fő raszterizált képformátum közül lehet választani: JPEG, PNG és GIF. Íme néhány mutató, amelyek segítenek a megfelelő formátum kiválasztásában:
- Ha animációra van szüksége, válassza a veszteséges GIF-et
- Ha a kép fénykép, válassza a JPEG lehetőséget
- Ha átlátszó fényképre van szüksége, válassza a veszteséges PNG-t
- Ellenkező esetben először próbálja meg a 8 bites PNG-t, majd térjen vissza JPEG-re, ha nem elégedett a minőséggel
08. Gyorsítótár-vezérlés: nincs átalakítás
Észrevetted már, hogy amikor mobilhálózaton keresztül éred el, az egyébként normális képeid annyira összenyomódnak, hogy a minőség borzalmas? Egyes szolgáltatók ugyanis tömörítik a képeket, amikor áthaladnak a hálózatukon, hogy kedvezőbb sávszélességű és gyorsabb böngészést kínáló ügyfelek kedvében járjanak.
A probléma az, hogy rosszul sikerült, és függetlenül attól, hogy a képet már optimalizálták-e. Ennek letiltása és a képek teljes irányításának visszavétele egyszerű kérdés, hogy a kiszolgáló a képek kiszolgálásakor tartalmazza a Cache-Control: no-transform válasz fejlécet. Ez a következő módokon történhet:
Nginx
hely ~ * . (png | jpg | jpeg | gif) $ {add_header "Cache-Control" "nyilvános, nincs átalakítás"; }
Apache
IfModule mod_headers.c> FilesMatch ". (Png | jpg | jpeg | gif) $"> Fejléc a Gyorsítótár-vezérlés hozzáfűzése "public, no-transform" / FilesMatch> / IfModule>
09. CSS és SVG
Ha képeket viszonylag egyszerű vonalak és alakzatok megjelenítésére használ, akkor CSS-re vagy SVG-re cserélve számos előnye van. Mivel az egyszerű szöveges formátumok, ezek sokkal könnyebb lábnyomot hordozhatnak, mint a raszteres képek, és - a raszteres képektől eltérően - méretük növelésekor nincsenek szaggatott vagy pixeles grafikák. Kiváló kép fenntartása mellett átméretezhetők. Az SVG minden modern böngészőben támogatott, ezért ne féljen kipróbálni.
10. Progresszív JPEG-ek
A JPEG-nek két fő betöltési stratégiája van. Az „Baseline” a legfelső pixelsorból lefelé, az „progresszív” pedig egy teljes képet tölt be, amely rendkívül pixeles, majd fokozatosan élesíti. A kompromisszum itt nem annyira a fájlméretről szól, hanem az észlelt sebességről. Ezért támogatom a progresszív JPEG-t.
Az ImageMagick alkalmazásból történő konvertálás használatával az input.webp fájl egy progresszív JPEG formátumba konvertálható output.webp néven.
konvertálás -szalag -interlace Sík -minőség 80 input.webp output.webp
Ha felül akarja írni input.webp egyszerűen beállíthatja ezt kimeneti argumentumként is.
