Afegir imatges en HTML: fonts, text alternatiu i atributs title
Les imatges fan que les pàgines web siguin més dinàmiques, atractives i visuals. Serveixen per il·lustrar idees, dividir blocs de text i millorar la comprensió de l'usuari. Tanmateix, afegir una imatge en HTML implica més que mostrar un fitxer: l'ús correcte de la font src, el text alternatiu alt i l'atribut title garanteix accessibilitat, un millor SEO i una experiència d'usuari superior.
Etiqueta img i conceptes bàsics
L'etiqueta per a imatges en HTML és img. És una etiqueta autocontinguda i com a mínim necessita els atributs src per a la ruta del fitxer i alt per descriure la imatge. Exemples d'ús com a text: <img src=images/logo.png alt=Logo_del_lloc> i <img src=https://example.com/banner.jpg alt=Banner_promocional>. Si la ruta és incorrecta o la imatge no carrega, el navegador mostrarà el text alternatiu.
Com establir la font amb src
Es poden utilitzar diferents tipus de rutes segons on sigui la imatge: rutes relatives per a recursos del projecte, per exemple <img src=images/logo.png alt=Logo_del_lloc>, o rutes absolutes per a imatges externes, per exemple <img src=https://example.com/imatge.jpg alt=Imatge_externa>. Mantenir rutes clares i noms de fitxer descriptius ajuda al manteniment i al SEO.
Importància de l'atribut alt
El text alternatiu alt és clau per diverses raons: accessibilitat, ja que els lectors de pantalla l'utilitzen per descriure la imatge a usuaris amb discapacitat visual; SEO, perquè els motors de cerca utilitzen aquest text per entendre el contingut visual; i com a fallback quan la imatge no es carrega. Per escriure un bon alt cal ser específic i concís, descrivint el que mostra la imatge. Si la imatge és purament decorativa, s'ha de deixar alt buit, és a dir, no proporcionar text alternatiu, perquè els lectors de pantalla l'ometin. Exemples: <img src=team-photo.jpg alt=El_nostre_equip_de_vendes_al_retir_2025> i per a una imatge decorativa utilitzar alt buit a l'HTML o indicar al codi que no porta text alternatiu.
Atribut title per a informació addicional
L'atribut title ofereix informació complementària que normalment es mostra com a tooltip en passar el cursor a l'escriptori. No substitueixis alt per title; el title és opcional i no sempre accessible des de lectors de pantalla o dispositius mòbils. Exemple textual: <img src=award.png alt=Trofeu_primer_lloc title=Guanyador_Premi_Disseny_Web_2025>. Utilitza title només per a dades breus i complementàries.
Exemple complet
Un exemple que combina src, alt i title podria representar-se així en text: <img src=artwork.jpg alt=Pintura_abstracta_colorida_per_Jane_Doe title=Primavera_Harmonia_2025_Jane_Doe>. Amb això els lectors de pantalla llegiran la descripció, els motors de cerca rebran context per indexar la imatge i els usuaris d'escriptori veuran un tooltip addicional en passar el ratolí.
Bones pràctiques
Sempre incloure alt tret que la imatge sigui decorativa. Utilitzar noms de fitxer descriptius com paris-eiffel-tower.jpg en lloc de IMG1234.jpg. Comprimir imatges per reduir el temps de càrrega. Evitar utilitzar imatges per a contingut textual, excepte logotips; si és imprescindible, incloure el text a alt. Provar l'experiència amb lectors de pantalla per assegurar l'accessibilitat.
Rellevància per a empreses i serveis tecnològics
A Q2BSTUDIO som una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions modernes que inclouen intel·ligència artificial, ciberseguretat i serveis cloud aws i azure. Entenem que una correcta implementació d'imatges i continguts accessibles forma part d'una experiència digital professional i escalable. Les nostres solucions de programari a mida i aplicacions a mida integren bones pràctiques d'accessibilitat i rendiment per millorar el posicionament web i l'experiència de l'usuari.
Serveis destacats de Q2BSTUDIO
Oferim serveis d'intel·ligència artificial i ia per a empreses, creació d'agents IA i solucions d'intel·ligència de negoci amb power bi i serveis intel·ligència de negoci. També despleguem infraestructures segures en serveis cloud aws i azure i proporcionem capes robustes de ciberseguretat. Si necessites programari a mida, aplicacions a mida o consultoria en intel·ligència artificial per millorar processos, Q2BSTUDIO pot ajudar a dissenyar i implementar solucions eficients i segures.
Com les imatges i les pràctiques de SEO ajuden al teu negoci
Una estratègia d'imatges ben executada potencia el SEO i l'accessibilitat, cosa que atrau més trànsit qualificat. Incloure alt descriptiu i noms de fitxer optimitzats ajuda a posicionar continguts relacionats amb aplicacions a mida, programari a mida, intel·ligència artificial, ia per a empreses, agents IA, ciberseguretat, serveis cloud aws i azure, serveis intel·ligència de negoci i power bi. Això incrementa la visibilitat de serveis crítics per a empreses tecnològiques i clients que busquen solucions avançades.
Conclusió i crida a l'acció
Afegir imatges en HTML és més que estètica: és una pràctica que millora usabilitat, accessibilitat i SEO. Utilitza src per apuntar al fitxer, alt per descriure la imatge i title de manera opcional per a informació addicional. Si la teva empresa necessita solucions integrals que combinin programari a mida, aplicacions a mida, intel·ligència artificial, agents IA, ciberseguretat i desplegament en serveis cloud aws i azure, contacta amb Q2BSTUDIO per dissenyar una estratègia digital segura i optimitzada per a motors de cerca i usuaris.
