Optimizați utilizarea imaginilor pe o pagină web pentru procesarea imaginilor

Prima cauză a încetinirii site-ului este legată de cantitatea de date încărcate. În acest registru, cel mai solicitant articol se referă, fără îndoială, la imagini.

După cum am văzut în articol De ce să optimizăm un site web ?, îmbunătățiți viteza de încărcare a paginilor unui site cu cel puțin 4 impacturi directe: numărul de vizitatori și prin valorificarea referințelor, un câștig economic și un impact real asupra mediului.

Intuitiv, înțelegem că prima cauză a încetinirii este legată de volumul de date încărcate. În acest registru, cel mai lacom articol se referă, fără îndoială, la imagini. Să ne uităm la posibilele căi de optimizare și veți fi surprinși să vedeți amploarea posibilelor câștiguri.

Este necesară o imagine ?

Dar să începem cu o întrebare aparent naivă: aveți nevoie de imagini ?
În mod surprinzător, în unele cazuri, imaginile sunt folosite pentru a colora suprafețe solide, cum ar fi un fundal de pagină, un banner sau un fundal de meniu. De exemplu, un pătrat solid de 20 de pixeli repetat ad infinitum ca fundal de pagină este echivalent cu cel puțin 100 de octeți, în timp ce utilizați proprietatea de fundal CSS consumați doar 30. Între aceste două abordări, un beneficiu de cel puțin 60% pentru un echivalent redare. Primul meu sfat este, așadar: să vânați imagini inutile !

Într-o notă foarte similară, nu gestionați marginile imaginilor adăugând un chenar solid al culorii de fundal. Preferă o abordare mult mai dietetică folosind marja CSS și atributele de umplere.

Alegeți formatul de imagine potrivit

Apoi, considerați că doar trei formate de imagine sunt viabile pentru site-uri web:

jpg (sau jpeg pentru Grupul mixt de experți în fotografie): acest format poate gestiona până la 16 milioane de culori și trebuie utilizat numai pentru grafică avansată, imagini de înaltă calitate sau fotografii.
gif (pentru Format grafic de schimb): acest format acceptă maximum 256 de culori, dar acceptă transparența sau vă permite să compuneți animații simple. Prin urmare, utilizarea sa este ideală.
png (pentru Grafică de rețea portabilă): acest format poate gestiona până la 16 milioane de culori, precum și diferite niveluri de transparență . Prin urmare, este potrivit pentru practic toate îmbunătățirile dvs. vizuale.

Rețineți, totuși, că nu toate browserele acceptă nativ formatul png (în special Internet Explorer pentru versiunile sub 7) și că poate fi necesar să utilizați hacks adecvate [1]. Dar, conform statisticilor produse de StatCounter, aceasta reprezintă mult sub 3,76% din browserele utilizate (pentru W3Scools.com, este de 0,3%).

Formatul png este, în general, un pariu sigur, dar pentru imaginile iconice care nu necesită transparență, alocați-vă și timp pentru a compara versiunile jpg și png care uneori pot produce 1 din 10 discrepanțe.