Optimizarea imaginii ca o componentă importantă a procesului CRO. Atributele imaginii de alt și titlu. Cum să comprimați JPG, JPEG folosind jpegtran

Ilya este un avocat al dezvoltatorilor și un guru al performanței web

Imaginile sunt resursele care adesea ocupă mult spațiu pe o pagină și cântăresc cel mai mult. Prin optimizarea acestora, putem reduce semnificativ cantitatea de date descărcate și îmbunătăți performanța site-ului. Cu cât o imagine este comprimată mai mult, cu atât este nevoie de mai puțină lățime de bandă pentru descărcare și cu atât mai repede browserul poate afișa pagina utilizatorului.

Optimizarea imaginii este atât o știință, cât și o artă. O putem numi artă pentru că nimeni nu poate da un răspuns cert cu privire la modul cel mai bun de a comprima o anumită imagine. Totuși, aceasta este și știință, deoarece avem la dispoziție tehnici și algoritmi dezvoltați care pot reduce semnificativ dimensiunea resursei. Pentru a alege setările optime pentru o imagine, trebuie să luați în considerare mulți factori: capacități de format, date codificate, calitate, număr de pixeli etc.

Ștergerea și înlocuirea imaginilor

TL;DR

Eliminați imaginile inutile.
Utilizați efectele CSS3 ori de câte ori este posibil.
Utilizați fonturi web în loc să codificați textul în imagini.

În primul rând, întreabă-te: este cu adevărat necesară această imagine? Un design bun ar trebui să fie simplu și să nu compromită performanța. Cel mai bine este să eliminați pur și simplu imaginea de care nu aveți nevoie, deoarece cântărește mult mai mulți octeți în comparație cu HTML, CSS, JavaScript și alte resurse de pe pagină. Cu toate acestea, o imagine la locul potrivit poate înlocui un text lung, așa că trebuie să găsiți singur echilibrul și să luați decizia corectă.

După aceasta, ar trebui să verificați dacă rezultatul dorit poate fi atins într-un mod mai eficient:

Mulțumită Efecte CSS(gradienți, umbre etc.) și animații CSS, puteți crea elemente care arată clar la orice rezoluție și scară și cântăresc mult mai puțin decât imaginile.
Fonturi web vă permit să utilizați inscripții frumoase, păstrând în același timp capacitatea de a selecta și căuta text, precum și de a modifica dimensiunea acestuia. Datorită acestui lucru, lucrul cu resursa dvs. va deveni și mai convenabil.

Evitați codificarea textului într-o imagine. Frumoase inscripții necesare pentru design de calitate, promovarea mărcii și lucru confortabil cu resursa, dar textul din imagine iese în calea tuturor acestor lucruri. Nu poate fi selectat, găsit, mărit, copiat și, de asemenea, nu arată bine pe dispozitivele de înaltă rezoluție. Desigur, și fonturile web necesită optimizare, dar vor ajuta la evitarea problemelor de mai sus. Selectați întotdeauna acestea pentru a afișa text.

Imagini vectoriale și raster

TL;DR

Formatul vectorial este excelent pentru imagini din forme geometrice.
Calitatea imaginilor vectoriale nu depinde de scară și rezoluție.
Utilizare format raster pentru imagini complexe cu multe forme și detalii non-standard.

Dacă decideți că ar trebui să utilizați o imagine pentru a obține rezultatul, alegeți formatul potrivit pentru aceasta:

Imagine vectorială

Imagine raster

Grafica vectorială utilizează linii, puncte și poligoane pentru a afișa imagini.
În grafica raster, valorile individuale ale fiecărui pixel dintr-o grilă dreptunghiulară sunt codificate, iar imaginea este afișată pe baza acestora.

Fiecare format are propriile sale avantaje și dezavantaje. Formatul vectorial este ideal pentru imaginile realizate din forme geometrice simple (cum ar fi logo-uri, text, pictograme etc.). Acestea rămân clare la orice rezoluție și scară, așa că utilizați acest format pentru ecrane mariși resurse care ar trebui afișate în diferite dimensiuni.

Cu toate acestea, formatele vectoriale nu sunt potrivite pentru imagini complexe (cum ar fi fotografiile). Este posibil să existe prea mult markup SVG pentru a descrie toate formele, dar imaginea rezultată va părea în continuare nerealistă. În acest caz, ar trebui să utilizați un format de imagine raster, cum ar fi GIF, PNG, JPEG sau formatele mai noi JPEG-XR și WebP.

Calitate imagini raster depinde de rezoluție și scară: atunci când este mărită, devine neclară și se desparte în pixeli. Ca rezultat, poate fi necesar să salvați mai multe versiuni ale bitmap-ului la rezoluții diferite.

Optimizat pentru ecrane de înaltă rezoluție

TL;DR

Pe ecranele de înaltă rezoluție, un pixel CSS este format din mai mulți pixeli de ecran.
Imaginile de înaltă rezoluție au mult mai mulți pixeli și octeți decât imaginile obișnuite.
Tehnicile de optimizare pot fi aplicate imaginilor de orice rezoluție.

Când vorbim despre pixeli, trebuie să facem diferența între pixelii ecranului și pixelii CSS. Un pixel CSS poate corespunde unuia sau mai multor ecrane. Acest lucru se face astfel încât pe dispozitivele cu un număr mare de pixeli de ecran imaginea să fie mai clară și mai detaliată.

Desigur, grafica arată foarte bine pe ecranele cu DPI ridicat (HiDPI). Cu toate acestea, pentru a arăta bine la rezoluție înaltă, imaginile noastre trebuie să fie mai detaliate. Dar avem o soluție: formatele vectoriale sunt ideale pentru această sarcină. Ei mențin claritatea în orice rezoluție. Chiar dacă costul redării detaliilor mici crește, folosim totuși o resursă independentă de dimensiunea ecranului.

Pe de altă parte, există mult mai multe complexități cu imaginile raster, deoarece codifică datele de imagine la fiecare pixel. Astfel, cu cât numărul de pixeli este mai mare, cu atât dimensiunea unei astfel de resurse este mai mare. Ca exemplu, luați în considerare diferența dintre fotografiile de 100x100 pixeli CSS:

Când dublăm rezoluția ecranului, numărul total de pixeli se dublează imediat: de două ori pe verticală și de două ori pe orizontală.

Rezuma. Pe ecranele de înaltă rezoluție, grafica arată foarte atractivă, astfel încât să vă puteți crea o impresie bună despre site-ul dvs. Cu toate acestea, astfel de ecrane necesită imagini de înaltă rezoluție. Alegeți formate vectoriale pentru că arată clar pe orice dispozitiv. Dacă trebuie să utilizați o imagine bitmap, adăugați câteva variante optimizate ale resursei (vezi mai jos).

Optimizarea imaginilor vectoriale

TL;DR

SVG este un format de imagine bazat pe XML
Fișierele SVG trebuie reduse pentru a le reduce dimensiunea.
Comprimați fișierele SVG folosind GZIP.

Toate browserele moderne acceptă formatul SVG (Scalable Vector Graphics). Este un format de imagine bazat pe XML pentru grafică 2D. Marcajul SVG poate fi încorporat direct într-o pagină sau într-o resursă externă. La rândul său, fișierul SVG poate fi creat folosind orice software pentru desen vectorial sau manual într-un editor de text.

Exemplul de mai sus desenează o formă circulară simplă cu un chenar negru și un fundal roșu. A fost exportat din Adobe Illustrator. După cum vă puteți imagina, conține o mulțime de metadate, cum ar fi informații despre straturi, comentarii și spații de nume XML, care de cele mai multe ori nu sunt necesare pentru a afișa resursa în browser. Ca rezultat, ar trebui să minimizați fișierele SVG folosind instrumentul svgo.

De exemplu, svgo reduce dimensiunea celor de mai sus fișier SVG cu 58% de la 470 la 199 B. În plus, deoarece SVG este un format bazat pe XML, putem aplica compresia GZIP pentru a-i reduce dimensiunea în timpul transmisiei. Asigurați-vă că serverul dvs. este configurat pentru a comprima elementele SVG.

Optimizarea bitmaps

TL;DR

O imagine raster este o grilă de pixeli.
Fiecare pixel conține informații despre culoare și transparență.
Pentru a reduce dimensiunea imaginii, se folosesc compresoare diverse metode pentru a reduce numărul de biți pe pixel.

O imagine raster este pur și simplu o grilă bidimensională de pixeli individuali. De exemplu, o imagine de 100 x 100 pixeli este o secvență de 10.000 de pixeli. Fiecare pixel conține valori RGBA: canale roșu (R), verde (G) și albastru (B), precum și un canal alfa sau de transparență (A).

Browserul setează 256 de valori (nuanțe) pentru fiecare canal, ceea ce se traduce în 8 biți pe canal (2^8 = 256) și 4 octeți pe pixel (4 canale x 8 biți = 32 biți = 4 octeți). Astfel, cunoscând dimensiunile grilei, putem calcula cu ușurință dimensiunea fișierului:

Imagine 100 x 100 pixeli. este format din 10.000 de pixeli
10.000 de pixeli x 4 B = 40.000 B
40.000 B / 1024 = 39 KB

Notă:În plus, indiferent de formatul de imagine transmis de la server către client, la decodarea imaginii, fiecare pixel ocupă 4 octeți de memorie. Prin urmare, la afișare fișiere mari Pe dispozitivele cu memorie limitată, pot apărea probleme.

Poate părea că 39 KB este destul de puțin pentru o imagine de 100x100 pixeli. Cu toate acestea, dacă dimensiunea fișierului crește, fișierul va cântări mult mai mult, iar descărcarea acestuia va necesita mult timp și resurse. Această imagine este momentan necomprimată. Ce se poate face pentru a-i reduce dimensiunea?

Unul dintre moduri simple optimizarea imaginii - reduceți adâncimea culorii de la 8 biți pe canal, alegând o paletă mai mică. Setând adâncimea la 8 biți pe canal, obținem 256 de valori pe canal și 16.777.216 (2563) culori. Poate ar trebui să reducem paleta la 256 de culori? Atunci vom avea nevoie de doar 8 biți pentru toate canalele RGB și doar 2 octeți per pixel, nu 4 ca înainte. Am reușit să comprimăm imaginile la jumătate!

Notă:Imagini PNG de la stânga la dreapta: 32 de biți (16 milioane de culori), 7 biți (128 de culori), 5 biți (32 de culori). Imagini complexe cu tranzitie lina culorile (degrade, cer etc.) necesită palete mai mari. Cu toate acestea, dacă resursa constă dintr-un număr mic de culori, o paletă mare este o risipă de biți.

După ce am optimizat datele în pixeli individuali, să ne îndreptăm atenția către pixelii vecini. Se pare că culoarea unor astfel de pixeli în multe imagini, în special în fotografii, este adesea similară. Acest lucru permite compresorului să utilizeze codificarea delta. În loc să stocați valori separate pentru fiecare pixel, puteți specifica doar diferența dintre pixelii vecini. Dacă sunt aceleași, atunci delta este zero și trebuie să stocăm doar un bit. Dar asta nu este tot!

De multe ori nu observăm diferența în unele nuanțe, așa că putem optimiza imaginea reducând sau mărind paleta pentru acele culori. Fiecare pixel dintr-o grilă 2D are mai mulți vecini, astfel încât să putem îmbunătăți codarea delta. Concentrați-vă nu pe vecinii imediati ai unui pixel, ci pe blocuri întregi de culori similare și codificați-le folosind setări diferite.

După cum puteți vedea, optimizarea imaginii devine din ce în ce mai complexă și mai interesantă. Există cercetări științifice și comerciale pe această temă, deoarece imaginile cântăresc o mulțime de octeți și este profitabil să se dezvolte noi tehnici de compresie. Dacă doriți să aflați mai multe, citiți sau consultați exemplele specifice din .

Deci, cum ne ajută tot acest material complex să optimizăm imaginile? Să repetăm: nu trebuie să inventăm noi metode de compresie. Cu toate acestea, trebuie să știm despre aspecte cheieîntrebare: pixeli RGBA, adâncimea culorii și diverse tehnici de optimizare. Acest lucru este necesar pentru a continua conversația despre formatele raster.

Comprimarea datelor cu pierderi și fără pierderi

TL;DR

Ținând cont de particularitățile vederii umane, compresia datelor cu pierderi poate fi utilizată pentru imagini.
Comprimarea datelor cu pierderi și fără pierderi este utilizată pentru a optimiza imaginea.
Diferența dintre formatele de imagine este diferența în modul și ce algoritmi de compresie sunt utilizați pentru a reduce dimensiunea resursei.
Nu există o setare optimă pentru format sau calitate care să se potrivească tuturor imaginilor. Când sunt combinate diferite compresoareși resurse nu vom obține niciodată același rezultat.

Pentru anumite tipuri de date, cum ar fi codul sursă a paginii sau fisier executabil, este extrem de important ca compresorul să nu ștergă sau să modifice informațiile originale. Un fragment de date lipsă sau incorect poate deteriora sau distruge complet sensul conținutului unui fișier. Cu toate acestea, alte tipuri de date pot fi transmise în formă aproximativă.

Din cauza naturii vederii umane, este posibil să nu observăm absența oricărei informații despre fiecare pixel, de exemplu nu vom vedea diferența dintre anumite nuanțe de culoare. Prin urmare, putem folosi mai puțini biți pentru a codifica unele culori și, prin urmare, pentru a reduce dimensiunea resursei. Astfel, optimizarea standard a imaginii constă din două etape principale:

Comprimarea imaginii [Lossy] (http://ru.wikipedia.org/wiki/Lossy_data_compression), care elimină unele date de pixeli.
Comprimarea imaginii [Lossless] (http://en.wikipedia.org/wiki/Lossless_compression) în care datele pixelilor sunt comprimate.

Nu este necesar să finalizați primul pas. Algoritmul exact depinde de formatul specific al imaginii, dar rețineți că fiecare imagine poate fi comprimată cu pierderi. De fapt, diferența dintre formatele de imagine precum GIF, PNG, JPEG etc. este tocmai combinația dintre diferiți algoritmi de comprimare a datelor cu pierderi și fără pierderi.

Care este cel mai bun mod de a combina compresia cu pierderi și fără pierderi? Aceasta depinde de imaginea în sine și de alte condiții, cum ar fi echilibrul între dimensiunea fișierului și zgomot. Pentru a obține imagini clare și detaliate, puteți alege să nu aplicați compresie cu pierderi. Dacă dimensiunea fișierului este mai importantă pentru dvs., nu ezitați să utilizați această metodă de optimizare. Nu există o singură opțiune de setare pentru toate imaginile. Trebuie să determinați singur rezultatul dorit și să luați o decizie.

Când utilizați compresie cu pierderi, cum ar fi JPEG, veți putea selecta setările de calitate (cum ar fi glisorul Salvare pentru Web din Adobe Photoshop). De obicei, aceasta este o valoare de la 1 la 100, care determină dacă sunt utilizați algoritmi de compresie cu pierderi sau fără pierderi. Nu vă fie teamă să reduceți calitatea: de multe ori imaginea va arăta în continuare bine și dimensiunea fișierului va fi semnificativ mai mică.

Notă:Vă rugăm să rețineți că imaginile cu aceleași setări de calitate, dar în formate diferite, vor diferi. Acest lucru se întâmplă din cauza diferențelor dintre algoritmii de compresie a imaginii. De exemplu, JPEG și WebP cu setări de calitate de 90 arată diferit. De fapt, chiar și imaginile în același format și cu aceleași setări de calitate pot diferi în funcție de compresorul utilizat.

Selectarea unui format de imagine

TL;DR

Selectați formatul standard adecvat: GIF, PNG sau JPEG.
Încercați setări diferite pentru fiecare format (calitate, dimensiunea paletei etc.) și alegeți-le pe cele care vi se potrivesc cel mai bine.
Pentru clienții moderni, adăugați resurse în imagini la scară WebP și JPEG XR:
Scalarea imaginilor este una dintre cele mai simple și mai eficiente metode de optimizare.
Dacă utilizați imagini marime mare, utilizatorul poate descărca date inutile.
Reduceți numărul de pixeli inutili prin scalarea imaginilor la dimensiunea lor de afișare.

În plus față de algoritmii de compresie cu pierderi și fără pierderi, alte caracteristici precum animația și canalul de transparență (canal alfa) sunt acceptate în formatele de imagine. Astfel, atunci când alegeți un format potrivit, trebuie să luați în considerare formatul dorit efect vizualși cerințele pentru site sau aplicație.

Format	Transparenţă	Animaţie	Browser
GIF	da	da	Toate
PNG	da	Nu	Toate
JPEG	Nu	Nu	Toate
JPEG XR	da	da	I.E.
WebP	da	da	Chrome, Opera, Android

Există trei formate standard de imagine: GIF, PNG și JPEG. În plus față de acestea, unele browsere acceptă noi formatele WebPși JPEG XR, pentru care sunt disponibile o compresie mai mare și capacități suplimentare. Deci ce format ar trebui să alegeți?

Ar trebui să fie animată imaginea? Atunci alege format GIF.
Paleta de culori GIF constă din doar 256 de culori. Acest lucru nu este suficient pentru majoritatea imaginilor. În plus, formatul PNG-8 comprimă mai bine imaginile cu o paletă mică. Astfel, alegeți GIF numai dacă aveți nevoie de animație.
Trebuie să salvăm totul piese mici in cea mai mare rezolutie? Folosiți PNG.
Formatul PNG nu aplică compresie cu pierderi, în afară de selectarea dimensiunii paletei. Datorită acestui fapt, imaginea este salvată la cea mai înaltă calitate, dar cântărește mult mai mult decât alte formate de fișiere. Utilizați acest format numai acolo unde este necesar.
Dacă imaginea constă din forme geometrice, convertiți-o în format vectorial (SVG)!
Evitați textul din imagini. Nu poate fi selectat, găsit sau mărit. Dacă este nevoie de text pentru a crea un design, utilizați fonturi web.
Optimizați o fotografie, o captură de ecran sau un tip similar de imagine? Folosiți JPEG.
JPEG folosește o combinație de compresie cu pierderi și fără pierderi pentru a reduce dimensiunea fișierului. Pentru a găsi cea mai bună combinație de calitate și dimensiune a imaginii, încercați să setați mai multe niveluri de calitate JPEG.

După ce ați determinat formatul adecvat și setările acestuia pentru toate resursele, adăugați o opțiune suplimentară în WebP și JPEG XR. Acestea sunt formate noi care nu sunt încă acceptate în toate browserele. Cu toate acestea, utilizarea lor poate reduce semnificativ dimensiunea fișierului. De exemplu, WebP comprimă o imagine mai mult decât JPEG.

Deoarece WebP și JPEG XR nu sunt acceptate în toate browserele, trebuie să adăugați o logică suplimentară aplicațiilor sau serverelor dvs. pentru a trimite resursa corespunzătoare utilizatorului.

Unele rețele de livrare de conținut oferă servicii de optimizare a imaginii, inclusiv furnizarea de fișiere JPEG XR și WebP.
Unele instrumente open source, cum ar fi PageSpeed for Apache și Nginx, optimizează, transformă și furnizează automat resurse relevante.
Puteți adăuga o logică suplimentară a aplicației pentru a determina clientul și formatele acceptate ale acestuia și apoi trimiteți cea mai bună resursă posibilă.

Rețineți că, dacă utilizați Webview pentru a reda conținut într-o aplicație nativă, atunci puteți avea control complet asupra clientului și puteți utiliza numai WebP. ÎN aplicații Facebook, Google+ etc., resursele WebP sunt folosite pentru că îmbunătățesc cu adevărat productivitatea. Pentru a afla mai multe despre acest format, urmăriți prezentarea WebP: implementarea imaginilor mai rapide, mai mici și mai frumoase din Google I/O 2013.

Instrumente și selecție de opțiuni

Nu există un format ideal, un instrument sau un algoritm de optimizare care să funcționeze pentru toate imaginile. Pentru a obține cele mai bune rezultate, trebuie să alegeți formatul și setările acestuia în funcție de conținut, cerințele vizuale și tehnice.

Instrument	Descriere
gifsicle	creează și optimizează imagini GIF
jpegtran	optimizează imaginile JPEG
	comprimă PNG fără pierderi
pngquant	comprimă PNG cu pierderi

Nu vă fie teamă să experimentați cu setările compresorului. Setați diferite setări de calitate, selectați opțiunea corespunzătoare și aplicați-o altor imagini similare de pe site. Dar rețineți: nu toate resursele grafice trebuie comprimate folosind aceeași metodă!

Scalarea imaginilor transmise

TL;DR

Avertizare:O etichetă de aici NU s-a convertit corect, vă rugăm să remediați! ""

Dimensiunea imaginii este suma pixelilor înmulțită cu numărul de octeți utilizați pentru a codifica fiecare pixel. Optimizarea imaginii se reduce la reducerea acestor două componente.

Astfel, una dintre cele mai simple și mai eficiente tehnici de optimizare este să vă asigurați că dimensiunea imaginii pe care o trimiteți nu este mai mare decât dimensiunea afișată în browser. Nimic complicat, dar multe site-uri fac o greșeală gravă. Acestea găzduiesc resurse mari, iar browserul însuși trebuie să le scaleze și să le afișeze la o rezoluție mai mică. Printre altele, acest lucru mărește sarcina pe procesorul utilizatorului.

Notă:Pentru a vedea dimensiunile originale și de afișare ale unei imagini, plasați cursorul peste ea în Instrumentele pentru dezvoltatori Chrome. În exemplul de mai sus, descarcăm o imagine care are 300x260 pixeli, dar clientul o reduce la 245x212 pixeli atunci când este difuzată.

Trimițând pixeli suplimentari și lăsând browser-ul să scaleze resursa în sine, pierdem ocazia de a optimiza numărul de octeți necesari pentru redarea paginii. Vă rugăm să rețineți că scalarea nu numai că reduce numărul de pixeli, dar modifică și dimensiunea originală a imaginii.

Dimensiunea originală	Dimensiunea afișajului	Pixeli inutile
110 x 110	100 x 100	110 x 110 - 100 x 100 = 2100
410 x 410	400 x 400	410 x 410 - 400 x 400 = 8100
810 x 810	800 x 800	810 x 810 - 800 x 800 = 16100

Rețineți că, în toate cele trei cazuri, dimensiunea afișată este cu doar 10 pixeli mai mică decât dimensiunea originală. Cu toate acestea, cu cât dimensiunea imaginii originale este mai mare, cu atât mai multe date inutile trebuie să fie codificate și trimise. Chiar dacă nu puteți stabili o potrivire completă între dimensiunile originale și cele afișate, ar trebui să reduceți cât mai mult posibil numărul de pixeli inutili.

Lista metodelor de optimizare

Rețineți câteva sfaturi și tehnici pentru a vă ajuta să vă optimizați imaginile:

Alegeți imagini în formate vectoriale. Calitatea lor este independentă de rezoluție și scară, așa că sunt potrivite pentru ecrane mari și diferite tipuri de dispozitive.
Reduceți și comprimați elementele SVG. Multe aplicații grafice adaugă marcaj XML, care conține adesea metadate inutile. Poate fi eliminat. Asigurați-vă că serverele dvs. au compresie GZIP configurată pentru activele dvs. SVG.
Alegeți cele mai potrivite formate raster. Defini cerințele necesare la imagini și selectați formatul necesar pentru fiecare resursă.
Încercați diferite setări de calitate pentru formatele raster. Nu vă fie teamă să reduceți calitatea: de multe ori imaginea va arăta în continuare bine și dimensiunea fișierului va fi semnificativ mai mică.
Eliminați metadatele inutile. Multe imagini bitmap conțin informatii inutile despre resursă: geodate, informații despre cameră etc. Pentru a le șterge, utilizați instrumentele adecvate.
Scalați-vă imaginile. Reduceți fișierele de pe server, astfel încât dimensiunea originală și cea afișată să fie aproape la fel. Acordați o atenție deosebită imaginilor mari. Dacă browserul le scalează, performanța site-ului dvs. va fi redusă semnificativ.
Automatizați. Utilizați instrumente și software de încredere care vor optimiza automat imaginile de pe site-ul dvs.

Cu excepția cazului în care se menționează altfel, conținutul acestei pagini este licențiat sub Licența Creative Commons Attribution 3.0, iar mostrele de cod sunt licențiate sub Licența Apache 2.0. Pentru detalii, consultați-l pe al nostru. Java este o marcă înregistrată a Oracle și/sau a afiliaților săi.

Actualizat 8 august 2018

În fiecare an, motoarele de căutare strâng șuruburile din ce în ce mai strâns. optimizare 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. web 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, pentru 2014 Internetul de la dispozitive mobile fiecare 3 persoane intrate. 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. web, atunci aveți acest software 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 vrac. 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 trebuit să muncesc puțin pentru a găsi un program de optimizare a imaginii cu adevărat util. Și astfel încât să funcționeze pe Windows.

După cum se dovedește, există un program minunat numit PictureBeaver, care nu este agitat în privința resurselor ș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 merelor designerii au iubit și iubesc cel mai mult. Și le place foarte mult să se joace cu imaginile. Prin urmare, găsirea software-ului potrivit nu vă va fi dificilă.

Am ales utilitate gratuită ImageOptim, deoarece face față sarcinii principale cu un bang. Ș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.

Distribuția valorilor de clasare care nu sunt legate de cuvintele cheie pe o scară de la 0 la 9, unde 0 înseamnă că factorul nu are niciun impact asupra clasării paginii și 9 înseamnă că factorul are un impact puternic:

Imaginați-vă cum se va îmbunătăți clasamentul în căutarea site-ului dvs. dacă reduceți timpul de încărcare a fiecărei pagini cu cel puțin 10%. Acest lucru vă poate aduce la prima pagină a motorului de căutare, sau chiar în primele trei rezultate - ceea ce vă va crește semnificativ veniturile.

De ce costurile de găzduire depind de dimensiunea imaginii?

Imaginile mari afectează și lățimea de bandă de găzduire. Prin urmare, dacă ai trafic mare, atunci imaginile grele vor implica costuri suplimentare. Un lucru este când 50 de persoane pe zi încarcă fotografii de 1 MB, dar ce se întâmplă dacă sunt 5.000 dintre ele?

Prin urmare, reducerea volumului imaginilor vă va economisi bani. Utilizați memoria cache a site-ului sau rețeaua de livrare a conținutului. Dar instalarea lor va necesita ajutorul dezvoltatorilor web, ceea ce este posibil doar până la un anumit punct. Prin urmare, învățați cum să reduceți singur greutatea fișierelor de imagine - este util și benefic. Citiți mai jos pentru informații despre cum să faceți acest lucru.

Formate de imagine de bază

Nu există multe formate de imagine utilizate pe resursele web. Să luăm în considerare 5 principale:

.jpg;
.png;
.gif;
.svg;
.bmp.

Cele mai multe imagini de pe Internet vin în unul dintre aceste cinci formate. Accesând orice pagină și făcând clic Click dreapta mouse-ul peste imagine, o puteți deschide într-o filă nouă:

Făcând acest lucru, puteți defini cu ușurință formatul:

Uneori nu este ușor să aflați formatul imaginii de pe computer, deoarece sistemele de operare ascund adesea extensia fișierului în mod implicit. Apoi accesați setările computerului și porniți afișarea modului extensii de fișiere.

Pe un Mac, accesați Finder > Preferințe > Avansat și apoi bifați caseta de lângă „Afișați toate extensiile de nume de fișiere”:

Pe Windows 10, deschideți Start, apoi File Explorer > Vizualizare > Setări > Vizualizare, debifați „Ascunde extensiile tipurilor de fișiere cunoscute” și selectați butonul radio „Afișați fișierele, folderele și unitățile ascunse”. Apoi faceți clic pe „OK”:

Funcția de afișare a extensiilor de fișiere va fi utilă dacă intenționați să optimizați o mulțime de imagini. În plus, acest lucru va reduce probabilitatea de eroare.

De exemplu, dacă decideți să convertiți o imagine din .jpg în .png, funcția de afișare a extensiei vă va împiedica să confundați fișierele aflate unul lângă celălalt într-un folder.

Acum să vorbim despre cum să determinați greutatea unei imagini și dimensiunea ei totală. Pe un Mac, faceți clic dreapta pe imagine și selectați Obțineți informații:

Să discutăm despre avantajele și dezavantajele fiecărui format. Diferite tipuri de fișiere au calități optime pentru unele proiecte și nu pentru altele.

.JPG

Nume complet: Joint Photographic Experts Group (pe baza numelui organizației dezvoltatorului).

Anul lansării: 1992.

Cel mai comun tip de fișier imagine. Cele mai multe smartphone-uri și camere digitale fac fotografii în el. Desigur, .JPG este mai bun dacă trebuie să reduceți greutatea fișierului, menținând în același timp calitatea imaginii.

Apropo, puteți schimba sfârșitul numelui fișierului din .JPEG în .JPG și nu se va întâmpla nimic catastrofal.

Cu toate acestea, dacă pur și simplu încărcați o fotografie de pe telefon sau cameră și încercați să o introduceți într-un site web fără optimizare, veți avea o surpriză neplăcută. Imagine JPG necomprimată de pe telefon sau camera digitala cântărește mult. Prin „mulți” înțelegem o greutate de la 1 la 10 MB (uneori mai mult).

Mai jos este un exemplu.JPG:

Aceasta este o fotografie a picturii lui Vincent van Gogh „Irisi”. Un bun exemplu de când .JPG este alegerea optimă. Poza este plină de culori, nu există deloc spațiu gol, nu există linii drepte. Doar JPG vă va ajuta să păstrați această splendoare într-un fișier ușor.

dacă aveți îndoieli ce format să utilizați, utilizați .JPG;
Acesta este cel mai bun format pentru stocarea fotografiilor;
Dimensiunea unui astfel de fișier este redusă fără pierderea calității.

.PNG

Nume complet: Portable Network Graphics.

Anul lansării: 1996.

Formatul .PNG este atât un blestem, cât și o binecuvântare. Pentru designerii web, oferă o alternativă excelentă la .GIF.

Acest format este bun pentru imagini la scară mare, dar nu fotografii sau imagini cu multă culoare și detalii (cum ar fi un tablou Van Gogh).

PNG afișează bine grafice simple, desene și diagrame. În acest format, imaginea de mai sus are doar 34 KB. Vă rugăm să rețineți că infograficele arată mai bine și cântăresc mai puțin atunci când sunt salvate în format .PNG.

Imaginile PNG se scalează bine. GIF are parametri similari cu PNG, dar nu se scalează bine: astfel de ilustrații sunt pline de artefacte și strică aspectul estetic al paginii.

ideal pentru grafice simple, desene și diagrame;
bun pentru infografice;
se cântărește bine;
nu foarte potrivit pentru imagini color cu multe detalii;
Computerele Mac fac capturi de ecran în format .PNG în mod implicit.

.GIF

Nume complet: Graphics Interchange Format (format pentru schimb de imagini).

Anul lansării: 1987.

GIF - foarte format vechi, dezvoltat înainte de apariția internetului public. Și-a făcut bine treaba când World Wide Web era relativ nou.

Today.GIF este ideal pentru imagini minuscule: pictograme, imagini cu butoane, imagini de fundal, ilustrații decorative - deoarece oferă o dimensiune de fișier extrem de mică. Numărarea nu este în megaocteți sau kiloocteți, ci în octeți. Practic nu este nimic.

În stânga este un exemplu de chenar decorativ de fereastră realizat din pătrate mici .GIF. Fiecare pătrat cântărește doar 54 de octeți

Problema cu formatul este că astfel de imagini nu se scalează bine. Ceea ce li se întâmplă se numește pixelare. Odată cu apariția .PNG, astăzi nu mai are rost să salvați imagini ca .GIF. Dar ce zici de imaginile animate?

Cu toții iubim așa-numitele animații GIF. Cu toate acestea, de regulă, cântăresc mult - aproximativ 2 MB și mai mult. Bloggerii tind să folosească imagini animate în postări, sacrificând timpul de încărcare pentru asta. Dar dacă merită, atunci de ce nu!

format învechit, înlocuit cu .PNG;
folosiți animațiile GIF ca ultimă soluție - sunt foarte grele;
GIF este ideal pentru elementele decorative mici ale paginii care nu sunt menite să fie scalate.

.SVG

Nume complet: grafică vectorială scalabilă.

Anul lansării: 2001.

Fișierele .SVG sunt incredibile. După cum sugerează și numele, aceste imagini sunt grozave pentru scalare și pot cântări foarte puțin.

Cu toate acestea, există un dezavantaj semnificativ - fotografiile nu pot fi vectoriale. Dar orice altă imagine vectorială poate fi salvată în acest format (dacă a fost creată în programul Adobe Illustrator sau Corel Draw, apoi poate fi exportat în .SVG).

Formatul este bun pentru circuite simple, diagrame și grafice. Siglele și pictogramele sunt adesea salvate ca .SVG. De obicei, acestea ar trebui să fie simple și/sau să aibă un design abstract.

Sigla NASA este salvată în format .SVG și cântărește doar 14 KB. Deși, după cum puteți vedea, imaginea în sine este mare și destul de clară. Asta-i frumusețea grafica vectoriala. Nu va exista nicio pixelare, indiferent cât de mult ai redimensiona imaginea.

Principala problemă a acestui format este că aceste imagini sunt aproape întotdeauna create de artiști cu experiență (cu excepția cazului în care, desigur, descărcați un astfel de fișier de pe un site). Dar dacă lucrați pe un site cu mult trafic, este înțelept să investiți resurse în crearea fișierelor SVG dacă sunt cu adevărat necesare.

mărime mică;
potrivit pentru site-urile web responsive care necesită imagini care pot fi scalate fără a pierde calitatea;
nu este potrivit pentru fotografii;
necesită abilități dezvoltate de proiectare pentru utilizarea corectă.

.BMP

Nume complet: Windows Bitmap, Bitmap Picture.

Anul lansării: 1985.

BMP este un format de stocare a imaginilor raster dezvoltat de Microsoft. Acesta este cel mai vechi dintre toate formatele de fișiere de pe Internet.

Dacă ați folosit vreodată programul Microsoft Paint, apoi a creat fișiere cu extensia .BMP. Majoritate browsere moderne afișează fără probleme fișierele de acest format, dar sunt rar folosite. Aceste fișiere sunt grele și predispuse la pixelare atunci când sunt scalate.

Concluzie: Acest format nu trebuie utilizat.

Reducerea greutății imaginilor fără a pierde calitatea

Următoarele instrumente vă vor ajuta aici.

Adobe Photoshop este standardul industrial pentru editarea imaginilor. Acest program platit, care costă 19,99 USD lunar. Dacă nu doriți să plătiți, puteți găsi Adobe CS6 online, ultima versiune program care nu necesită o taxă de abonament.

Una dintre cele mai utile pentru optimizarea imaginii Caracteristici Photoshop— salvarea imaginii într-unul dintre formatele web („Salvare pentru Web”). Vă permite să convertiți rapid greutatea și calitatea imaginii pentru tipuri variate fișiere.

Mai întâi, deschideți imaginea pe care intenționați să o optimizați în program:

Dacă utilizați imagini pe blogul dvs., redimensionarea lor aproape întotdeauna are sens. Aproape totul social media au propriile cerințe pentru dimensiunea imaginilor publicate. Aliniind această setare după cum este necesar, veți obține performanța maximă a paginii.

Să ne uităm la un exemplu. Să presupunem că ai vrut să inserezi o imagine într-un blog și ai început să o redimensionezi.

Lățimea câmpului de conținut: 800 pixeli

Să ne imaginăm că vrei să postezi fotografia unui prieten pe blogul tău. Lățimea imaginii este de 4.000 de pixeli. Evident, dimensiunea este de multe ori mai mare decât este necesar. Și șansele ca greutatea fișierului să fie mică sunt extrem de mici.

Puteți modifica dimensiunea la 800 de pixeli lățime - dar uneori, dimpotrivă, merită să o scalați la 1000 de pixeli. Pe Ecrane retină instalat pe un Mac, este destul de ușor să recunoști imaginile de calitate scăzută. De aceea majoritatea designerilor au regula obligatorie: Lățimea imaginii trebuie să fie de cel puțin două ori lățimea câmpului de conținut. Acest lucru se face pentru a vă asigura că imaginile arată clar chiar și pe ecranele Apple.

Singura problemă este că greutatea unei astfel de imagini va fi gigantică, ceea ce, fără îndoială, va crește timpul de încărcare și va reduce conversia.

În cazul nostru, lățimea imaginii este de 8.000 de pixeli.

Pentru a-i schimba dimensiunea, pe un Mac va trebui să faceți clic pe fila „Imagine”, apoi să selectați „Dimensiunea imaginii”:

Aici puteți selecta formatul final de fișier și puteți determina alte caracteristici ale imaginii, optimizând-o mai bine pentru rețea. Primul pas este să determinați ce tip de fișier este cel mai potrivit pentru nevoile dvs.

Încercați fiecare format, specificând dimensiunea imaginii salvate, pentru a vedea greutatea finală a fișierului. Selectând JPEG, puteți specifica calitatea imaginii finale:

După ce ați încercat toate formatele, alegeți cel cu cea mai mică dimensiune a fișierului și aceeași calitate înaltă. În exemplu, acest format sa dovedit a fi .JPG. În ea s-a decis să se salveze imaginea:

Vă rugăm să rețineți că dimensiunea fișierului în format .PNG este de 731 KB!

Alte formate pot fi de preferat. Dar dacă optimizați grafica și desenele, atunci .PNG va fi alegerea optimă.

Pentru cei care nu au Photoshop, serviciul online gratuit TinyPNG este potrivit. Desigur, optimizarea perfectă nu va funcționa, dar puteți reduce greutatea fișierului aici. Principalul dezavantaj— resursa nu vă permite să modificați dimensiunea imaginii:

Pentru a începe, mutați imaginea în centrul paginii principale a serviciului, în zona conturată de linia punctată - greutatea imaginii va scădea imediat automat:

Acum - doar descărcați fișier nou pe calculator.

Dacă este suficient de mare (mai mult de 350 KB), mai întâi reduceți dimensiunea imaginii, apoi treceți la TinyPNG. Dacă descărcați fotografii de pe un iPhone, le puteți trimite prin poștă, după ce ați specificat mai întâi o dimensiune diferită de cea originală. De obicei mare și mărime medie cel mai preferat.

GIMP

GIMP este un instrument incredibil. Este o alternativă gratuită pentru desktop la omniprezentul Photoshop. În același timp, GIMP poate face tot ceea ce creația lui Adobe este capabilă. Deci, dacă aveți un buget, acordați atenție acestui program. Este disponibil pentru Windows, Mac OS și Linux.

Ce dimensiune de fișier este de preferat?

Greutatea optimă a unui fișier depinde de unde și în ce scopuri îl vei folosi. Dar regula de bază este aceasta: străduiți-vă să reduceți cât mai mult posibil greutatea imaginii, păstrând în același timp calitatea înaltă a acesteia.

Dacă imaginile dvs. sunt nefocalizate, granulate sau plictisitoare, re-optimizați-le pentru a îmbunătăți calitatea fișierelor. Dacă utilizați Photoshop și salvați imagini ca .JPG, încercați să mutați glisorul Calitate imagine la 80% sau mai mult. Dacă salvați imaginea ca .PNG, încercați să utilizați .PNG-24 în loc de .PNG-8.

Să determinăm indicatorii ideali de volum al fișierelor pentru principalele tipuri de resurse.

Magazine online

Magazinul online mediu conține sute până la mii de imagini ale produselor pe paginile sale. Prin urmare, optimizarea conținutului vizual este extrem de importantă pentru site-urile de comerț electronic.

De regulă, greutatea imaginilor produsului este redusă la 75 KB sau mai puțin. Dacă imaginile de pe site sunt scalate, veți avea nevoie de dimensiuni mai mari. Apoi greutatea poate crește la 150 KB.

Bloguri

De regulă, greutatea imaginilor pentru bloguri nu depășește 100 KB. Dar sarcina ta este să obții un volum minim, păstrând în același timp calitatea. Omiteți animația GIF dacă nu este practică.

Portaluri SaaS

Există trei tipuri principale de imagini pe aceste resurse: pagina principala(împușcare erou), pictograme și capturi de ecran. Cea mai importantă pagină a serviciului este pagina principală, așa că toată munca de optimizare ar trebui să înceapă de aici.

Imaginea principală

De obicei, acestea sunt imagini uriașe care umplu întregul ecran. Dar dimensiunea țintă este de 250 KB sau mai puțin. Nu va fi ușor. Dar extrem de eficient. Mulți oameni nu dau în greutate atentie speciala, dar optimizarea doar a acestuia va crește deja performanța resurselor.

Pictograme

Pe multe site-uri web, pictogramele demonstrează clar funcțiile sau caracteristicile unui produs. Formatul unor astfel de imagini este de obicei .PNG, iar greutatea nu depășește 15 KB.

Capturi de ecran

Dacă capturile de ecran sunt la fel de largi ca imaginea principală, încercați să le reduceți greutatea la 250 KB; dacă nu, 100 KB sau mai puțin. Cel mai bun format pentru capturi de ecran este .JPG.

Instrumente gratuite de editare a imaginilor

Servicii online gratuite

TinyPNG. Valoarea principală a resursei este simplitatea acesteia. Este suficient să transferați imaginea în ecranul principal cum scade greutatea lui;
Pixlr. Interfața de serviciu este similară cu Photoshop. De asemenea, arată greutatea fișierului pentru o anumită calitate a imaginii;
Picmonkey. Funcțiile necesare sunt disponibile și interfața este intuitivă.

Instrumente desktop gratuite

GIMP;
Paint.net. Cea mai bună versiune de Microsoft Paint. Unul dintre funcții utile- istoric nelimitat. Puteți anula câte acțiuni este necesar;
Malul marii. Aplicație cu deschis cod sursa pentru Mac. Cunoscut pentru bug-urile sale, dar poate fi totuși util.

Câteva sfaturi finale despre optimizarea motoarelor de căutare. Numele fișierelor trebuie să fie descriptive. De exemplu, nu trebuie să dai unei imagini dintr-un magazin online un nume precum 324q345q345.png. Reflectați produsul afișat în imagine în numele fișierului. De asemenea, asigurați-vă că fiecare imagine are o etichetă Alt corespunzătoare în codul imaginii:

Aceste informații vor permite imaginii să participe la căutări prin Imagini Google sau Yandex.

Secrete pentru optimizarea titlurilor și imaginilor din resursele de conținut de top

Concluzie

Specialiștii CRO și SEO uită adesea să optimizeze imaginile, subestimând impactul acestui proces asupra profiturilor. Dar, acordând suficient timp și atenție optimizării, veți debloca încă un potențial de creștere a afacerii. Sperăm că ghidul nostru vă va ajuta în acest sens.

În era actuală a tehnologiei mobile, optimizarea imaginii în Formate PNGși JPG, JPEG au devenit din nou relevante, deoarece era relevant în acele zile 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ă trecem la comprimarea greutății ei.

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

Cea mai simplă și rapidă modalitate de a obține o compresie optimă a imaginii fără pierderea calității este utilizarea programului File Optimizer

Site-ul oficial și descrierea programului :

Descărcați File Optimizer poti cu

Descriere . Este un optimizator eficient nu numai pentru imagini, ci și pentru .pdf, .docx, txt și alte fișiere text, audio și video, precum și pentru arhive. Lista plina Puteți găsi extensii acceptate pe pagina oficială a proiectului.
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,-html. Cred că chiar și această listă parțială este destul de impresionantă.

Instalarea și utilizarea File Optimizer

Mai întâi, descărcați cea mai recentă versiune a programului 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 tragi fisierele necesareși chiar foldere (directoare) în fereastra programului sau selectați-le pe cele de care aveți nevoie prin meniul Adăugare 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 statisticile, ca procent din Dimensiunea originală Versiunea optimizată a fișierului cântărește.
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 felul dumneavoastră, 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 Optimizare 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 programe de grafică nu pot dezlănțui întregul potențial al algoritmilor utilizați pentru comprimarea PNG. Motivul principal este că, pentru a determina strategia optimă de compresie, se folosesc algoritmi euristici care permit, fără efectuarea compresiei, estimarea eficacității anumitor parametri, ceea ce, ca urmare, dă procent mare 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 asupra rezultatului.

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 folderul cu PNG într-un manager de fișiere, de exemplu, Far Manager și scrieți în linia de comandă

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, o să spun imediat că am avut rezultate diferite cu fișiere diferite, în unele locuri 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 Editorul Registrului 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) Efectuați 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

E asa tip JPG, care, atunci când pagina se încarcă, arată mai întâi conturul general, apoi se încarcă și aduce calitatea imaginii la maxim. 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

Iată toate opțiunile posibile pentru utilizarea 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 markerii 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ă îl 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 folosind Far Manager și intrați î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 multe fișiere JPEG folosind meniul contextual, doar puneți imaginile dorite într-un 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

ÎN Windows Explorer acest lucru nu este vizibil; compresia a fost de câteva sute de octeți.

Ei bine, fișierul original a fost destul de bine pregătit, așa că compresia nu a avut niciun efect vizibil, dar când procesați imaginile neoptimizate, veți fi uneori surprins de cât de mult puteți economisi în dimensiune.

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 oferite, vă sugerez să montaț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, puneți folderul imagini cu toate subfolderele și fișierele sale în el.
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 Procesarea fișierelor *.JPG prin jpegtran:: Creați un folder în care jpg-ul comprimat va fi stocate. Î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 încheiată:: Indicăm că rularea ar trebui să fie acum efectuată într-un folder nou 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 finalizat echo Procesarea fișierelor *.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 Procesarea fișierelor *.PNG prin optipng finalizat set folder=png_%folder% echo Procesarea fișierelor *.PNG 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

Potrivit angajaților Yandex, „imaginile sunt foarte parte importantă căutarea noastră. Ele îi ajută pe utilizatori să vadă tranzitul lui Venus pe discul solar, să afle cum arată un Yorkshire Terrier sau un nou sedan Tesla, compoziția unui grup de zeppelin de plumb și cum să lege o cravată.”

Prin clasarea în căutare pe baza imaginilor, site-ul va putea primi o cotă semnificativă de trafic. Inclusiv de către anchete comerciale, atunci când utilizatorul dorește să vadă cum arată un anumit produs. În plus, factori comportamentali pozitivi precum numărul de tranziții, durata și profunzimea vizionării site-ului de către vizitatorii care provin din căutarea de imagini influențează, de asemenea, clasarea site-ului în căutarea organică pentru toate interogările. Iar atragerea publicului țintă către un site comercial, chiar și dintr-o astfel de sursă precum căutarea de imagini, cu prezentarea corectă a conținutului, poate atrage pe site un număr semnificativ de vizitatori vizați care vor efectua acțiuni de conversie.

Vizualizarea imaginilor în serviciul Yandex.Images

Materialul va discuta despre metodele standard de optimizare a imaginii care sunt aplicabile tuturor tipurilor de site-uri și sunt luate în considerare de toate motoarele de căutare. Acum fiecare dintre ele va fi luat în considerare mai detaliat și va fi oferită și o descriere extinsă a fiecărui punct al recomandărilor cu explicații.

Optimizarea imaginii

Prezența imaginilor de înaltă calitate pe un site web este una dintre componentele succesului majorității proiectelor pe internet. Utilizatorii preferă să primească informații mai degrabă sub formă de imagini grafice decât de text. Este perceput mai rapid și mai bine și este mai ușor de reținut. Pentru a crește conversia site-ului și a îmbunătăți factori comportamentali este necesară dezvoltarea constantă a conținutului grafic. Trebuie să încercați să vizualizați cât mai mult posibil toate aspectele și nuanțele informațiilor disponibile. În acest fel, utilizatorii vor dori să vadă mai multe pagini pe site, le va fi mai ușor să facă o alegere și să efectueze o acțiune de conversie.

Beneficiile optimizării imaginii sunt subestimate de mulți experți. Cu toate acestea, datorită pașilor simpli, puteți obține un rezultat excelent sub formă de utilizatori fideli, al căror număr va crește din căutarea de imagini, precum și din căutarea organică.

Atributele imaginii de alt și titlu

Cele mai importante atribute ale imaginii care pot fi specificate în eticheta de cod HTML corespunzătoare sunt atributele alt și title. Valorile lor sunt una dintre principalele surse de informații despre imagini pentru motoarele de căutare.

atribut alt — Aceasta este o sursă alternativă de informații pentru utilizatorii care au dezactivat imaginile în browser. Dacă este definit atributul alt, atunci când este imposibil să afișați imaginea, textul atributului va fi afișat în locul său:

O imagine cu un atribut alt specificat

Fără setul de atribut alt, imaginea va fi afișată ca goală:

Imagine fără atribut specificatalt

Este deosebit de important să descrii imaginile folosind atributul alt pentru site-urile al căror conținut constă în principal din imagini.

Atributul title oferă informații suplimentare despre imagine. Textul conținut de acest atribut apare când treceți cu mouse-ul peste imagine:

Imaginecatribut dattitlu

Așadar, să luăm în considerare principalele recomandări ale motoarelor de căutare pentru lucrul cu imaginile site-ului web, astfel încât pe baza acestora, precum și pe baza practicilor de promovare a site-ului web, să putem stabili o listă de acțiuni care vă pot ajuta să obțineți efect maxim din optimizarea imaginii.

Nu încorporați text semnificativ în imagini. Cu alte cuvinte, toate inscripțiile importante trebuie să fie sub formă de text.

Dați fișierelor imagine nume detaliate și descriptive. Cel mai bine este să folosiți 1-2 cuvinte în numele fișierului care descriu imaginea.

Adăugați text detaliat eticheteialt.

Cea mai bună opțiune:

Furnizați suficient context pentru imagini. Textul din jurul imaginii ar trebui să corespundă cu ceea ce este descris pe ea.

Gândiți-vă la cel mai bine să vă protejați imaginile. Acest lucru se poate face într-o varietate de moduri, cum ar fi adăugarea unui filigran, plasarea unui cod pentru a încorpora imaginea pe un alt site sau punerea la dispoziție a imaginilor sub o licență care necesită un link către sursă, cum ar fi o licență Creative Commons.

Postarea de fotografii de bună calitate. Fotografiile de înaltă calitate nu numai că îi ajută pe utilizatori să vadă toate detaliile fine dintr-o imagine, dar au și performanțe mai bune ca miniaturi în rezultatele căutării și au mai multe șanse să fie făcute clic de către utilizatori.

Creați unul separat pentru fiecare imagine pagina de destinație, unde vor fi colectate toate informațiile legate de acesta. Acest lucru este relevant pentru site-urile în care imaginile sunt unul dintre elementele principale de conținut sau pentru magazinele online.

Încercați să plasați imagini în partea de sus a paginilor, unde pot fi văzute dintr-o privire. Acest lucru va interesa rapid utilizatorul să vizualizeze pagina până la sfârșit.

Încercați să vă structurați directoarele în așa fel încât imagini similare au fost ținute împreună.

Specificați lățimea și înălțimea tuturor imaginilor. Acest lucru va accelera încărcarea paginii, deoarece... Browserele le pot reda înainte ca imaginile să fie încărcate dacă cunosc cantitatea de spațiu rezervată pentru elementele care nu pot fi înlocuite.

Nu uitați de textele care descriu imaginea:

Subtitrări pentru imagini (alt, titlu);
Text adiacent imaginii;
Numele fișierelor și scripturilor, inclusiv luarea în considerare a transliterației și a traducerii interliniare simplificate;
Texte de link-uri către imagini de pe alte pagini și de pe alte site-uri;
Texte și titluri ale documentelor scurte care încadrează o singură imagine.

Din textele care se referă la imagini Yandex găsește imagini pe baza solicitărilor utilizatorilor.

Yandex indexează numai imaginile standard formate grafice(JPEG, GIF și PNG). Înainte de a încărca o imagine pe site, ar trebui să vă asigurați că este salvată într-unul dintre aceste formate.

Clasamentul este afectat și de calitatea imaginii în sine.

În rezultatele căutării, pentru fiecare imagine găsită, un link către pagina pe care descriere text Imaginile se potrivesc mai bine cu cuvintele din interogare. Astfel, conținutul text al unei pagini este un factor important de clasare în căutarea de imagini. Ca și în cazul Google, ar trebui să conțină cât mai multe informații despre ceea ce este afișat în imagine, iar acest lucru ar trebui să completeze textul.

Pași de urmat pentru optimizarea imaginilor

1. Imaginile trebuie stocate și accesate pe același server și găzduire ca și site-ul în sine. Acesta este unul dintre indicatorii calității site-ului pentru motoarele de căutare. Doar site-urile și companiile serioase își pot permite să stocheze imagini pe găzduirea sau serverul lor, pentru că... acest lucru necesită costuri materiale suplimentare. În plus, astfel de imagini se vor încărca mai repede.

2. Folosiți original imagini de înaltă calitate cu rezolutie maxima. Aceste imagini, la rândul lor, trebuie procesate de sistemul de management al site-ului și afișate pe paginile corespunzătoare într-o dimensiune mai mică, astfel încât pagina să se încarce rapid. Când faceți clic pe o imagine, aceasta ar trebui să se deschidă în cea mai mare dimensiune originală posibilă disponibilă.

3. Atributele alt și titlu ale imaginilor trebuie completate astfel încât să descrie cu acuratețe conținutul acestora. Ei trebuie să folosească 1-2 cuvinte cheie pentru care pagina este optimizată. Cel mai bine este dacă acesta este cuvântul cheie principal care se potrivește cu titlul paginii și cu ancora link-ului către aceasta din meniul principal al site-ului.

4. Pune o semnătură sub imagini, care va apărea și mai jos când dai clic pe ea. Semnătura poate fi identică cu atributul alt. Legenda trebuie să fie în același paragraf „P”, celula tabelului „TD” sau eticheta „DIV” ca imaginea.

5. Pagina pe care este postată imaginea trebuie să conțină text adecvat. Textul ar trebui să includă și ceea ce este prezentat în imagine. Acesta, la rândul său, completează acest text.

6. În atribute, specificați înălțimea și lățimea imaginii.

7. Redenumiți fișierele imagine, scriindu-le în transliterație.În numele fișierului, indicați în 1-2 cuvinte ceea ce este conținut în imagine.

8. Puteți adăuga suplimentar atributul LONGDESC la imagini. Mai multe detalii despre el: http://htmlbook.ru/html/img/longdesc.

9. În proprietățile fișierelor jpg imagini originale completati următoarele câmpuri:

— Titlu: se potrivește cu atributul alt al imaginii;

— Subiect: denumirea secției căreia îi aparține produsul;

— Evaluare: 5 stele;

— Cuvinte cheie: cuvinte cheie din pagina secțiunii căreia îi aparține produsul;

— Comentarii: descrierea produsului din câmpul „Despre produs” de pe pagina produsului;

— Dimensiuni: dimensiune maximă originală;

— Lățime: dimensiune maximă originală;

— Înălțime: dimensiunea originală maximă;

— Rezoluție orizontală: valoarea inițială maximă;

— Rezoluție verticală: valoarea inițială maximă;

— Adâncimea culorii: valoarea maximă originală;

— Proprietar: numele companiei;

— Computer: numele companiei.

Concluzie

După cum puteți vedea, există suficiente sfaturi și recomandări pentru optimizarea imaginilor din motoarele de căutare în sine pentru a avea o idee generală despre ceea ce trebuie făcut pentru ca site-ul să se poată clasa normal în căutarea de imagini. Multe dintre recomandări se suprapun, unele sunt unice. Pentru a implementa majoritatea recomandărilor, sunt suficiente acțiuni unice, datorită cărora se va obține un rezultat pozitiv stabil. Nu neglijați oportunitatea de a atrage un număr semnificativ de vizitatori la resursa dvs. Ar trebui să postați întotdeauna cât mai mult conținut grafic posibil, datorită căruia site-ul poate câștiga încrederea vizitatorilor obișnuiți și noi.