HTML & CSS pentru începători (Partea 09): Imagini pentru web (01)

Când salvați imagini într-un program grafic, sunt oferite diferite formate grafice. Dar care ar trebui să fie ales atunci când vine vorba să încărcați imaginea pe un site web?



Când doriți să prezentați o imagine pe site-ul dumneavoastră, aveți de ales între trei formate.

• GIF

• JPEG

• PNG

Dar care format să alegeți pentru ce scop? Preferați GIF sau PNG pentru fotografii? Mai întâi, o scurtă prezentare a capacităților fiecărui format.

Această scurtă prezentare arată deja diferențele dintre formate. De aceea nu este de mirare că anumite formate sunt mai potrivite pentru anumite scopuri decât altele. Exact în acest moment, următoarea secțiune își propune să arate când este cel mai bine să utilizați fiecare format.

Fotografii

Fără îndoială, pentru fotografii se folosește JPEG. Deoarece aici imaginile pot fi comprimate foarte bine, permițând o variație a calității aleasă. Aici se găsește un echilibru corect între calitate și rată de comprimare.

Capturi de ecran/Diagrame

Pentru acestea, formatul PNG este cel mai potrivit. PNG este interesant și pentru desene tehnice, planuri, etc. PNG poate fi, de asemenea, utilizat și pentru imagini în care se lucrează cu zone transparente.

Fonturi/Logouri

Dacă aveți text în logo-ul dumneavoastră sau doriți să ilustrați text, ar trebui să folosiți GIF sau PNG. Datorită performanțelor mai bune, de obicei se recurge la PNG. JPEG este complet inadecvat pentru afișarea textelor, deoarece marginile sunt afișate în mod necurat.

Transparență

Când vine vorba despre afișarea zonelor transparente, JPEG este exclus din start. Rămân doar GIF și PNG. Dar care dintre aceste două formate se folosește atunci când este importantă transparența? În principiu, GIF poate să gestioneze transparența, dar rezultatele sunt adesea nesatisfăcătoare. Un pixel în formatul GIF poate fi fie complet vizibil, fie complet transparent. În PNG, acest fenomen nu are loc. Acest format deține un canal alfa suplimentar, datorită căruia se obțin rezultate de transparență mai fine.

Încorporarea imaginilor

<img src="logo.png" alt="PSD-Tutorials.de" />

În cadrul elementului img se află un element standalone. Prin intermediul atributelor corespunzătoare, imaginea poate fi descriși detaliat. Cel mai important atribut este fără îndoială src. Acesta indică imaginea care trebuie încorporată. În exemplul prezentat, se presupune că grafica logo.png se află în același director ca fișierul HTML în care a fost definit elementul img.

Pentru ca imaginile să fie afișate corect, trebuie să specificați corect calea către acestea. HTML oferă diferite opțiuni de referință.

• Căi absolute

• Specificări ale căii absolute relativ la adresa de bază

• Specificări ale căii relative relativ la adresa de bază

Mai întâi despre căile absolute. Această variantă este utilizată de obicei atunci când imaginea nu se află pe propriul server. De exemplu, dacă doriți să încorporați fluturele cunoscut de la PSD-Tutorials.de în site-ul dumneavoastră. În acest caz, teoretic, puteți să-l încărcați direct de pe serverul pe care se află. În primul rând, identificați calea imaginii. Cea mai simplă modalitate este să faceți clic dreapta pe imagine în browser și să selectați „Copiere URL imagine”.

Ceea ce a fost încărcat în clipboard ar trebui să arate în final așa:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Aceasta este adresa completă a imaginii. Această informație este suficientă pentru a încorpora imaginea.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Se specifică atributului src calea completă către imagine.

Problema cu aceste căi absolute este că nu se are un control real asupra conținutului încorporat. Dacă imaginea referită de dvs. este ștearsă de pe server sau mutată într-un alt director, va apărea o eroare de afișare.





Prin urmare, această referire absolută ar trebui să fie cu adevărat o excepție.

Specificarea căilor absolute în raport cu adresa de bază

Această variantă este întotdeauna utilă atunci când imaginea se află pe aceeași mașină/server ca și fișierul HTML și este accesibilă prin protocolul actual. Sună complicat, dar nu este așa.

Un exemplu:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Astfel obțineți adresa completă. Partea următoare este specificarea căii absolute.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Această cale absolută se referă relativ la adresa de bază http://4eck-media.de.

Specificarea căilor relative în raport cu adresa de bază

Varianta prezentată acum este cu siguranță cea mai frecvent utilizată. În acest caz, întotdeauna se ia în considerare calea actuală ca punct de referință, din care se face în cele din urmă adresa. Iată câteva exemple. Să presupunem că există fișierul index.htm, în care doriți să încorporați o imagine. De asemenea, există la același nivel directorul images, în care se află respectiva imagine.

index.htm
images
--logo.png

Cererea în atributul src ar arăta în acest caz așa:

src="images/logo.png"

Cum ar arăta totul însă, dacă imaginea ar fi într-un director situat deasupra fișierului HTML?

proiect
--images
-----logo.png
--arhivă
-----index.htm

În acest caz, fișierul index.htm se află cu un director sub imaginea de încorporat logo.png.

src="../images/logo.png"

Sintaxa înseamnă aici: Să urcați cu un nivel, să vă deplasați la directorul images și să afișați logo.png.

proiect
--images
----logo.png
----2013
------ianuarie
--------index.htm

Aici aspectul sintaxei este:

src="../../images/logo.png"

În acest caz, imaginea logo.png se află la două niveluri deasupra fișierului index.htm în directorul images.

Avantajul căilor relative este flexibilitatea lor. Puteți, de exemplu, dezvolta proiectul la nivel local și apoi să-l copiați pe un server "real". Cărțile rămân neschimbate după aceea.