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 (per fotografies), PNG o GIF (per a logos o imatge gràfica). 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 Awesome 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. Es recomana tenir-lo publicat al compte institucional de la UPF, però també es pot publicar en un canal propi (preferiblement en un compte de correu de grup per no perdre l'accés si canvia la persona que gestiona el canal). 

Inclusió de vídeos en tipus de continguts específics

Els tipus de contingut Slider, Destacats i Notícies faciliten molt la inclusió de vídeos, ja que estan pensats per incloure aquesta funcionalitat.

Inclusió de vídeos en continguts HTML

Si has d'incloure un vídeo en un contingut web bàsic, o en un altre contingut en HTML, cal que segueixis aquest procediment:

  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. 

Exemple:

 

 

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.