Vés al contingut (premeu Retorn)

Imatge

El contingut imatge ens permet crear imatges que podrem visualitzar com a contingut aïllat, o bé més habitualment dintre d'un altre contingut, com ara una pàgina, notícia, esdeveniment...

Com afegir una imatge al nostre genweb?

Ho podem fer de tres maneres:

  • Des de la pestanya "Afegeix" podem afegir una imatge:

imatge afegeix contingut

  • Si volem pujar moltes imatges tenim l'opció de pujar vàries de cop, des de la pestanya "continguts", l'opció "pujada de fitxers".


imatge pujada masiva

  • Per últim podrem afegir la imatge mentre estem editant una pàgina, sense necessitat d'haver-la pujat prèviament, des de la finestra d'edició, cliquant a la icona d'imatge

imatge tiny upload

Com afegir imatges a dins d'una pàgina?

Editem la pàgina i  cliquem a la icona d'imatges.

 

Llavors tenim tres opcions per afegir una imatge a la nostra pàgina: 

 

  • Podrem escollir una de les imatges que hem pujat prèviament, disposem d'un cercador per anar a la carpeta que conté la imatge.

imatge internal

  • O bé pujar ara la imatge


imatge tiny upload

  • O bé enllaçar a una imatge que està a una pàgina web externa, indicant la seva url.


imatge external

 

Optimització d'imatges

 

El pes de les imatges que posem al nostre web repercuteix en la velocitat amb què es carregaran les pàgines. La lentitud d'un web, a banda de provocar una experiència d'usuari molt negativa, ens fa perdre posicionament als motors de cerca, com ara Google.

Serem molt curosos, sobretot, amb les imatges de les nostres pàgines principals, que són les que es carreguen més sovint.

 

Per optimitzar les imatges seguirem dues passes:

1 - Retalleu la imatge a la mida i resolució necessàries

Amb programes com photoshop o gimp, o amb eines web com pixlr.com, que no requereix instal·lació prèvia, ajustarem la mida a la qual necessitem la imatge i amb una resolució de 72 px màxim.

Per exemple, si volem visualitzar una imatge a un requadre de 350 x 230 px, i la imatge original té una dimensió de 6000 x 4000 px, val la pena retallar-la prèviament a la mida que realment necessitem,i a 72 px de resolució, i pujar-la al web amb un pes reduït. 

2 - Comprimiu la imatge

A més de retallar-la ajustant la mida, encara podem baixar més el pes amb eines que apliquem algorismes de compressió, sense pèrdua de qualitat, com ara:

compressor.io

optimizilla.com

pixlr.com

 

Amb aquestes dues passes hem d'aconseguir imatges amb un pes inferior a 100Kb. 

Podeu trobar més àmplia documentació de com optimitzar imatges als cercadors i a la xarxa. Aquí teniu dos recursos:

 

Redimensionar imatges


De vegades, encara que haguem retallat la imatge tal com s'explica a l'apartat anterior, potser necessitem visualitzar-la a una mida diferent. Des de l'editor, anant a la icona d'imatge de la barra d'eines, o bé fent botó dret a sobre de la imatge i seleccionant Insereix/edita imatge podrem fer-ho:

 

Anirem a una pantalla com la següent on podem seleccionar en el desplegable de la dreta el tipus de mida desitjat: 




O si cap d'aquestes mides ens va bé, podem emplenar el camp CSS Style per afegir propietats CSS relatives a la mida.
Els atributs CSS més comuns relatius a la mida d'una imatge són width (amplada) i height(alçada) i la sintaxi és la següent:

height:150px; width;150px; (atribut: valor;) 

O també podeu editar en HTML i afegir al tag d'imatge els paràmetres de width i height.

<img src="ruta" alt="" width="150" height="100">
 

Estils per a les imatges 

Consulteu a la pàgina d'estils del genweb els diferents marcs disponibles per les vostres imatges i les diferents alineacions a la pàgina, dreta o esquerra.

 

Com trobar imatges de recurs?

Podeu cercar imatges a Google "Imatges" i a "Eines" selecciona "Drets d'ús" "Etiquetades per a utilització amb modificació".

Després a la web subministradora assegureu-vos que no cal atribució.

Exemple:

https://www.google.es/search?hl=ca&site=imghp&tbm=isch&source=hp&biw=1276&bih=724&q=education&oq=education&gs_l=img.3..0l5j0i30k1l5.6989.9138.0.9421.10.8.0.2.2.0.124.685.5j2.7.0....0...1ac.1.64.img..1.9.686.0..35i39k1.oTVZlbak4mE#q=education&hl=ca&tbs=sur:fmc&tbm=isch&*

 

També podeu utilitzar altres fonts d'imatges com aquesta comprovant que digui "No attribution required":
https://pixabay.com/en/labrador-nature-obedience-2121764/