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

Ha van egy csodálatos képcsoportja, akkor biztos vagyok benne, hogy szívesen megosztja azt az ügyfelekkel a webhelyén. Készíthet csodálatos diavetítést, készíthet galériákat, vagy egyszerűen beszúrhat képet egyetlen oldalra vagy blogra. Bármelyik lehetőséget is választja, egyetlen nehézséggel kell szembenéznie a nem speciális tartalomszerkesztővel: a kép átméretezése.

Az alábbiakban néhány, a kép átméretezésére vonatkozó javaslat, amely hasznos lehet az Ön számára.

Állítsa be a méretet a tartalmához

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.

A képfelbontás adaptálása az interneten

Egyetlen weboldal vázlatában sem lesz „per inch” benyomása. A PPI, azaz pixel/hüvelyk és DPI, azaz pont/hüvelyk, nincs jelentősége, amikor szerkeszti vagy átméretezi a képet bármilyen célra, például e-mailezésre, blogírásra vagy közösségi médián való megosztásra. A nyomtatást és a képernyőn történő megjelenítést leszámítva nem tud különbséget tenni a kép jellemzőiben vagy minőségé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 exportminőség az ImageRecycle

A Photoshop használatával az internet ajánlása a JPEG-képek maximális mentése. A tömörítés 20% -a. Vizsgálhat különféle JPEG-erényekkel is, amelyek az Ön számára legjobban működnek. A globális tömörítés alkalmazása a méret és a minőség egyensúlyának 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: minél kevesebb lesz az eredeti kép tömörítése, 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égleges képeket

A futtatott webhelytől függően ugyanazok a képek különböző oldalakon, eltérő méretben jeleníthetők meg. Ez tipikusan olyasvalami, amit az E-kereskedelemben talál csúszkával, 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:

• Alkalmazza az optimalizálást a végső kliens böngészőben megjelenő képre. Ezt megteheti manuálisan minden képnél és méretnél, vagy az ImageRecycle API vagy CMS kiterjesztésünkkel kiválaszthatja azt a mappát, ahol a végső képeket tárolja. Ezután futtassa rajta az automatikus optimalizálást.
• Az eredeti képekhez használja a resizerünket. Takaríthat meg szerver tárhelyet, gyorsabban manipulálhatja képeit, és általában nincs szüksége a képekre, amelyek szélessége a végső kijelzőn 1600 pixel

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

Az adaptív tervezési technikák, amelyek tartalmazzák a média lekérdezéseket, lehetővé teszik a webdesignerek számára, hogy a webhely elrendezését sokféle eszközhöz igazítsák, az asztali számítógépektől az okostelefonokig, és folyamatosan élesnek tűnjenek. Itt nem a kijelző, hanem a teljesítmény a probléma, ez az asztali kép, amelyet megjelenítenek és betöltenek az okostelefonra és a táblagépre.

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

Kód kivonat:

A korlát jelenleg az, 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 legjobbakra számíthatunk a weboldal betöltési idejére.