Există site-urile mele de proiecte, unde sunt multe fișiere grafice care sunt folosite în proiectarea paginilor. Optimizez aceste fișiere cu Photoshop, dacă este JPG, iar prin fișierele PNG trec prin ImageOptim. dar totuși, grafica cântărește foarte mult. După toate optimizările de imagine, au continuat să absoarbă 3,67 megaocteți. Am decis să încerc un nou format pentru imaginile WebP. Greutatea totală a fișierelor grafice, după trecerea la WebP 1.4 megabytes.
Ce animal, acest WebP. Voi lua o linie de la Vicki:
Principalul plus al formatului WebP este reducerea dimensiunii imaginii. Am reușit să obțin economii de 50% fără pierderi de calitate în cazul unor imagini cu PNG și JPG.
Principalul minus. acesta este suportul pentru browser. Acest format înțelege: Opera 27+, Chrome 31+, Opera Mini 8, Android 4.3, Chrome pentru Android 42. Dar Firefox, IE și Safari nu doresc să fie prieteni cu noul format.
Pentru a crea o selecție transfrontalieră de imagini optimale, am folosit modernizr.js. care este colectat cu pavilionul img-webp. Modernizr adaugă clase la eticheta corporală (.webp și .no-webp), după ce a stabilit suportul browserului pentru formatul webp.
Se pare că acest CSS:
Dacă vom folosi
Suport WebP în Adobe Photoshop
Iată două fișiere alice.zip [143,12 Kb] (descărcări: 21) în format PNG (104 kilobytes) și WebP (38 kilobytes) pentru comparație.
P.S: Folosind WebP, va fi nevoie de mai mult spațiu pe disc pentru stocarea fișierelor, dar nu consider acest lucru o minus în viața noastră terabyte.
Distribuiți acest lucru
Trimiteți-le prietenilor: