Imatges, documents 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.

Evita les imatges amb text (cartells, infografies, esquemes) perquè no es veuen bé amb dispositius mòbils i el text no és accessible per a persones que fan servir lectors de pantalla.

Tipus i qualitat de les imatges

Com a norma general, ens haurem de fixar en aquests atributs que podem comprovar mirant les propietats des de l'explorador de fitxers:

  • 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) i WebP.
  • 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 la qualitat fins al 60-70% sense que la visualització es vegi afectada i el pes de l'arxiu es reduirà dràsticament.

Mida i pes 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 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 requisits 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 quedin rebentades.

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. Si es tracta de fotografies aconseguiràs una reducció considerable de la mida dels arxius si, a més de les mides, modifiques la qualitat, habitualment amb el 70-80% és més que suficient per a pantalles.

  • Si tens Windows 11, l'opció més fàcil és utilitzar el programa Fotos que s'obre per defecte en obrir una imatge. Pots fer una edició bàsica (retallar, canviar colors, eliminar el fons, etc.) des del botó Edita o canviar les mides i ajustar la qualitat des del menú de tres punts, opció Redimensiona la imatge.


     
  • Per reduir la mida de les imatges, retallar-les i fer petits canvis (colors, textures, efectes, etc.), pots utilitzar BeFunky.
  • Si només vols retallar o canviar la mida, ReducirFotos és ideal.

Abans de pujar un PDF procura optimitzar-lo al màxim. Pots pujar un PDF de fins a 20MB, que és la suficient per la majoria de PDF de la web.

  • Per optimitzar PDF pots utilitzar eines com I love PDF.
  • 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
  4. Per garantir l'accessibilitat has d'afegir un atribut:
    • aria-hidden="true", si és una icona purament decorativa (opció més habitual). Els lectors de pantalla ignoren la icona.
    • aria-label="descripció", si la icona és necessària per entendre la informació. Els lectors de pantalla llegiran la descripció de la icona.

Per exemple:

  • Icona decorativa:
    Telèfon: 93 542 20 00
    Codi HTML de la icona: <i class="fa-solid fa-phone" aria-hidden="true"></i>
  • Icona necessària:
    93 542 20 00
    Codi HTML de la icona: <i class="fa-solid fa-phone" aria-label="telèfon"></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.