Las imagenes para la web

Les Imatges per a la web

Les imatges d’una web són molt importants a l’hora de aconseguir una aparença professional, atractiva i de qualitat. Són un factor determinant en la primera impressió que tindran les visites de la teva web.

Les imatges han de ser de qualitat, però s’ha de buscar l’equilibri qualiat-pes, ja que els kb que ocupen les imatges afecten directament a la velocitat de carrega de la web. Com més ocupin, més lenta anirà la web a obrir-se, i això pot marcar la diferència entre que les visites a la web es quedin o no arribin ni a entrar a mirar la primera pàgina.

Per un altre costat, Google també te molt en compte la velocitat de càrrega de les pàgines web al moment de posicionar-les en els primers llocs del cercador. Així que el tractament de les imatges també determina el SEO de la teva pàgina.

I per últim, i parlant de SEO, també has de pensar en les paraules importants del teu negoci quan posis nom a les imatges. Ja que també per aquest canal poden arribar visites a la teva web.

En aquest post t’explico com has de tractar les imatges de la teva web tenint en compte aquests factors: la qualitat, la velocitat de carrega i el SEO.

La qualitat de les imatges a utilitzar

Pots utilitzar fotografies pròpies o d’un banc d’imatges.

Imatges Pròpies

Encara que no utilitzis imatges pròpies en tota la teva web, es important utilitzar imatges pròpies quan parlis de tu, del teu equip i del teu producte.

Aquestes imatges han de ser de qualitat, estiguin o no fetes per un fotògraf professional, ja que expliquen al teu visitant qui ets i com ets, i, t’ajudaran a transmetre confiança i credibilitat.

No utilitzis mai fotografies d’un banc d’imatges per il·lustrar el teu “Sobre mi” o “Sobre nosaltres” si poses fotos del teu equip, han de ser del teu equip. Si poses fotos del teu local, han de ser del teu local.

Bancs d’Imatges

Si tens un blog, necessitaràs moltes imatges per il·lustrar-lo, i no sempre podran ser fetes exclusivament per a la teva web. En aquest cas, una bona solució és recorrer a fotografies de bancs d’imatges.

Quan utilitzis fotografies que no són teves has d’assegurar-te de les seves condicions d’ús. Això depèn del tipus de llicència Crative Commons que tinguin.

Els diferents tipus de llicències de CC – Creative Commons són:

CC0 – Imatges sense cap tipus de restricció. Pots: utilitzar-les per fins comercials, modificar-les.

CC BY – Pots utilitzar-les per ús comercial i modificar-les però has de mencionar i enllaçar a l’autor.

CC BY-SA – Com l’anterior, però si les vols redistribuir ho has de fer sota el mateix tipus de llicència CC.

CC BY-ND – S’ha de mencionar a l’autor, es poden utilitzar per ús comercial però no es poden modificar.

CC BY: NC – S’ha de mencionar l’autor i es poden modificar, però NO es pot fer ús comercial.

CC BY-NC-SA – Com l’anterior,  però si les vols redistribuir ho has de fer sota el mateix tipus de llicència CC.

CC BY-NC-ND – S’ha de mencionar a l’autor. No es pot fer ús comercial ni modificar.

A continuació et deixo els enllaços a bancs d’imatges on pots descarregar fotografies.

Bancs d’imatges Gratuïts

Bancs d’imatges de Pagament

Recorda sempre de llegir les condicions d’ús de les imatges i de la plataforma on les descarreguis abans d’utilitzar-les.

Optimització de les imatges

De cara a aconseguir una bona velocitat de carrega de la web, és molt important optimitzar el pes de les imatges, ja que les imatges amb un pes molt elevat alenteixen el temps d’obertura de la web.

Una web lenta es perjudicial per dos motius. Per un costat, els usuaris marxen abans d’entrar si una web tarda més de 3-4 segons en carregar-se. Per una altra banda, Google penalitza la velocitat de carrega lenta a l’hora de posicionar les webs en els resultats del cercador.

El pes d’una imatge depèn de la seva mida i de la seva resolució.

Has de saber que:

  • La resolució d’una pantalla d’ordinador es de 72 píxels per polsada. Quan fem una fotografia té una resolució de 300 píxels per polsada perquè està pensada per a imprimir-se i això repercuteix en el pes de la imatge. Per tant hauràs de reduir la resolució de totes les fotografies a 72 ppp abans de posar-les a la web per aconseguir un resultat òptim.

  • La mida d’una pantalla d’ordinador normal, té 1400 píxels d’amplada. Només has d’adaptar la mida de les teves imatges a aquesta amplada quan t’interessi que ocupin tota la pantalla, per exemple en la imatge de portada de la web. Però la resta d’imatges, normalment, seran més petites i hauràs d’adaptar la mida en cada cas, però una amplada de 800 píxels és una bona mida

  • Si la imatge es de 1400 píxels no hauria de pesar més de 100 KB. El pes de la resta d’imatges haurà de ser de 50-60 Kb.

Eines per optimització de les imatges

Photoshop – Amb Photoshop pots optimitzar la mida i la resolució de les imatges en el mateix moment.

Web Resizer – Eina online i gratuïta que et permet modificar la mida de les imatges.

TinyjpgEina online i gratuïta per comprimir les imatges.

El nom de la imatge i el SEO

El nom que es posi a la imatge també és important al moment de posicionar la web als cercadors.

Google indexa les imatges i a través d’elles també arriben visites a la web. Per això s’ha de pensar bé el nom que tingui l’arxiu i defugir de deixar el típic IMG_0680.jpg o Foto1.jpg, ja que aquests tipus de nom no diuen res del teu negoci.

Utilitza les Paraules Clau pel teu negoci al posar nom a les teves imatges.

També es important omplir tots els camps que defineixen la imatge al pujar-les a la web, ja que Google te en compte tota aquesta informació a l’hora de valorar la importància del lloc web.

Els camps a definir de cada imatge a WordPress són els següents:

Nom

Aquest és el nom de la imatge amb extensió nom-foto.jpg. A de ser un nom que defineixi la imatge i es interessant tenir en compte les paraules clau que interessen pel teu negoci. Hi ha visites que arribaran a la teva web des d’una fotografia.

Llegenda

Es el text que es mostrarà al peu de la foto a la teva web. En la llegenda pots fer una descripció una mica més detallada del nom de la imatge.

Text ALT o  Text Alternatiu

Aquest camp és el més important i essencial en bones pràctiques. Aquest text es el que els navegadors utilitzaran per llegir el que apareix en la imatge en els ordinadors configurats per a discapacitats visuals.

També es el text que apareixerà quan els navegadors tinguin desactivades les imatges al navegar.

Aquest text a de ser concís i descriptiu i tenir en compte la paraula clau que t’interessi.

Descripció

En la descripció tens la oportunitat d’aprofundir més en el contingut de la fotografia. Aquesta descripció no es veu a la teva web, però ajuda a Google a saber de què tracta la teva imatge. Utilitza també la paraula clau en aquesta descripció.

Guia breu d’optimització de les imatges per WordPress

Com a resum o conclusió d’aquest post, quan preparis les imatges per la teva web pensa en el següent:

  1. Utilitza imatges de qualitat i amb els permisos adients.
  2. La mida de les imatges: inferior a 1400 píxels per la principal i a 800 píxels en la resta.
  3. La resolució de les imatges: 72 píxels per polsada.
  4. Pes de les imatges: sempre inferior a 100 Kb, millor si pesen 60-50 Kb.
  5. Posa el nom de les imatges pensant en les paraules clau.
  6. Omple tots els camps de text al posar les imatges a WordPress.

Espero que t’hagi sigut útil i que tinguis en compte aquests consells quan preparis les imatges per la teva web.

I si necessites saber alguna cosa més, posa un comentari, o posat en contacte amb mi.

Imágen destacada de Adil Ansari on Unsplash

Share on facebook
Share on twitter
Share on google
Share on linkedin
Share on pinterest
Share on whatsapp

Rep les noves publicacions en el teu email!

Al introduir el teu email acceptes la política de privacidad

Otras entradas al blog

Marta

Marta

Ayudo a emprendedores y profesionales a crear su imagen en internet con el Diseño de su página WEB y a ampliar su visibilidad orientándoles en su Estrategia Digital. Especializada en WordPress.

Deixa un comentari