Imatges i vídeos

Cal posar imatges?

L'entorn digital és multimèdia

  • L'entorn digital permet incorporar diversos formats a més del text que amplien les possibilitats comunicatives. Els elements gràfics (fotos, bàners, vídeos, etc.) sovint són molt efectius a l'hora de comunicar i són un bon complement a un text convencional.
  • A la pantalla no llegim de manera ordenada sinó que escanegem el contingut tot cercant una informació concreta o per fer-nos una idea general del més important. Les imatges ajuden a identificar continguts i a cridar l'atenció sobre el que volem destacar.
  • No sempre és necessari afegir imatges si no aporten res, ja que poden arribar a dificultar la comprensió del contingut.
  • No es pot substituir un text per una imatge (cartell, infografia) perquè el contingut no és accessible.

 

A la xarxa hi ha milers d'imatges que ens poden servir per il·lustrar pàgines web. Però no sempre les podem utilitzar lliurement, ja que poden tenir drets d'autor.

Si vols saber més sobre drets d'autor, consulta la guia Imatges a la web i drets d'autor.

Imatges genèriques

Et recomanem aquests llocs web per trobar imatges de tot tipus que pots utilitzar lliurement:

Imatges de la UPF

  • Al perfil de Flickr de la UPF trobaràs fotos dels edificis i dels principals esdeveniments de la UPF. Aquestes imatges són propietat de la UPF per tant les podeu utilitzar per a webs de serveis i productes de la Universitat.
  • Si vols utilitzar una imatge d'Instagram de la UPF, envia un missatge a [email protected] especificant la imatge que es vol utilitzar i esperar que ho validin.

  • També pots capturar un fotograma del canal Youtube de la UPF.

Abans de pujar una imatge per publicar-la a la web, convé adaptar-la a les mides més adequades a cada cas. Les imatges de grans dimensions alenteixen la càrrega de les pàgines i augmenten la despesa de dades quan s'obren des d'un dispositiu mòbil i, consegüentment, penalitzen el posicionament i la qualitat de la web.

Tipus i qualitat de les imatges

Com a norma general, podem pensar en aquestes propietats (les podem comprovar des de l'explorador de fitxers mirant les propietats):

  • Tipus d'arxiu: les imatges han d'estar en format JPG, PNG o GIF. També s'admeten imatges SVG (vectorials). 
  • Resolució: 72 píxels/polzada (una resolució superior no ens millorarà la qualitat de visualització a la web).
  • Qualitat: en el moment de guardar una imatge, la majoria de programes permeten indicar la qualitat que volem obtenir. Una qualitat del 100% generarà un arxiu molt gran! Podem reduir tranquil·lament la qualitat sense que la visualització es vegi afectada fins que l'arxiu tingui un pes acceptable.

Mida de les imatges

Segons el lloc on calgui publicar la imatge, les mides variaran. Alguns exemples per fer-se'n una idea:

  • Slider (mida màxima de qualsevol imatge de la web): 1300 x 450 píxels i un pes màxim entorn dels 200KB.
  • Fotografies per a fitxes de persona: 400 x 400 píxels.
  • Caràtula de notícies, destacats, graella d'icones, etc.: 450 x 300 píxels.
  • Les notícies poden tenir diferents imatges (caràtula i interior)  cadascuna de les imatges té uns requeriments especials. Consulteu l'apartat Notícies per saber-ne més.

  • Altres imatges: aconsellem fer servir una mida entre 1,5 i 2 vegades superior a la mida en què es mostren per tal que en fer zoom en dispositius tàctils no perdin resolució.

Com podem adaptar les imatges?

Si no tens coneixements d'edició d'imatges, o no disposes de programari adequat (Photoshop, Gimp), recomanem algunes eines per reduir i convertir les imatges abans de pujar-les a la web. 

  • Per reduir la mida de les imatges, retallar-les i fer petits canvis (colors, textures, efectes, etc.), podem utilitzar BeFunky. 
  • Si només volem retallar o canviar la mida, ReducirFotos és ideal. 
  • La capçalera de la web d'una figura de recerca (unitat, grup, centre) ha de tenir un logotip propi que incorpora la marca UPF, que cal demanar a Serveis Gràfics. 
  • La web dels projectes de recerca pot tenir també un logotip propi sense la marca UPF. 
  • Els avatars de xarxes socials s'han de demanar a Serveis Gràfics.

Es poden inserir icones dins del text per destacar o reforçar el missatge. Exemples:

  • Consulta la normativa
  • Ús recomanat
  • 93 542 20 00
  • Dijous 25 de març del 2021 a les 19 h

Com es fa servir?

  1. Tria la icona a Font Adenoma 6.2.0 (només podràs fer servir les gratuïtes, no han de ser Pro Icon) i copia'n el codi HTML, per exemple: <i class="fa-solid fa-phone"></i>
  2. Edita el contingut on vols afegir la icona i accedeix al codi font.
  3. Situa't allà on vols que aparegui i enganxa el codi HTML de la icona afegint l'atribut aria-hidden="true" per garantir-ne l'accessibilitat.

Per exemple per posar la icona del telèfon el codi és:<i class="fa-solid fa-phone" aria-hidden="true"></i>
Des de l'editor de text no veuràs aquestes icones, hauràs de publicar per veure-les.

També pots fer servir aquests codis:

Per inserir un vídeo a la web, cal que estigui publicat a YouTube.

  1. Localitza el vídeo que vols publicar
  2. Fes clic a Comparteix > Insereix i copia tot el codi que comença per <i frame ...> , per exemple:
    <iframe width="560" height="315"
    src="https://www.youtube.com/embed/tguftK_sWqs"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write;
    encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
  3. Edita el codi font del contingut on el vols inserir i enganxa'l.
  4. Canvia el contingut del camp title pel títol del vídeo per garantir una bona accessibilitat. 

 

Els components Slider i Notícies et faciliten molt la inclusió de vídeos.

Què he de fer per crear un vídeo?

La UPF ofereix un servei de retransmissions en directe que permet, a més, incrustar a qualsevol pàgina de la web el vídeo d'un dels espais dels diferents Campus habilitats per oferir aquest servei.