Online képméretezés és -optimalizálás

Ha van egy csomó csodálatos képed, akkor biztos vagyok benne, hogy szívesen megosztaná azokat ügyfeleivel a webhelyén. Készíthet egy szép diavetítést, készíthet galériákat, vagy egyszerűen beszúrhat képet egyetlen oldalba vagy blogba. Bármelyik opciót is választja, egyetlen nehézséggel fog szembesülni a nem speciális tartalomszerkesztővel: a kép átméretezésével.

Az alábbiakban néhány javaslatot talál a kép átméretezésére, amelyek hasznosak lehetnek az Ön számára.

Állítsa be a méretet a tartalomhoz

Mindig méretezze át képeit a tartalom méretének vagy a tartalom szélességének megfelelően. Például, ha a tartalom területe 650 pixel szélességű, akkor nincs követelmény a kép méretét meghaladni, mint 650 pixel, mert az oldal legfeljebb 650 pixelt fog megjeleníteni. Ha a képméret tulajdonság kisebb vagy nagyobb, mint a tároló, akkor a megjelenítés minősége romlik.

Képfelbontás hozzáigazítása az internethez

Egyetlen weboldal vázlatában sem lesz „per inch” benyomása. A PPI, azaz a pixel per hüvelyk és a DPI, vagyis a pont per hüvelyk, nincs jelentősége, amikor szerkeszti vagy átméretezi a képet bármilyen célból, például e-mailezés, blogírás vagy közösségi médián keresztüli megosztás céljából. A nyomtatáson, a képernyőn történő megjelenítésen kívül nem tud különbséget tenni a kép jellemzői vagy minősége tekintetében.

Ez különösen a PDF esetében érvényes , kerülje az olyan PDF-fájlok elérhetővé tételét olyan webes olvasáshoz, amelyek 72 dpi-nél nagyobb felbontású képeket tartalmaznak. Ebben az esetben az ImageRecycle PDF-optimalizáló segíthet, optimalizálhat egy PDF-t 300dpi képpel, és a pdf méret 98% -át megtakaríthatja tökéletes minőséggel, hogy az interneten olvasható legyen.

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

A Photoshop használatával a weben az a javaslat, hogy a JPEG képeket max. a tömörítés 20%-a. Tesztet is végezhet különféle JPEG erényekkel, amelyek a legjobban működnek az Ön számára. 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.

Az ImageRecycle képoptimalizáló algoritmussal a folyamat egészen más. ImageRecycle érzékeli az aktuális képtömörítési arányt, és ezzel kapcsolatban optimalizálja a képet. Mivel a tömörítést nem alkalmazzák az egész képen, a teszt ordító valóban meg fog lepődni.

Ne feledje: kevésbé lesz tömörítve az eredeti kép, annál jobb lesz az optimalizálás és a méret.

A példában 4 JPG képet exportáltam photoshop segítségével minőségi szinten: 60% |
80% | 90% | 100% Akkor optimalizáltam a képeket az ImageRecycle használatával , itt van a méret eredménye. A minőségről a 90/100% valamivel jobb, mint a másik 2. A tanulság itt a következő: exportálja a JPG-képeket a lehető legkevésbé tömörítve, az ImageRecycle elvégzi a többit!

Optimalizálja a végső képeket

A futtatott webhelytől függően ugyanazok a képek különböző méretű oldalakon jeleníthetők meg. Ez tipikusan olyasmi, amit az E-kereskedelemben találhat a Slider-rel, a terméklistán, a termékadatokon,...
Az átméretezési folyamatot általában egy online php könyvtár, például a GD végzi. Győződjön meg az EREDETI és VÉGSŐ felhasználói képek minőségéről és súlyáról. Ne bízzon az online könyvtárakban és a gyorsítótár-generátorban, különben minőségi és méretbeli problémái lehetnek. Ha az eredeti kép már optimalizálva van az Ön oldalán (a minőség, a színek, a tömörítés finomhangolásával), hogy megtakarítsa a sávszélességet és az oldalbetöltést, néhány webbővítmény átméretező könyvtárával mindezt elveszítheti!

A megoldás:

• Alkalmazzon optimalizálást a végső kliens böngészőjében megjelenő képen. Ezt manuálisan megteheti minden egyes képen és méretenként, vagy használja ImageRecycle API- vagy CMS-bővítményét, hogy kiválassza azt a mappát, ahol a végső képeket tárolja. Ezután futtassa az automatikus optimalizálást rajta.
• Használja átméretezőnket az eredeti képekhez. Megtakaríthatja a szerver tárhelyét, gyorsabban kezelheti a képeket, és általában nincs szüksége 1600 képpontnál nagyobb szélességű képre a végső képernyőn

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

A médialekérdezéseket is magában foglaló reszponzív tervezési technikák segítségével a webdesignerek a webhely elrendezését az eszközök széles skálájához igazíthatják, az asztali számítógépektől az okostelefonokig, és folyamatosan éles megjelenést biztosítanak. Itt nem a kijelzővel van a probléma, hanem a teljesítménnyel, ez az asztali kép, amely megjelenik és betöltődik okostelefonra és táblagépre.

A A HTML5 elem megpróbálja megoldani ezt a problémát. A natívan optimalizált képforrás előnyei a betöltési idő – ez különösen fontos a lassabb mobilinternet-kapcsolatot használó felhasználók számára. A Az elemek valódi dinamikus átméretezést tesznek lehetővé azáltal, hogy csak egy HTML utasítást adnak a böngészőnek.

Kódrészlet:

Jelenleg az a korlát, hogy ehhez egy nagyon friss króm verzió (39) és néhány JS szükséges a megfelelő működéshez. A közeljövőben ezzel a képoptimalizálóval társított technológiával a legjobbat várhatjuk a weboldal betöltési idejének tekintetében.