Optimizarea imaginilor (imagini și fotografii) Site-ul
Cum de a optimiza imaginea
Pentru a începe, ia în considerare procesul de optimizare a imaginilor și fotografii înainte de a le publica in articol. În funcție de mărimea și calitatea greutatea fiecărei imagini neoptimizate sau fotografii pot ajunge la 100KB magnitudine astronomică sau 200KB, care poate fi comparat cu un document text format din aproximativ 35 de mii. 200.000 de cuvinte sau simboluri. Ei bine, la fel de impresionant? De fapt, este o carte întreagă sau o disertație de 110 pagini A4 standard.
Pentru a face imaginile publicate au fost de bună calitate, dar greutate redusă, acestea ar trebui să fie depozitate într-un adecvat și optim pentru fiecare tip de format. Cele mai multe formate comune de imagine: JPG. GIF și PNG (8 sau 24).
JPG - formatul cel mai optim pentru imagini si imagini multicolore cu o mulțime de culori și tonuri. Imaginile în acest format au extensia .jpg și să aibă cea mai bună calitate, la un fișiere de greutate relativ scăzută.
PNG - un alt format de imagine având cel mai înalt grad de compresie a fișierelor de imagine acceptate de transparență și mult mai mult decât formatul GIF numărul de culori. Imaginile salvate în acest format au extensia .png sunt pline de culoare, și nu-și pierde calitatea atunci când reducerea maximă de greutate. Prin urmare, acest format este optimizat pentru utilizarea cu un gradient de imagini de fundal, icoane frumoase, cu zone transparente. Singurul dezavantaj al acestui format este lipsa de sprijin în versiunile anterioare de Internet Explorer (IE 5,5-6), care gestionează utilizarea css-hacks.
În Photoshop: deschide imaginea în fila Fișier (File) faceți clic pe elementul Salvare pentru Web (Salvare pentru Web) și setați formatul dorit și calitatea imaginii într-o fereastră pop-up.
În captura de ecran diferență vizibilă în mod clar între fotografie neoptimizate (greutate: 269K) si optimizat (am coborât calitatea până la 70% ca imagini greutate a scăzut la 35,18K, este de aproape 8 ori).
În Paint.Net: deschide imaginea, selectați fila Fișier, faceți clic pe Salvare. . fereastra pop-up, introduceți numele fișierului dorit, faceți clic pe butonul Salvare și fereastra pop-up seta calitatea dorită a imaginii ca procent.
După cum puteți vedea, am ales, de exemplu, utilizate în aceste fotografii, același 70%, dar rezultatul a depășit chiar și luat Photoshop (care nu mă așteptam). Amintește imaginea originală în greutate am avut 269K, perii, cu un 70% l stoarse la 35K, o Paint.Net la 22,5K.
Optimizarea de imagini de fundal folosite în site-ul de proiectare
Diferite metode pot fi folosite pentru a optimiza imagini de fundal, imagini și diverse pictograme site, inclusiv comprimarea metodelor convenționale descrise mai sus mine, și în afară de ei încă:
- Utilizarea sprite - Toate imaginile și imaginile utilizate sunt colectate într-un singur fișier (sprite, de obicei, un png) și afișat în locul potrivit, cu ajutorul poziționării în CSS (proprietate: background-position).
- de codificare de imagine în base64 - imagini reale cântărește mult mai mult decât codată în versiunea text format base64. Eu folosesc de obicei, serviciul online. cu care nu numai că poate codifica și decodifica, dar orice imagine
Ambele metoda de mai sus poate crește în mod semnificativ viteza de descărcare, prin reducerea numărului de componente necesare pentru a încărca fiecare pagină, și, prin urmare, reduce numărul de cereri HTTP la server, și, în plus, codificat în base64 și colectate în producția de imagine sprite de stylesheets CSS sunt memorate în cache de browsere, și, astfel, utilizatorul secundar vizitează site-ul dvs. se va încărca mai repede.