• imaginile

Optimizarea imaginilor pentru utilizare pe Internet este un proces delicat în echilibru constant între calitate și greutate. Vrem ca imaginea noastră să fie văzută corect la dimensiunea potrivită, dar dorim, de asemenea, să cântărească suficient și suficient pentru a optimiza timpii de încărcare a site-ului nostru, un detaliu foarte important pentru a optimiza site-ul nostru pentru SEO.

Exportați imagini pentru web

Deși gestionarea dimensiunii unei imagini este principalul factor în optimizarea greutății acesteia, există alte opțiuni relativ ușoare pentru ajustarea greutății unei imagini utilizând instrumentul Adobe Photoshop „Salvați pentru web”.

Mai întâi, deschidem fotografia la care suntem interesați să lucrăm și alegem Fișier> Salvare pentru web.

Detalii cheie pentru optimizarea imaginilor în Photoshop

Odată ce am dat „Export ➡️ Salvați pentru web”, va apărea o casetă de opțiuni ca cea pe care o vom afișa mai jos.

Poate fi foarte intimidant, deoarece prezintă o multitudine de opțiuni și file, dar pentru cazul care ne interesează, ne vom concentra exclusiv pe patru elemente:

1. Tip fișier. Această filă ne permite să alegem între JPEG, GIF (la 8 sau 24) și PNG. Pentru acest exemplu specific, vom trata exclusiv cazul JPEG, deoarece este cel mai comun, amintiți-vă pur și simplu că GIF-urile sunt utilizate mai presus de toate pentru a salva animații mici și că va trebui să folosim PNG dacă dorim ca imaginea să păstreze fundalul transparent care ne-am pregătit în Photoshop.

Două. Calitatea imaginii: Aceste două file fac parte din magia „Save for Web”. Ne permite să alegem între mai multe calități prestabilite în fila din stânga sau să alegem numeric în dreapta. Cu cât numărul este mai mare, cu atât este mai mare calitatea și imaginea este mai grea.

3. Marimea imaginii: în această casetă de opțiuni este locul în care vom putea genera un impact mai mare fără a pierde calitatea imaginii noastre. În mod normal, acest pas se face de obicei înainte de salvare, utilizând Image> size image, dar „Save for Web” ne permite a doua șansă de a regla dimensiunea imaginii noastre la dimensiunile de care avem nevoie. Trebuie să folosim întotdeauna imagini de dimensiunea potrivită pentru locul pe care dorim să îl ocupe, nu prea mari, deoarece vor cântări prea mult și vor face încărcarea site-ului nostru prea lentă, nu prea mică, deoarece vom pierde calitatea.

4. Informații despre fișiere: aici ne permite să apreciem schimbarea în greutate și dimensiune a imaginii noastre originale (în caseta superioară, marcată ca „originală”). Cele patru file aflate chiar deasupra imaginilor ne permit să schimbăm tipul de vizualizare, în cazul acestui exemplu suntem în „2 exemplare”, ceea ce ne permite să comparăm imaginea originală cu copia sa „salvată pentru web”.

Odată ce suntem mulțumiți de rezultatul ajustării calității și am confirmat că dimensiunea imaginii este corectă, rămâne doar să salvăm noua noastră imagine optimizată și să o încărcăm pe web.

După cum am comentat deja în mai multe rânduri, încărcarea imaginilor pe site-ul nostru web la dimensiunea adecvată pentru spațiul pe care îl vor ocupa este cel mai bun mod de a optimiza resursele site-ului nostru web.

Poate că cititorii noștri cei mai înțelepți au realizat că în niciun moment nu am numit un alt factor important în lumea fotografiei, rezoluția imaginii.

Mitul rezoluției imaginii pe internet

Cu excepția celor mai anacronici fotografi și caricaturiști, marea majoritate a imaginilor produse astăzi sunt digitale. Aceasta înseamnă că sunt construite din pătrate mici colorate numite pixeli. Și pixelii au o calitate nedumeritoare: nu au o dimensiune fixă.

După cum putem vedea în această imagine, toate pătratele au aceleași dimensiuni de înălțime și lățime, dar dimensiunile pixelilor care le compun sunt foarte diferite. Doar un pixel se potrivește în primul pătrat, în timp ce o sută se poate potrivi pe fiecare parte în ultima. Aceasta este ceea ce numim rezoluția pixelilor.

În mod tradițional, imaginile utilizate pentru imprimarea de înaltă calitate utilizează de obicei o rezoluție de 300 dpi sau „pixeli pe inch”, în timp ce imaginile pentru web utilizează în mod tradițional o rezoluție de 72 dpi, de aproape patru ori mai mică densitate de pixeli.

De ce?

Motivul este la fel de curios pe atât de banal: în 1980, Apple a pus la vânzare primul său computer Macintosh cu un ecran de 9 inci și o rezoluție de 72 dpi, care atunci când lucrează cu imprimantele sale ImageWriter de 144 dpi, cu doar de două ori rezoluție, a fost foarte ușor să scalați imaginile afișate pe monitor, astfel încât utilizatorii să poată vedea exact cum ar arăta ceea ce au trimis la imprimantă.

Deși a fost o rezoluție standard exclusivă pentru Apple și a căzut în desuetudine de-a lungul anilor, mulți oameni cred în continuare că imaginile la 72 dpi vor arăta „mai corect” în mediile web și că vor fi mai bine optimizate cântărind mai puțin.

Dar asta nu este adevărat.

Adevărul este că rezoluția pixelilor pe inch afectează doar dimensiunile Imprimare a unei imagini, nu la reprezentarea sa într-un mediu digital. Să vedem câteva exemple.

Mai sus putem vedea informațiile tehnice ale aceleiași imagini în Adobe Photoshop, la care am modificat rezoluția, menținând în același timp dimensiunile. După cum putem vedea, dimensiunea în megaocteți nu variază, imaginea cântărește exact la fel.

Acum, să vedem o comparație a aceleiași imagini, dar resamplată. Aceasta permite computerului să modifice dimensiunile imaginii pentru a menține raportul dintre rezoluție și imaginea originală. Adică, setați-l la 300 dpi și pixelii au aceleași proporții. După cum putem vedea, aici schimbarea dimensiunii este evidentă: de la 17,6 MB, sau 18,022,4 KB la doar 256,7 KB, de aproape șaptezeci de ori mai puțin.

Dar ce zici de calitatea imaginilor? Să vedem cu un alt exemplu: