Optimizarea și compresia png și jpg, jpeg fără pierderi de calitate. Optimizarea imaginii ca o componentă importantă a procesului CRO

Câteva dintre cele mai multe programe celebre pentru a optimiza imaginile. Permiteți-mi să fac o rezervare imediat: vorbim de algoritmi pentru reducerea semnificativă a dimensiunii fișierului, „cu pierderi” („cu pierderi”). Comprimarea JPEG fără pierderi nu prezintă un interes deosebit, deoarece JPEG este în sine un format pentru stocarea imaginilor „cu pierderi”, iar compresia fără pierderi prin orice mijloace oferă un câștig maxim de 3-5%. Aici vorbim despre programe care pot reduce dimensiunea fișierului de mai multe ori.

Apropo, optimizarea fișierelor încărcate de participanți a fost implementată de mult timp în Gallerix Art Club, se realizează automat în două etape: prima - imediat după încărcare (fără pierderi, se folosește Jpegtran) și a doua - după ceva timp; programul JpegMini.

Dacă arhiva dvs. de acasă nu a fost niciodată optimizată și acum ocupă, de exemplu, 100 GB, este foarte posibil să reduceți această cifră de 2-2,5 ori (până la 45-50 GB) fără a interveni în calitatea imaginii și de 3-4 ori. (până la 20- 25 GB) cu o scădere ușoară, nu foarte vizibilă, a calității.

Câteva despre partea tehnică a întrebării. Pe scurt, munca instrumentelor de compresie a imaginii poate fi comparată cu inventarea ratei de biți variabile pentru fișierele audio. Mai saturate sunete diferite secțiunile audio sunt codificate cu o rată de biți mare, liniște - cu cea mai mică. Spre deosebire de fișierele audio cu o rată de biți constantă, formatul JPEG are deja o optimizare încorporată, a cărei putere este determinată de setarea de calitate stabilită la salvarea fișierului din orice program. Munca serviciilor de compresie a imaginilor se bazează și pe abordarea cu rata de biți variabilă - identificarea fragmentelor de imagine a căror codificare poate fi neglijată cu viclenie pentru a economisi spațiu pe disc.

În aceste scopuri, pe piață există mai multe soluții comerciale și, potrivit multor colegi ruși și străini, JpegMini este numărul unu în ceea ce privește un set de parametri. Scopul acestui test este de a pune toate instrumentele comerciale și gratuite pentru optimizarea imaginii unele cu altele pentru a reîmprospăta „tabelul de clasamente”.

Fișiere sursă

Primul dintre ei - filmat de mână pe un telefon mobil de altădată - Notă Samsung II, cu rezoluție minimă de fișier. Fiecare dintre noi are milioane de astfel de fotografii, astfel de fișiere nu sunt premiate cu calitate, sunt multe și de obicei sunt puțin neclare și foarte granulate.

Al doilea fișier este de origine complet tehnică - este un tabel de gradient generat folosind Adobe Photoshop și salvat cu o calitate 100%. Schimbări vizibile prelucrarea acestui tabel va servi la evaluarea calității finale.

Al treilea fișier a fost filmat cu o cameră de amator „medie” Panasonic GF3 în mod automat din mână Aceasta este o cameră de sistem de uz casnic, fără oglinzi, dar cu optice interschimbabile. Datorită stabilizării optice, claritatea este mai bună aici, nu este un telefon mobil, dar zgomotul este aproape același.

Ultimul fișier este de pe Unsplash.com, de Karl Fredrickson. Servește ca exemplu de fotografie făcută cu o cameră profesională cu optică scumpă.

Instrumente

JpegMini

JpegMini program platit. Există versiuni pentru 20 și 149 USD, precum și o versiune de server costisitoare. Versiunile desktop funcționează la fel, cea mai tânără are două limitări: în viteza de procesare și în rezolutie maxima fișier (28MP), cel mai vechi este limitat de dimensiunea fișierului (60MP). Funcționează pe Windows și Mac.

TinyJPG

Există o versiune plătită sub formă de plugin pentru Adobe Photoshop(50 USD) și o versiune online gratuită cu restricții privind dimensiunea fișierului și numărul de descărcări pe zi (care, totuși, este foarte ușor de gestionat). Pluginul funcționează și pe Windows și Mac. Primele 500 de fișiere pe lună prin API sunt gratuite, apoi 0,009 USD per fișier.

Compresor.io

Renumit serviciu online. Singura limită este dimensiunea maximă a fișierului, 10 MB.

Kraken.io

Popular în Occident serviciu profesional cu tarife mari şi cote stricte. Versiunea online gratuită este limitată dimensiune maximă fișierul are 1 MB și cu greu poate fi perceput ca un instrument. Aceasta nu este altceva decât o versiune demonstrativă - o cameră de amator obișnuită nu este capabilă să producă un fișier mai mic de 2-3 MB. Tarife pentru Utilizarea API-uluiîncepe de la 5 USD pe lună pentru un volum primit de 500 MB.

ConvertImage.net

Un set de instrumente online pentru procesarea imaginilor, inclusiv un compresor Jpeg. Complet gratuit.

Jpeg-Optimizer.com

Serviciu online. Complet gratuit și fără restricții. Există o ajustare manuală a nivelului de compresie.

Optimizilla.com

Serviciu web gratuit. Același motor se găsește și pe alte domenii. Interfață multilingvă. Instalare manuală nivelul de compresie (setarea apare după încărcarea imaginii). Nu mai mult de 20 de fișiere simultan.

DynamicDrive.com

Un set de instrumente gratuite de procesare a imaginilor online. Optimizat cu o limită de fișiere de 2,8 MB. Produce mai multe imagini gata făcute cu diferite niveluri de compresie din care să alegeți.

ShortPixel.com

niste serviciu nou cu o abundență de diferite planuri tarifare, există un abonament lunar și tarife de pachet (10.000 de fișiere pentru 9,99 USD). Funcționează prin API sau interfață web (până la 20 de fișiere simultan). Limita de dimensiune a fișierului în versiune online gratuită- până la 10 MB.

ACDSee Ultimate

ACDSee Ultimate 9 program profesional pentru organizarea și procesarea imaginilor pentru Windows. Salvare cu „Optimizați codurile Huffman” și „Eșantionarea componentelor de culoare” activate, calitate 70%. Programul este plătit, prețul începe de la 40 USD pentru cea mai modestă versiune, dar multe programe gratuite au setări similare. Acesta este un exemplu de economisire pură cu puțină optimizare fără pierderi.

JPEG „curat”.

Salvarea unui fișier cu o calitate de aproximativ 70% (9 din 12) din Adobe Photoshop CS6, o variație a formatului „de bază”. Iată un JPEG pur folosind doar capacitățile formatului, „cel mai jos punct de referință”, disponibil gratuit din orice program care poate salva în format JPG.

Acum puțin despre cei care au fost uitați și de ce. Cu siguranță veți găsi acest lucru pe Google dacă încercați să găsiți singur optimizatori, așa că este imposibil să nu vorbiți despre ele.

Cred că unui utilizator neexperimentat cu un fișier nu foarte de calitate, rezultatul tuturor instrumentelor va părea acceptabil. Diferență între calitate originala iar un fișier optimizat cu artefacte nu merită cuvinte când vine vorba de fotografii vechi neclare din arhiva de acasă. Tot ce se spune mai jos se referă în principal la foto-esteți. La nivel de amatori, toate instrumentele dau rezultate destul de potrivite doar dimensiunea finală a fișierului.

JpegMini și Kraken se aflau în partea de jos a tabelului, sortate după dimensiunea fișierului final, dar numai aceste două tehnologii comprimă fișierul, salvând imaginea complet sincer. În categoria „10 puncte”, JpegMini arată mai atractiv din toate părțile.

Cu o imagine puțin mai puțin acceptabilă, sa dovedit că Compressor.io comprimă mai bine fișierele mici, iar Optimizilla.com le comprimă pe cele mari, dar aceasta este o concluzie foarte arbitrară în cadrul acestui test.

Ținând cont de raportul dimensiune/calitate, ceea ce este în tabelul de mai jos nouă, dar are evaluări mai mici cu o dimensiune mai mare a fișierului, nu prezintă interes practic. Iar deasupra „nouă” există doar două servicii.

Cel mai recent serviciu s-a dovedit a fi interesant - ShortPixel. Artefactele sunt foarte vizibile, dar dacă comprimați imaginea la această dimensiune folosind formatul JPG în sine, imaginea se dovedește semnificativ mai proastă. ShortPixel este mai orientat spre API și relativ ieftin, dar foarte distructiv pentru imagine.

TinyJPG sub formă de plugin este mai modest, ceea ce probabil este făcut corect. Este încă mai bun decât toate celelalte în ceea ce privește dimensiunea fișierului, dar artefactele sunt puțin mai mici decât cele ale versiunii online.

O caracteristică interesantă a TinyJPG sub forma unui plugin: după procesare, fișierul poate fi fie de 8-10 ori mai mic decât dimensiunea originală, fie de una și jumătate până la două ori mai mare.

Imaginea de testare nr. 2 a fost cel mai bine comprimată de ShortPixel, dar pe majoritatea fișierelor cu un numar mare mici detalii, câștigătorul este versiunea web a TinyJPG. Fișierul se dovedește mai mic, iar imaginea originală nu este la fel de deformată. Cu toate acestea, TinyJPG acceptă fișiere nu mai mari de 5 MB, iar ShortPixel, chiar și în versiunea gratuită, acceptă fișiere de până la 10 MB.

O alta factor important măsurători (cu excepția dimensiunii finale a fișierului) - ușurință în utilizare în flux. De exemplu, dacă aveți sarcina de a optimiza o arhivă de acasă de 100 GB pentru prima dată, procesarea completă a acesteia folosind serviciile online va fi foarte laborioasă și va consuma mult timp din cauza limitărilor și a necesității de a încărca acest volum în porțiuni pe server. si inapoi. În ciuda faptului că, pentru un modest 20 USD, cu JpegMini acest lucru va necesita o mișcare a mouse-ului (la propriu: trebuie doar să trageți folderul rădăcină cu imagini în fereastra programului).

Apropo, pluginul TinyJPG pentru Photoshop nu este conceput ca un filtru, ci ca un canal de export, de exemplu. Nu este potrivit pentru crearea unui script de automatizare în PS. Corecție: de pe site-ul producătorului puteți descărca scripturi de automatizare care funcționează în orice versiune de Photoshop, iar în Photoshop CC, exportul printr-un plugin este o operațiune de procesare în lot. Pluginul nu are restricții - testat pe un fișier cu o rezoluție de 130MP (timpul de procesare este de aproximativ 7 minute pe un computer destul de puternic).

În general, pentru procesarea în vrac există doar două opțiuni - folosind API și JpegMini. Va trebui să plătiți pentru procesare prin API pentru fiecare fișier procesat.

concluzii

Toate instrumentele care vă permit să obțineți un fișier relativ acceptabil de o dimensiune mai mică decât o oferă JpegMini - fie degradează vizual imaginea și sunt inferioare acesteia ca ușurință de utilizare, fie au o politică de preț mai puțin atractivă - bazată pe timp sau fișier cu fișier închiriere față de o achiziție unică de la JpegMini.
Pentru cazurile în care calitatea imaginii este de o importanță capitală și dacă reducerea dimensiunii fișierului în detrimentul degradării vizuale este inacceptabilă, JpegMini rămâne cel mai bun instrument.
Pentru cazurile în care calitatea fișierelor sursă poate fi ușor neglijată de dragul compresiei, este logic să folosiți ambele versiuni de TinyJPG, în funcție de sarcină.
Dacă alegeți doar dintre compresoarele gratuite, cel mai bun aspect sunt Compressor.io și Optimizilla.com, care aproape nu strică imaginea, în ciuda faptului că fișierul final este vizibil mai mic decât JpegMini.
Proprietarii de site-uri de știri cu un flux mare de ilustrații, ale căror afirmații de calitate nu sunt atât de acute, au sens să acorde atenție ShortPixel și TinyJPG. Avantajele lor sunt tarifele accesibile, compresia înregistrărilor și lucrul prin API. Și dacă calitatea contează (dar banii nu contează), atunci are sens să conectați Kraken prin API sau, în cazul unui volume mari, versiunea de server a JpegMini.

revizuire

Viteza de încărcare a paginilor web este unul dintre factorii în „atitudinea” motoarelor de căutare față de site-ul dvs. Cu cât paginile se încarcă mai repede, cu atât utilizatorii sunt mai loiali site-ului - nimănui nu-i place să aștepte mult timp și să irosească mult trafic.

Serviciul Google (aparent) închis PageSpeed Insights este larg cunoscut, permițându-vă să verificați viteza de încărcare a oricărui site publicat și, pe baza rezultatelor verificării, acordând o evaluare pe o scară de o sută de puncte și recomandări. În mod obișnuit, recomandările includ optimizarea și reducerea codului programului, comprimarea imaginilor, configurarea memoriei cache a serverului și a browserului etc.

Pentru resursa medie de conținut pe un CMS gratuit precum WordPress (da, vorbesc despre al meu și despre mii de site-uri similare), opțiunile de optimizare se limitează la instalarea de pluginuri de cache și lucrul cu imagini. „Comandă rapid” tema și scurtează HTML, CSS și Cod JavaScript Nu toată lumea poate, iar astfel de acțiuni, de regulă, duc la diverse erori și pierderea funcționalității.

Pentru a lucra cu imagini sub WordPress, există o serie de plugin-uri care convertesc și comprimă imagini cu sau fără pierdere, din mers sau la cerere. Cel mai bun, după părerea mea, dintre aceste plugin-uri este EWWW Image Optimizer.

Ca alternativă, puteți conecta un fel de serviciu CDN, astfel încât conținutul static, și anume grafica, să fie servit de pe servere terțe, ușurând ușor serverul de fișiere de găzduire și accelerând încărcarea paginii prin distribuirea surselor. În cazul meu, acest lucru este realizat de modulul Photon ca parte a pluginului JetPack extrem de popular și criticat periodic.

Toate acestea funcționează în grade diferite, dar există o modalitate universală de a optimiza imaginile pentru orice site care rulează nu numai pe WordPress - pentru a începe, aveți nevoie doar de un cont Google.

Vorbim, destul de ciudat, despre Google Photos - un serviciu care este conceput pentru a stoca fotografiile realizate pe smartphone-uri Android și imaginile și videoclipurile de rezervă ale utilizatorilor de computere care au instalat un utilitar special.

Recomandat de experți în ajutorul PageSpeed Insights proces Google optimizarea imaginii este descrisă după cum urmează:

Optimizați-vă imaginile

Această regulă este declanșată atunci când PageSpeed Insights detectează că dimensiunea imaginilor de pe pagină poate fi redusă fără pierderi mari de calitate.

Informații generale

Încercați să mențineți dimensiunea imaginilor la minimum: acest lucru va accelera încărcarea resurselor. Formatul și compresia corecte a imaginilor pot reduce dimensiunea acestora. Datorită acestui lucru, utilizatorii pot economisi timp și bani.

Optimizarea de bază și avansată ar trebui efectuată pentru toate imaginile. Ca parte a optimizării de bază, câmpurile inutile sunt tăiate, adâncimea culorii este redusă (la valoarea minimă acceptabilă), comentariile sunt eliminate și imaginea este salvată într-un format adecvat. Optimizarea de bază se poate face folosind orice program de editare a imaginilor, cum ar fi GIMP. Optimizarea avansată comprimă fișierele JPEG și PNG (fără pierderi).

Utilizați instrumente de compresie a imaginii

Există instrumente care efectuează compresie suplimentară pe fișierele JPEG și PNG fără pierderi sau reduceri de calitate. Pentru fișierele JPEG, este recomandat să utilizați jpegtran sau jpegoptim (disponibil numai pe Linux, rulați cu opțiunea --strip-all). Pentru PNG este mai bine să utilizați OptiPNG sau PNGOUT.

Se pare că ultimul paragraf descrie instrumentele cu care servere Google optimizează automat imaginile personalizate încărcate în Fotografii. Apropo, fișierele video incluse în serviciu sunt și ele optimizate, dar acest lucru este complet lipsit de importanță, având în vedere existența continuă a YouTube.

Să ne uităm la un exemplu. Azi am facut poze pt următoarea publicație cuțitul pliabil și a rulat fotografiile rezultate prin aplicația FastStone Image Viewer (decupare „artistică” + redimensionare până la 1280 de pixeli în lățime). Rezultatul a fost un folder cu opt fișiere cântărind mai mult de 3 (!) megaocteți.

Aparent, noul instalat FastStone Image Viewer salvează în mod implicit fotografiile editate la o calitate aproape maximă, ceea ce duce la o „greutate” nerezonabilă a fișierelor. Însă o astfel de setare în cazul nostru este destul de justificată, deoarece algoritmii Google comprimă fotografiile fără pierderi vizibile de calitate cu upscaling 100%, ceea ce înseamnă că imaginile de bună calitate vor rămâne așa chiar și după încărcarea în Google Photos.

Pentru comoditate, este mai bine să plasați fotografiile descărcate într-un nou album, care poate fi descărcat în întregime aproape imediat după crearea ca arhivă ZIP:

Dacă compari fotografiile comprimate în Google Foto cu cele originale, obții economii semnificative.

816 KB față de 3,27 MB. În același timp, calitatea fotografiilor, după părerea mea, nu a avut de suferit deloc. Facebook și VKontakte ar trebui să învețe de la Google cum să optimizeze fotografiile. Mai mult, GPhotos este echipat cu instrumente bune de editare a imaginilor - de la aplicarea filtrelor la reglarea manuală a contrastului, luminozității, saturației etc.

Astfel, Google Photos nu este doar un nor excelent pentru stocarea și publicarea fotografiilor, ci și Unealtă puternică optimizarea imaginilor pentru publicare pe web. Numai în cazul WordPress, nu uitați să dezactivați pluginurile de optimizare și același modul Photon jetpack, altfel fotografiile deja pregătite pentru publicare vor suferi o compresie suplimentară, ceea ce va duce la pierdere notabilă calitate (de exemplu, vezi capturi de ecran transmise prin Google Foto și apoi Photon în această postare).

În epoca actuală a tehnologiei mobile, optimizarea imaginilor în formatele PNG și JPG, JPEG a devenit din nou relevantă, deoarece era relevantă în acele vremuri când Internetul tocmai intra în viața noastră și era universal lent și dial-up. Internetul mobil, desigur, nu este în întregime corect în comparație cu dial-up-ul, dar în locurile în care conexiunea este slabă, viteza de acces este destul de scăzută. Și chiar și în acele zile, utilizatorul nu avea încotro și trebuia să aștepte ca pagina să se încarce. Acum internetul a crescut, există o selecție mare de site-uri. Utilizatorul a devenit capricios și nerăbdător, iar timpul mediu de încărcare a paginii a scăzut foarte mult. Este mai ușor pentru utilizator să găsească un alt site mai rapid.
Da, iar giganții de căutare precum Google sau Yandex au început să acorde atenție cât de repede se încarcă site-urile, dând preferință în rezultatele căutării celor care sunt mai rapide. Greutatea paginii joacă, de asemenea, un rol important în acest sens, care, la rândul său, depinde foarte mult de greutatea imaginilor aflate pe ea. Este destul de evident că având compact imagini comprimate avantajează pe toată lumea. Prin urmare, aici vreau să vorbesc despre cum să vă pregătiți fișierele PNG și JPG, JPEG pentru încărcare pe găzduire.

Optimizarea de bază a imaginii

Aceasta implică tăierea câmpurilor inutile, reducerea adâncimii culorii, eliminarea comentariilor și salvarea imaginii într-un format adecvat. Pentru a face acest lucru, puteți folosi Adobe Photoshop sau, dacă nu îl aveți, MS Paint sau GIMP.
Chiar și decuparea de bază a imaginii va reduce greutatea acesteia destul de bine.

Cum să faci o imagine mai mică în MS Paint

Folosind MS Paint ca exemplu, vă voi arăta cum să reduceți o imagine la dimensiunea necesară.
Să luăm, de exemplu, sigla NGINX și imaginea sa nginx.png care măsoară 2000x417 pixeli, care trebuie tăiată la 1024 în lățime, deoarece Aceasta este lățimea aspectului paginii și nu are rost să faceți mai mult.

Rezultatul este o imagine care a suferit o optimizare de bază minimă. Este timpul să treci la comprimarea greutății ei.

Optimizator de fișiere pentru PNG și JPG, compresie JPEG

Cel mai simplu și cale rapidă obțineți o compresie optimă a imaginii fără pierderea calității - utilizați programul File Optimizer

Site-ul oficial și descrierea programului :

Descărcați File Optimizer poti cu

Descriere . Este optimizator eficient nu numai pentru imagini, ci și pentru fișiere .pdf, .docx, txt și alte fișiere text, audio și video, precum și arhive. O listă completă a extensiilor acceptate poate fi găsită la Pagina Oficială proiect.
Iată câteva dintre utilitățile folosite în lucrare: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostscript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf tipress,-z5Gcom, pngwolf tipress,-htmlRe, pngwolf. Cred că chiar și această listă parțială este destul de impresionantă.

Instalarea și utilizarea File Optimizer

Prima descărcare ultima versiune programe fie sub forma unui program de instalare, fie sub formă de arhivă cu fișiere. Apropo, arhiva are o versiune pentru versiunile de Windows pe 32 și 64 de biți.

Interfața este destul de simplă și intuitivă.
Nu are nevoie de setări, dar puteți personaliza unele formate pentru dvs. folosind butonul Opțiuni...
Utilizare . Fie trageți și plasați fișierele necesare și chiar folderele (directoare) în fereastra programului, fie le selectați pe cele de care aveți nevoie prin meniul Adăugați fișiere....
Pentru a optimiza fișierele, faceți clic pe Optimizați toate fișierele

Fișierele optimizate vor înlocui fișierele sursă, iar ierarhia categoriilor va fi, de asemenea, păstrată. Vizavi de fiecare fișier, vor fi afișate statistici, cât cântărește versiunea optimizată ca procent din dimensiunea fișierului original.
După finalizarea lucrării, statisticile privind numărul de fișiere procesate vor fi afișate mai jos în linia de stare, precum și cât a fost salvat.

După părerea mea, File Optimizer își face treaba foarte bine.
Singurul negativ este că, dacă lista de fișiere este mare, puteți aștepta mult timp pentru rezultate, dar merită.

Dacă sunteți interesat de detaliile metodelor de optimizare care pot fi configurate în mod propriu, atunci vom vorbi despre configurarea și utilizarea utilităților pentru compresia imaginii

Comprimați PNG fără a pierde calitatea

Să ne uităm la 3 programe pentru optimizarea PNG:

Adobe Photoshop
OptiPNG
PNGOUT

Să le comparăm în ceea ce privește calitatea compresiei imaginii. Vom comprima nginx.png din secțiunea anterioară. Greutatea inițială este de 27,5 KB.

Comprimați PNG folosind Adobe Photoshop

Primul de pe listă este Photoshop, care este bine cunoscut de toată lumea. Un procesor multifuncțional pentru un designer care poate face aproape orice, inclusiv comprimarea imaginilor.
Deschideți în Photoshop Fișier-Salvare pentru web sau folosiți o combinație Alt+Shift+Ctrl+S

Ca rezultat, obținem 22,7 KB, adică s-a redus cu 17,5%

Din păcate, majoritatea programelor de grafică nu pot debloca întregul potențial al algoritmilor folosiți pentru comprimarea PNG-urilor. Motivul principal Ideea este că pentru a determina strategia optimă de compresie, aceștia folosesc algoritmi euristici care le permit să estimeze eficiența anumitor parametri fără a efectua compresia, ceea ce, ca urmare, are ca rezultat un procent mare de erori. Prin urmare, pentru a comprima PNG folosim utilități special create în acest scop, și anume OptiPNG și PNGOUT.

Utilizarea OptiPNG pentru a comprima PNG

Cum se instalează și se utilizează OptiPNG

Am descărcat .exe, l-am încărcat în C:\Windows, am luat fișierul PNG dorit și l-am pus într-un folder. Acum, folosind FAR Manager sau un alt manager de fișiere cu suport pentru consolă, accesați acest folder și introduceți comanda în consolă

Optipng -o7 nginx.png

Comanda vă obligă să comprimați PNG-ul din folder. Mai târziu ne vom uita la o opțiune simplă despre cum să faceți compresia cu un singur clic.
Dar mai întâi, să aruncăm o privire la rezultat.

18,8 KB, adică s-a redus cu 31,6%, aproape o treime. Nu e rău deloc, nu-i așa? Photoshop a ieșit mult mai rău.

Utilizarea PNGOUT pentru a comprima PNG

Cum se instalează și se utilizează PNGOUT

Totul este exact la fel ca pentru OptiPNG. Descărcați PNGOUT.exe, plasați-l în C:\Windows, deschideți într-un manager de fișiere, de exemplu, Far folderul managerului cu PNG și în Linie de comanda scrie

Pngout nginx.png

Rezultatul este mai jos

Rezultatul este de 23,4 KB, adică a reusit sa se comprima cu 15%. Foarte bun.

În general, voi spune imediat că am avut rezultate diferite fișiere diferite, pe alocuri PNGOUT a funcționat mai eficient, în altele OptiPNG, așa că vă sfătuiesc să rulați imaginile una câte una prin ambele utilitare.

Cum să comprimați rapid PNG în OptiPNG și PNGOUT

Creați un fișier png.reg și scrieți acolo datele de registry

Windows Registry Editor Versiunea 5.00 @="Run OptiPNG on Folder" @="cmd.exe /c \"TITLE Rularea OptiPNG pe %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \"" @="Rulează PNGOUT pe dosar" @="cmd.exe /c \"TITLE Rulează PNGOUT pe %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""

Apoi rulați acest fișier și scrieți datele în registry Windows.
Acum, când faceți clic pe un folder cu fișiere PNG care trebuie comprimate, selectați comenzile de care aveți nevoie, compresia va avea loc automat pentru toate imaginile simultan.

Pentru a elimina totul din meniul contextual, scrieți următorul cod în png.reg și rulați-l

Windows Registry Editor Versiunea 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\SOFTWARE\SOFTWARE\SOFTWARE\SOFTWARE\ -HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Comprimare JPG, JPEG fără pierderi de calitate

Pentru optimizarea JPG, JPEG, prin analogie cu PNG, există utilitare: jpegtran și jpegoptim. Desigur, puteți folosi Photoshop, dar pentru compresia JPG și JPEG vă recomand cu căldură să le folosiți.

Cum se instalează, se configurează și se utilizează jpegtran

jpegtran - utilitate puternică, care vă permite să efectuați atât compresie simplă JPG fără pierderi de calitate, cât și compresie cu un anumit nivel de anti-aliasing și chiar conversie în JPEG progresiv.
Puteți descărca jpegtran de aici http://jpegclub.org/jpegtran/ (căutați și descărcați jpegtran.exe).

Cum să comprimați JPG, JPEG folosind jpegtran

Încărcați jpegtran.exe în C:\Windows
Apoi deschideți folderul cu JPEG dorit în Far Manager și intrați în consolă

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Optimizare de bază 1.jpg # -copy none elimină metadatele din JPG # -optimize optimizează imaginea

JPG progresiv, JPEG

Acesta este un tip de JPG care, atunci când pagina se încarcă, arată mai întâi conturul general, apoi se încarcă și aduce calitatea imaginii la maximum. Este foarte convenabil pentru internetul mobil lent și, prin urmare, este necesar să îl utilizați.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Transformă formatul 1.jpg în Progressiv

Cum să verificați dacă o imagine este un JPEG progresiv

Caracteristici avansate ale jpegtran

Toate sunt acoperite aici opțiuni posibile folosind jpegtran

Jpegtran --help usage: jpegtran inputfile outputfile Comutatoare (numele pot fi prescurtate): -copy none Copiați nici un marcator suplimentar din fișierul sursă -copiați comentariile Copiați numai marcatorii de comentariu (implicit) -copy all Copiați toți marcatorii suplimentari -optimizez Optimize Huffman table ( fișier mai mic, dar compresie lentă) -progresiv Creați fișier JPEG progresiv Comutatoare pentru modificarea imaginii: -decupați LxH+X+Y Decupați într-o subzonă dreptunghiulară -întoarceți imaginea în oglindă (stânga-dreapta sau sus-jos) -scale de gri Reduceți la tonuri de gri ( omiteți datele de culoare) -perfect Eșuează dacă există blocuri de margine netransformabile -rotiți Rotiți imaginea (în sensul acelor de ceasornic) -scale M/N Scala imaginea de ieșire cu fracțiune M/N, de exemplu, 1/8 -transpune Transpunere imagine -transversală Transpunere transversală imagine -trim Aruncă blocuri de margine netransformabile - șterge LxH+X+Y Șterge (gri) o subzonă dreptunghiulară Comutatoare pentru utilizatori avansați: -aritmetică Utilizați codare aritmetică -repornire N Setați intervalul de repornire în rânduri sau în blocuri cu B -maxmemory N Memoria maximă de utilizat (în kbytes) -outfile name Specificați numele pentru fișierul de ieșire -verbose sau -debug Emite ieșire de depanare Comutatoare pentru vrăjitori: -scanează fișier Creați JPEG multi-scanare per fișier script

Cum să comprimați rapid automat JPEG folosind jpegtran în Windows

Nu veți putea comprima prin meniul contextual datorită modului în care funcționează utilitarul, cu toate acestea, puteți configura automat comprimarea mai multor JPEG simultan.
Pentru a face acest lucru, trebuie să creăm un fișier cu extensia .bat (pentru a ajuta) și să scriem acolo

Cd/d. pentru %%j în (*.jpg) apelați:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2 "

Cum se instalează, se configurează și se utilizează jpegoptim

Cum să comprimați JPG, JPEG folosind jpegoptim

Încărcați jpegoptim.exe în C:\Windows. Apoi deschideți folderul cu imagini JPG cu folosind Far Manager și intră în consolă

Jpegoptim *.jpg --strip-all --all-progressive

Cum să optimizați mai multe JPG-uri, JPEG-uri simultan folosind jpegoptim

Spre deosebire de jpegtran, utilitarul jpegoptim vă permite să lucrați cu el destul de bine din meniul contextual.
Să creăm un fișier jpegoptim.reg, de exemplu, folosind Far Manager și să scriem acolo

Windows Registry Editor Versiunea 5.00 @="Run jpegoptim on Folder" @="cmd.exe /c \"TITLE Rulează jpegoptim pe %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

L-am lansat și am introdus datele în registru. Acum puteți comprima setul fișiere JPEG folosind meniul contextual, doar adăugați imaginile necesareîntr-un singur folder, RMB și „Run jpegoptim on Folder”.

Dacă doriți să eliminați jpegoptim din registry și din meniul contextual, scrieți jpegoptim.reg

Windows Registry Editor Versiunea 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Salvați, rulați, faceți modificări în registry.

Cât de bine comprimă jpegtran și jpegoptim jpg, jpeg

Să trecem la teste. Luați, de exemplu, fișierul caching.jpg. În original cântărește 29,5 KB

Teste Jpegtran pentru calitatea compresiei JPG, JPEG

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

Ieșirea a fost de 29,1 KB, compresie economisită cu 1,36%

Teste Jpegoptim pentru calitatea compresiei JPG, JPEG

jpegoptim caching.jpg --strip-all

Acest lucru nu este vizibil în Windows Explorer, compresia a fost de câteva sute de octeți.

Ei bine, fișierul sursă a fost bine pregătit, așa că compresia nu a funcționat efect vizibil, dar pe măsură ce procesați imaginile neoptimizate, uneori veți fi surprins de cât de multe economii de dimensiune puteți face.

Cum se configurează automat compresia png și jpg, jpeg

Dacă ați citit această secțiune, dar sunteți încă nemulțumit de opțiunile propuse, vă sugerez să asamblați singur o mașină de recoltat portabilă - un serviciu de comprimare a imaginilor, fotografiilor, imaginilor care va funcționa așa cum aveți nevoie chiar pe desktop.

Trebuie să fie preinstalat jpegtran, jpegoptim, optipng, pngout Yu
Instrucțiunile de instalare sunt mai sus.

Deci, pentru aceasta, trebuie să asamblam corect arhitectura folderului. Să presupunem că aveți un folder de imagini cu propria sa ierarhie de subdosare cu PNG și JPG pe care trebuie să le procesați.
Creați un folder optimus și puneți-l în el folderul de imagini cu toate subfolderele și fișierele.
Deschideți, deschideți optimus în el, creați un fișier go.bat acolo și scrieți-l acolo

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Numele folderului în care se află imaginile brute set folder=images echo Processing *. fișiere JPG via jpegtran:: Creați un folder în care să stocați jpg comprimat. În cazul nostru, acesta este jpeg_images xcopy /y /t /c /i „%folder%” „jpg_%folder%” :: Pentru fiecare .jpg, optimizăm folosind jpegtran. Output.jpg va fi scris în jpeg_images pentru /r %folder% %%a în (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~ dp0 =! %home_path%!fn:%~dp0=!) echo Procesarea fișierelor *.JPG prin jpegtran este finalizată:: Indicăm că rularea ar trebui să fie efectuată acum într-un nou folder jpeg_images set folder = jpg_%folder% echo Procesarea fișierelor *.JPG prin jpegoptim pentru /r %folder% %%a în (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Procesarea fișierelor *.JPG prin jpegoptim este finalizată procesarea echo a *. fișiere PNG prin optipng xcopy /y /t /c /i „%folder%” „png_%folder%” pentru /r %folder% %%a în (*.png) do (set fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) echo Procesare fișiere *.PNG prin optipng finalizat set folder=png_%folder% echo Procesare *.PNG fișiere prin pngout pentru /r %folder% %%a în (*.png) do (set fn=%%a& pngout %%~a) echo Procesarea fișierelor *.PNG prin pngout pauza finalizată

Codul este comentat în părți importante. De fapt, nimic complicat, poți să-ți dai seama dacă ai nevoie.

Acum salvați go.bat și rulați-l.

Dacă există o mulțime de fișiere, compresia imaginii va dura ceva timp. Așteptați până când consola vă anunță că procesul s-a încheiat.

Comprimarea are loc prin separarea separată a fișierelor JPG, care se află acum în jpg_images, și a fișierelor PNG separat, care se află în png_images.

Dacă trebuie să modificați calitatea sau alți parametri, consultați descrierea utilităților de mai sus și modificați codul pentru a se potrivi nevoilor dvs.

Cum să optimizați și să comprimați GIF

In cele din urma

În acest articol, am încercat să acopăr cât mai detaliat posibil metodele de optimizare a PNG și JPG. Dacă aveți întrebări sau completări, scrieți în comentarii, vom discuta

De la an la an motoare de căutare Strâng din ce în ce mai strâns șuruburile de la optimizarea externă. Și se acordă din ce în ce mai multă atenție factorilor interni ai site-ului. De exemplu, viteza de încărcare a site-ului dvs. afectează și creșterea clasamentului dvs. în rezultatele căutării.

Desigur, există multe modalități de a vă accelera site-ul, dar astăzi vom vorbi doar despre una dintre ele - optimizarea imaginilor pentru site. Nu, acestea nu sunt meta-etichetele notorii - ALT și TITLE, vom vorbi despre probleme tehnice.

La un moment dat, nici nu m-am gândit la faptul că era posibil să optimizez cumva imaginile. Și de ce? La urma urmei, imaginile în bandă largă, nelimitate, de pe site-uri sunt încărcate instantaneu. Ce va oferi reducerea dimensiunii imaginii cu 20 de kiloocteți? Nu face nimic!

Dar tendința traficului mobil ne-a făcut să ne gândim la optimizare. Dacă te uiți la graficul de creștere a traficului mobil, atunci conform statisticilor, în 2014 fiecare 3 persoane au accesat internetul de pe dispozitive mobile. Aceasta înseamnă că tot mai mulți oameni vor vizita site-uri web și bloguri de pe gadgeturi.

Și după cum știți, viteza internetului mobil este un basm. Și dacă site-ul dvs. are imagini grele, atunci este posibil ca utilizatorul să nu aștepte deloc să se încarce site-ul dvs. Prin urmare, acum subiectul optimizării imaginii pentru un site web este foarte relevant.

Înainte de fiecare dintre publicațiile mele, optimizez și credeți-mă, greutatea totală a tuturor imaginilor este redusă cu până la 60% fără a-și pierde calitatea. Deci, să aruncăm o privire la instrumentele pe care le folosesc.

Instrumente pentru optimizarea imaginilor pe un site web.

Cel mai comun și mai accesibil pentru mulți este Photoshop. Cel mai probabil, dacă sunteți blogger, webmaster sau o persoană strâns asociată cu publicarea de articole pe site-urile dvs., atunci acest software ai instalat.

Pentru a optimiza o imagine în Photoshop, trebuie să efectuați o serie de manipulări simple. Accesați meniul Fișier -> Salvare pentru Web.

După care vedem o fereastră cu două opțiuni de imagine.

Cea de sus este imaginea originală, cea de jos este ceea ce obținem după procesare.

Acum o să-ți arăt un truc. Privește imaginile și săgețile de pe ele.

Prima imagine este salvată la o calitate 100%. Greutatea ei a scăzut cu 85%.

A doua imagine este salvată la o calitate de 70%. Greutatea sa a fost redusă cu 95%, în timp ce imaginile arată identic.

Acum imaginați-vă cât timp ar trebui să petreacă un utilizator pentru a descărca o imagine de 2 megaocteți pe un dispozitiv mobil. Ce se întâmplă dacă într-un articol există 5-10 astfel de imagini? De aceea este important să optimizați imaginile pentru site-ul dvs.

Dar instrument Photoshop nu este ideal când vine vorba de optimizarea imaginilor în bloc. Deci, să trecem la un software mai specializat.

PictureBeaver este un prieten pentru utilizatorii de Windows.

Am trecut la MacOS cu mult timp în urmă și am folosit Windows în rare ocazii. Acest lucru este în principal pentru colectarea nucleului semantic folosind KeyCollector. Prin urmare, a fost nevoie de puțin efort pentru a găsi cu adevărat program demn pentru a optimiza imaginile. Și astfel încât să funcționeze pe Windows.

După cum se dovedește, există un program minunat numit PictureBeaver, care nu este agitat cu resurse și funcționează surprinzător de rapid.

Este foarte ușor de lucrat cu programul. Deschideți folderul cu scriptul descărcat și trageți toate imaginile pe care intenționați să le optimizați în fișierul optimize.wsf

După procesarea imaginilor, va apărea un folder cu imagini optimizate și un fișier de raport pentru fiecare dintre ele.

ImageOptim este un prieten cu cultivatorii de mere.

Nu există probleme cu acest software pentru MacOS. Acest lucru se datorează în primul rând faptului că tehnologia măr mai mult designerii au iubit și iubesc totul. Și le place foarte mult să se joace cu imaginile. Prin urmare, găsiți software-ul necesar nu va fi greu pentru tine.

Am ales utilitarul gratuit ImageOptim, deoarece se descurcă cu sarcina principală. Și aceasta este optimizarea în masă a imaginilor pentru site.

Principiul funcționării sale este diferit de PictureBeaver. Nu creează dosare noi cu imagini gata făcute. Pur și simplu înlocuiește originalele cu imagini optimizate.

Ea arata asa:

Fereastra în care trebuie să trageți imaginea.

Fereastra după optimizare.

După cum puteți vedea, programul a reușit să reducă greutatea totală cu 24,8%

Prima imagine a fost deja optimizată în Photoshop. Al doilea nu este.

P.S. Internetul mobil este în creștere, așa că gândiți-vă la confortul pentru utilizatori.

Cu cât o imagine este comprimată mai mult, cu atât pagina site-ului se încarcă mai repede pe un dispozitiv mobil. În continuare, ne vom uita la pașii care vă vor permite să faceți imagini optime pentru orice dispozitiv.

Optimizare echilibrată a imaginii

Problema cu optimizarea imaginii este că nu există reguli 100%. Optimizarea imaginii este întotdeauna un echilibru delicat între experiența utilizatorului, atractivitate și performanța paginii.

Raluca Budiu, director de cercetare la Nielsen Norman Group, explică:

"Deoarece dispozitive mobile ecran mic, imaginile prea mici oferă prea puține informații, iar imaginile prea mari pot încetini cu adevărat pagina. Vă recomandăm să începeți cu o imagine de dimensiune minimă și să permiteți utilizatorilor să mărească (sau să încarce o imagine mai mare).

În cele mai multe cazuri, imaginile uriașe au o densitate scăzută a informațiilor, iar oamenii trebuie să aștepte ca pagina să se încarce și/sau să deruleze în jos pentru a găsi conținutul.”

Nu există reguli exacte pentru cât de mică ar trebui să fie o imagine pentru un dispozitiv mobil - este un compromis între calitate și dimensiunea paginii. Conform httpArchive, JPG-ul mediu este de 29 KB și PNG-ul mediu este de 16 KB.

Reducerea greutății unei imagini este parțial o chestiune de a o menține la dimensiunea și rezoluția corespunzătoare (număr de pixeli) și parțial de comprimare a imaginii. Unele instrumente, cum ar fi Photoshop, permit o anumită compresie, dar aceasta nu este adesea suficientă, mai ales cu tipuri de imagini mai mari, cum ar fi PNG-urile.

O serie de instrumente vă permit să comprimați eficient imaginile individual sau în loturi de imagini. De exemplu, imaginea pagina principala, de mai sus, a fost comprimat folosind TinyPNG, rezultând o reducere a greutății cu 79%.

Trebuie să folosesc imagini de dimensiuni diferite pentru mobil, tabletă și desktop?

Când dezvoltați site-uri web pentru dispozitive mobile, tablete și computere desktop, fie prin adrese URL dedicate (site.com și m.site.com), fie pe site-uri diferite printr-o singură adresă URL (design web responsive), implicația este că imaginile ar trebui să fie dimensionate pentru a se potrivi celui mai mare dispozitiv din acea categorie.
Această poziție nu este în întregime potrivită pentru design web responsive (RWD). Filozofia RWD este de a servi același site pe mai multe dispozitive, folosind CSS pentru a formata conținutul în funcție de capacitățile dispozitivului și dimensiunea ecranului.

Cu toate acestea, acest lucru nu înseamnă că site-urile web trebuie să adopte o abordare universală a imaginilor, spune Alex Painter, consultant de performanță web la NCC Group:

„Paginile sunt adesea lente pe dispozitivele mobile din cauza incapacității de a încărca imagini care sunt dimensionate pentru fereastra de vizualizare. Popularitatea RWD poate fi parțial de vină - ideea că același conținut poate fi modificat pentru ca aspectul să funcționeze în orice fereastră de vizualizare și poate masca faptul că imaginile nu au fost optimizate pentru dispozitive mobile.

Multe site-uri încarcă aceleași imagini atât pe desktop, cât și pe dispozitive mobile - iar versiunile mobile sunt pur și simplu reduse în dimensiune. Este posibil ca un utilizator de dispozitive de înaltă performanță din rețele rapide și fiabile să nu observe imediat acest lucru. Dar acest lucru poate face site-urile web complet inutilizabile pentru persoanele cu dispozitive mobile mai slabe sau conexiuni slabe.
.
Aceasta problema mare sunt doua motive. În primul rând: prea mult pentru livrare imagine mare Prin rețea durează mai mult.
Al doilea motiv este adesea trecut cu vederea: dispozitivul mobil trebuie să muncească din greu pentru a) decoda și b) scala imaginea. Are un cost în ceea ce privește puterea de procesare și memorie.”

Dar nu trebuie să fie așa. Prin susținerea grupului comunitar de imagini receptive, specificația HTML facilitează crearea de mai multe imagini alternative Pentru tipuri diferite dispozitive - pentru diferite dimensiuni de ecran (vizionare), rezoluții (număr de pixeli) sau capabilități ale dispozitivului.

HTML-ul unei pagini de internet îi spune browserului care dintre aceste imagini să aleagă pentru ecranele cu lățime maximă și dacă imaginea ar trebui să ocupe toată lățimea ecranului sau doar o parte a acesteia.
Anterior, unii dezvoltatori foloseau JavaScript pentru a specifica utilizarea diferitelor imagini, dar utilizarea element HTML Ar trebui să fie mai eficient în reducerea cod suplimentarși interogări care încetinesc timpul de încărcare a paginii.

Alex Painter:
„Selectarea imaginii potrivite pentru fereastra de vizualizare este acum destul de simplă. Am avut interogări media CSS pentru imagini de fundal de ceva timp, dar până de curând imaginile la care se face referire în HTML au reprezentat mai mult o problemă.

Acum avem o caracteristică a imaginilor sensibile: elementul Cu atributul srcset, care vă permite să specificați ce imagine trebuie selectată pentru ce lățime a ferestrei de vizualizare (sau permiteți browserului să profite la maximum alegere potrivită dintr-un set de imagini).
Această caracteristică este acum foarte bine susținută de browsere, iar dezvoltatorii ar trebui să o folosească în mod ideal în loc să folosească JavaScript pentru a atinge același obiectiv.”

Cine folosește imagini receptive?

O privire rapidă la sursă site-uri web importante precum Amazon, Facebook și BBC confirmă că niciunul dintre ele nu utilizează încă elementul Pentru a servi răspunsuri.

Vor beneficia dacă îl vor folosi? Servirea de imagini diferite pe fiecare platformă are potențial o serie de avantaje:

Permite unui site web să afișeze o imagine mai mare cu mai multe Rezoluție înaltă pe desktop.
Reduce dimensiunile imaginii și greutatea totală a paginii, accelerând astfel timpii de încărcare.
Permite unui site mobil să arate o imagine mai mare pe un dispozitiv mobil (rețineți imaginea decupată a câinelui de mai sus).
Comercianții cu amănuntul pot afișa Imagini eroi prietenoase cu dispozitivele mobile în timp ce rămân cu fotografii tradiționale pe ecrane mai mari.

Găsirea celui mai bun format de imagine

După cum știm deja, cel mai comun format de imagine utilizat pe site-uri mobile și prietenoase pentru dispozitive mobile: JPEG 46%, PNG 28%, GIF 23% și SVG 1% conform httpArchive.

Există două tipuri de imagini web: raster și vector. Primul este format din puncte (de exemplu, fotografia digitală), iar al doilea este format din linii și forme. JPEG, PNG și GIF sunt raster. SVG este un vector. SVG este mai mult format nou, care nu este atât de utilizat pe scară largă (încă), dar este recomandat pentru design web responsive (RWD).
Există argumente pro și contra pentru fiecare tip de imagine, iar fiecare web designer are propriile păreri și formatele preferate. În general:

JPEG este folosit cel mai adesea pentru fotografiile web
GIF este tipic pentru animații, precum și pentru grafice simple, pictograme și logo-uri
PNG este tipic pentru grafică de calitate superioară, logo-uri, pictograme și alte ilustrații și fotografii cu efecte grafice.
SVG este bun pentru grafice și logo-uri, anteturi de pagină - orice lucru conceput de un ilustrator.

Alternative la imaginile tradiționale

Paginile web sunt formate din multe imagini mici, cum ar fi pictograme și butoane. Dacă sunt realizate folosind separat imagini GIF/ PNG / JPEG toate adaugă dimensiune paginii și fiecare necesită o solicitare individuală de browser, ceea ce poate încetini timpul de încărcare a paginii.

Există trei metode care pot ajuta la păstrarea dimensiunii paginii și a solicitărilor de imagini:

Sprite CSS – combină o colecție de elemente grafice mai mici într-un singur fișier CSS. Notă: supraîncărcarea sprite-urilor cu prea multe grafice sau prea mari nu va fi optimă.
Fonturile pentru pictograme sunt o bibliotecă de pictograme trimise ca un singur fișier.
Formularele CSS sunt formulare construite cu folosind CSS, mai degrabă decât ca o imagine tradițională.

Mike D'Agruma principalul front-end Dezvoltator Web, E-volve Creative Group:

„Pentru a salva dimensiunea fișierului, tind să evit să încarc biblioteci de pictograme mai mari și mai populare și să folosesc Fontastic pentru a-mi crea propriile fonturi personalizate pentru pictograme. Această metodă funcționează foarte bine pe diferite niveluri: 1) Deoarece folosesc doar un număr mic de pictograme personalizate, dimensiunea fișierului cu fonturi este semnificativ mai mică; 2) Pictogramele sunt create folosind SVG, ceea ce asigură că vor fi extrem de clare pe dispozitive; 3) Nu puteți depăși această opțiune pentru flexibilitate, deoarece pictogramele fonturilor sunt foarte ușor de personalizat folosind CSS.

O altă modalitate excelentă de a economisi timp, dimensiunea fișierului și solicitările de server este să utilizați CSS pentru a crea forme. Puteți crea majoritatea formelor și puteți adăuga oricâte efecte și tranziții doriți folosind CSS.
Luați ca exemplu site-ul mobil Summit County Metro Parks, numai în secțiunea antet am putut folosi o combinație de simboluri CSS și pictograme de font pentru a crea ceea ce ar fi putut fi șase imagini diferite. Activarea meniului pentru dispozitivele mobile arată un exemplu de animație în formular CSS(meniu în stil hamburger, se închide cu „X”) și folosind pictograma suplimentară cu partea dreapta arată stările deschise și închise ale meniului."

Tehnici de proiectare web pentru îmbunătățirea timpilor de încărcare

Ce faci când ai redus greutatea, ai eliminat imaginile inutile și ai optimizat restul, dar pagina încă nu se încarcă suficient de repede?

Asigurați-vă că cel mai important material este încărcat mai întâi, spune Raluca Budiu:

„Când pagina se încarcă, asigurați-vă că textul se încarcă mai întâi, astfel încât oamenii să poată începe să scaneze conținutul. Pe măsură ce imaginile se încarcă, nu mutați conținutul deja încărcat în jurul lor - acest lucru îi va face pe cititori să piardă locul în care se aflau pe pagină și, uneori, chiar vor face clic pe linkul greșit, deoarece ținta lor s-a mutat brusc."

Există o diferență între timpul estimat de încărcare și timpul real de încărcare. Tot ceea ce contează pentru utilizator este că conținutul pe care îl caută sau pe care îl caută este disponibil. Ei nu vor să se uite ecran gol, în timp ce browserul preia imagini de care nu au nevoie.

Există trei metode comune pentru a face acest lucru. Robert Gaines, un dezvoltator de aplicații web din Kansas, SUA, explică:

Încărcarea amânată sau leneșă utilizează JavaScript pentru a opri încărcarea imaginilor și a altor materiale până când conținutul principal al paginii web se termină de încărcat. Încărcarea leneră reduce timpul petrecut pe conținutul principal al unei pagini web, dar reduce nevoia de a tăia imaginile care altfel ar încetini pagina web.
Încărcarea lentă încarcă activele pe măsură ce sunt necesare. În acest fel, conținutul se încarcă mai întâi deasupra foldului și apoi sub fold pe măsură ce utilizatorul derulează. Cu galeriile de imagini, cum ar fi căutările de produse pe site-urile de cumpărături, sunt folosite imagini în miniatură, imaginile mari se încarcă numai când se face clic pe pictograma corespunzătoare.
Încărcarea activă a imaginii încarcă mai întâi imagini de calitate scăzută în timp ce pagina web este redată, apoi le înlocuiește cu imagini de înaltă calitate după ce s-a încărcat conținutul principal. Încărcarea activă a imaginii echilibrează performanța cu atractivitatea vizuală. Spre deosebire de încărcarea leneșă, nu obligă utilizatorii să aștepte ca imaginile secundare să se încarce după conținutul principal.

Instrumente precum Photoshop vă permit să salvați imaginile ca JPEG progresiv sau PNG-uri intercalate, care se vor încărca în modul descris.