Cum adaugi imagini într-o pagină web (Curs HTML începători, partea 3): Mură-n Gură

Cum adaugi imagini într-o pagină web (Curs HTML începători, partea 3)

Cum adaugi imagini într-o pagină web (Curs HTML începători, partea 3)

Toate paginile HTML par mai interesante dacă au câteva imagini, în special când este vorba de articole mai lungi unde cititul poate deveni monoton. O practică des întâlnită este aceea de a presăra imagini care ilustrează ideile, între paragrafele din pagina web.

În HTML, tagul principal pentru a adăuga imagini este tagul IMG.

Iată un exemplu de tag IMG pentru imagini

    
    <img src="/imagini/imaginea-mea.jpg" alt="O imagine cu o pisica" width="50" height="60" />
    
  • Atributul SRC al tagului ne spune ce imagine să se afișeze, iar atributul ALT, deși este opțional, conține o scurtă descriere a conținutului imaginii.
  • Atributul SRC poate fi un URL absolut (conține domeniul web și protocolul), sau relativ (fie relativ la rădăcină, fie relativ la calea curentă).
  • WIDTH specifică lățimea imaginii, în pixeli
  • HEIGHT specifică înălțimea imaginii, în pixeli
  • Doar atributele SRC și ALT sunt obligatorii.

Observăm că tagul IMG nu are tag de închidere, ci se auto-închide cu />.

Atributul ALT este important din două motive:

  1. Servește persoanelor cu dificultăți de vedere, care folosesc screen-reader (sau dispozitiv ce lecturează paginile și informația de pe ecran). Dacă imaginea nu conține tagul ALT, cititorul nu va ști ce să pronunțe, și astfel vizitatorul nu știe ce imagine este.
  2. Servește motoarelor de căutare, pentru a indexa și cataloga corect imaginile de pe pagina web. Atributul ALT este important pentru optimizarea în motoarele de căutare, se pot introduce în el cuvintele cheie ce descriu imaginea și astfel, pot ajuta motoarele să judece mai corect relevanța paginii web.

Formatele imaginilor suportate pe web

Orice imagine ce poate fi deschisă de browser, poate fi adăugată pe un site web, dar cele mai întâlnite formate sunt: jpg, png, gif, svg.

Formatul JPG poate fi comprimat și astfel mărimea fișierului va fi mai mică, deci se va încărca mai rapid pentru vizitatori. Comprimarea presupune o anumită pierdere de calitate a imaginii (lossy, în limba engleză), de aceea e important să optimizezi imaginea înainte de a o încărca pe site, și de a găsi un echilibru optim între dimensiunea pozei în pixeli și nivelul de compresie care controlează calitatea imaginii.

Formatul PNG nu presupune pierdere de calitate, dar poate crea fișiere de dimensiuni mai mari. De asemenea, formatul PNG suportă un strat de transparență (alpha) și poate fi utilizat pentru a introduce pe pagina web imagini cu fundal transparent.

Formatul GIF (Graphics Interchange Format) este mai vechi, și era folosit în trecut pentru a introduce mici animații și iconițe, datorită faptului că fișierele GIF erau foarte mici (paleta formatului GIF standard are maxim 256 de culori). Compresia utilizată în GIF este fără pierderi și deci fișierele GIF nu suferă de diminuare a calității. GIF suportă mai multe cadre, deci a fost folosit mult la mici animații, și chiar transparență (în formatul GIF 89a).

Formatul SVG este un standard de imagine vectorial, bazat pe limbajul XML. Suportă animație și interactivitate și o mărime foarte redusă a fișierelor, acestea fiind formate doar din instrucțiuni. Formatul vectorial presupune că imaginile nu sunt definite din pixeli, ci din linii și curbe, ceea ce le face ușor de redimensionat la orice mărime, fără pierdere în calitate și fără creșterea mărimii fișierului. Imaginile în format SVG sunt foarte potrivite pentru a introduce pe website sigle, iconițe, texte și alte elemente care trebuie să-și păstreze claritatea la orice dimensiune, fără creșterea în mărime a fișierelor. În web designul responsive, fișierele SVG pot face imaginile să arate foarte clar, chiar și pe ecranele de rezoluție mare ale dispozitivelor moderne (telefoane, computere cu ecrane cu rezoluție 4K, Retina și altele). Formatul SVG nu se pretează la reprezentarea fotografiilor, ci cum am zis, a siglelor, ilustrațiilor bidimensionale, iconițelor simple, cât și a diagramelor, schemelor, hărților, etc.)

Cristi Coțovan

Cristi lucrează de peste 15 ani în domeniul web design, dezvoltare, e-commerce și marketing. A construit două platforme CMS de la zero și este pasionat de comerț electronic, automatizări și muzică și artă și altele. Are 15 idei pe secundă și parcă le-ar începe pe toate până la sfârșitul zilei. Uneori vorbește despre el însuși la persoana a treia.

Categories