Online képátméretezés és optimalizálás

Ha van egy rakás lenyűgöző képed, biztos vagyok benne, hogy szívesen megosztanád azokat az ügyfeleiddel a weboldaladon. Készíthetsz egy szép diavetítést, galériákat, vagy egyszerűen beilleszthetsz képet egyetlen oldalra vagy blogba. Bármelyik opciót is választod, egyetlen nehézséggel fogsz találkozni, amivel a nem szakértő tartalomszerkesztőknél találkoztál: a kép átméretezésével.

Az alábbiakban néhány javaslatot találsz a kép átméretezésére, amelyek hasznosak lesznek számodra.

Igazítsa a méretet a tartalomhoz

Mindig méretezze át a képeket a tartalom méretének vagy szélességének megfelelően. Például, ha a tartalom területe 650 pixel széles, akkor nincs szükség arra, hogy a képet 650 pixelnél nagyobbra méretezzük, mert az oldal csak maximum 650 pixel méretben fog megjelenni. Ha a képméret tulajdonság kisebb vagy nagyobb, mint a konténer mérete, a megjelenítési minőség romlani fog.

Képfelbontás igazítása webes felülethez

Egyetlen weboldal vázlatán sem lesz feltüntetve a „hüvelykenkénti” kifejezés. A PPI, azaz a képpont/hüvelyk és a DPI, azaz a pont/hüvelyk, nem releváns a kép szerkesztésekor vagy átméretezésekor, például e-mailben, blogoláskor vagy közösségi médiában való megosztáskor. A nyomtatáson, a képernyőn történő megjelenítésen kívül nem lehet különbséget tenni a kép jellemzői vagy minősége között.

Ez különösen igaz a PDF fájlokra , kerüld a 72 dpi-nél nagyobb felbontású képeket tartalmazó PDF-ek webes olvasását. Ebben az esetben az ImageRecycle PDF optimalizáló segíthet, optimalizál egy 300 dpi felbontású képeket tartalmazó PDF-et, és a PDF méretének 98%-át megtakaríthatod, tökéletes minőségben, hogy az interneten is olvasható legyen.

A legjobb JPG exportminőség ImageRecycle segítségével

Photoshop használata esetén a webes mentéshez az ajánlott JPEG képek maximum 20%-os tömörítéssel legyenek mentve. Különböző JPEG tulajdonságokkal is tesztelhetsz, hogy melyik működik a legjobban számodra. A globális tömörítés alkalmazása a méret és a minőség közötti egyensúly kérdése.

ImageRecycle képoptimalizáló algoritmussal a folyamat most egészen más. ImageRecycle érzékeli az aktuális képtömörítési arányt, és ennek alapján optimalizálja a képet. Mivel a tömörítés nem az egész képre vonatkozik, az alábbi teszt valóban meglepődni fog.

Ne feledd: minél kevésbé tömöríted az eredeti képet, annál jobb lesz az optimalizálás és a méret.

Az alábbi példában 4 jpg képet exportáltam Photoshopban a következő minőségben: 60% | 80% | 90% | 100%.
Ezután optimalizáltam a képeket ImageRecycle , íme a méreteredmény. A minőséget tekintve a 90/100%-os beállítás egy kicsit jobb, mint a másik kettő. A tanulság a következő: exportáld a jpg képeidet a lehető legkevésbé tömörítve, ImageRecycle elvégzi a többit!

Optimalizálja a végső képeket

A weboldaladtól függően ugyanazok a képek különböző oldalakon, eltérő méretben jelenhetnek meg. Ez jellemzően egy e-kereskedelmi oldalon található, ahol csúszkák, terméklista, termékadatok stb. találhatók.
Az átméretezési folyamatot általában egy online php könyvtár, például a GD végzi. Győződj meg az EREDETI és a VÉGSŐ felhasználói képek minőségéről és súlyáról. Ne bízz az online könyvtárakban és a gyorsítótár-generátorban, mert minőségi és méretbeli problémák adódhatnak. Ha az eredeti kép már optimalizálva van az oldaladon (a minőség, a színek, a tömörítés finomhangolásával) a sávszélesség és az oldalbetöltés csökkentése érdekében, egyes webbővítmények átméretező könyvtáraival, akkor mindezt elveszítheted!

A megoldás:

• Optimalizálást alkalmazzon a végső kliensböngészőben megjelenített képre. Ezt manuálisan is elvégezheti minden egyes képen és minden méretben, vagy használhatja az ImageRecycle API- vagy CMS-bővítményét a végső képek tárolására szolgáló mappa kiválasztásához. Ezután futtassa le az automatikus optimalizálást.
• Használd az átméretezőnket az eredeti képekhez. Megtakaríthatsz szerver tárhelyet, gyorsabban szerkesztheted a képeidet, és általában nincs szükséged 1600 képpontnál szélesebb képre a végső megjelenítéskor

Mi a következő lépés: HTML5 és a<picture> elem

A reszponzív tervezési technikák, amelyek magukban foglalják a média lekérdezéseket, a webdesignereknek azt a módját kínálják, hogy a weboldal elrendezését a lehető legszélesebb eszközskálához igazítsák, az asztali számítógépektől az okostelefonokig, és ezáltal az egységesen éles megjelenést biztosítsák. A probléma itt nem a megjelenítés, hanem a teljesítmény, azaz az okostelefonokon és táblagépeken megjelenített és betöltött asztali kép.

A<picture> A HTML5 elem megpróbálja megoldani ezt a problémát. A natívan optimalizált képforrás előnye a betöltési idő – ez különösen fontos a lassabb mobilinternet-kapcsolattal rendelkező felhasználók számára.<picture> elem valódi dinamikus átméretezést tesz lehetővé azáltal, hogy HTML utasítást ad a böngészőnek.

Kódrészlet:

A jelenlegi korlát az, hogy ehhez egy nagyon új Chrome verzióra (39) és némi JS szükséges a megfelelő működéshez. A közeljövőben, ha ezt a technológiát egy képoptimalizálóval társítjuk, a weboldal betöltési ideje a legjobb lesz.