0

Despre redimensionarea imaginilor în html

4 noiembrie 2009 | niciun comentariu

În HTML există o funcție care ne permite să modificăm dimensiunile imaginilor pe care le inserăm într-o pagină web prin simpla specificare a parametrilor HEIGHT și WIDTH în eticheta IMG SRC.

Dacă este recomandat să specifici dimensiunile reale ale imaginii cu ajutorul acestor parametri, nu e deloc indicat să-i folosești pentru a schimba dimensiunile în care este afișată imaginea, din două motive simple.

#1. Odată, pentru că îți forțezi vizitatorii sitului să descărce fișiere mai mari decât au nevoie. De cealaltă parte, imagini mai mici înseamnă fișiere mai mici și un timp de încărcare redus.
#2. Apoi, browserele nu fac întotdeauna o treabă bună cu redimensionarea imaginilor, mai ales în cazul imaginilor GIF. Chiar dacă Safari, de exemplu, se descurcă destul de bine, Firefox face varză o imagine micșorată prin codul html.

Iată un exemplu: imaginea din stânga a fost redimensionată în Photoshop, cea din dreapta cu ajutorul parametrilor html (în IE logoul nu e la fel de clar, în Firefox apare zbârcit).


Și totuși, cum ne redimensionăm atunci imaginile? Se zice că redimensionarea în Photoshop (și alte programe de editare foto) pierde din calitatea imaginii. Cât se poate de fals. În Photoshop de exemplu, se poate regla re-eșantionarea imaginii, așa încât să nu se piardă nimic din detaliu. Trebuie doar să alegi opțiunea “bicubică mai precisă (optimă pentru reducere)” din partea de jos a casetei de redimensionare a imaginii, atunci când schimbi lățimea și/sau înălțimea imaginii. Exact așa ca în ilustrația de mai jos.

Apoi poți adăuga simplu imaginea în sit și fii sigur că va arăta la fel de bine, indiferent de browser.

3966 vizualizări, 2 dintre care astăzi

Articole similare

Postare comentariu: