Cómo trabajar imágenes para los sitios de la UDD

Las imágenes que se suben a WordPress, ya sea para bloques, destacados o cabeceras, tienen que cumplir con dos criterios básicos:

  1. Responsividad: Funcionar en cualquier resolución de pantalla
  2. Performance: Perjudicar lo menos posible el tiempo de carga del sitio

A partir de lo anterior, las reglas básicas a considerar son:

No existe un tamaño específico para las imágenes

Dado el criterio 1 de responsividad, no se puede asegurar que un tamaño específico se comporte comporte bien en todos los dispositivos. Sobre todo si consideramos que muchas de las imágenes van diagramadas en bloques con contenido, por lo que el recorte depende tanto del dispositivo, como de la extensión del texto que acompañe la imagen.

Si estás leyendo esta página en tu teléfono probablemente no veas diferencias entre el recorte de imagen de los bloques de más abajo, sin embargo en resoluciones de pantallas más anchas se ven diferencias, en el bloque #01 la imagen va cortando las cabezas de las personas a medida que la pantalla crece en ancho (puedes probar moviendo el tamaño de tu navegador y ver cómo se adaptan las fotos).

El bloque #02 tiene más extensión de texto por lo que el recorte no alcanza a quitar elementos críticos de la composición de la foto.

#01

El Abecedario” se denominó el recordado documental sobre Gilles Deleuze (1925-1995) realizado por Pierre-André Boutang. Fue difundido póstumamente, a petición del mismo pensador, y está constituido por largas entrevistas con Claire Parnet que datan de los años 1988 y 1989.

#02

El Abecedario” se denominó el recordado documental sobre Gilles Deleuze (1925-1995) realizado por Pierre-André Boutang. Fue difundido póstumamente, a petición del mismo pensador, y está constituido por largas entrevistas con Claire Parnet que datan de los años 1988 y 1989.

El autor de «Derrames. Entre el capitalismo y la esquizofrenia», que fuera considerado uno de los intelectuales más influyentes del siglo XX, decía –apoyándose en estudios foucaultianos- que las sociedades discipinarias se caracterizaban por la construcción y utilización de lugares de reclusión totales: cárceles, hospicios, escuelas, talleres, hospitales.

Entonces, ¿qué considerar para subir imágenes?

01 Recorte con proporción 16:9 y foco en el centro

Dado que no existe un tamaño específico para recomendar, lo que sí se tiene que tener en cuenta es que la imagen tenga una ratio de aspecto de 16:9, a excepción de las fotografías de personas que debieran tener una proporción de 1:1.

El recorte de la imagen debe mantenerse siempre al centro, de manera que siempre el mensaje quede con el foco visible, independiente de la resolución de la pantalla o del texto que la acompañe.

Simulación de recorte con proporción 16:9 y foco al centro
Recorte 16:9 foco en el centro

#03 bloque con imagen foco al centro

En las sociedades del tercer milenio los sujetos son controlados por los dispositivos electrónicos, internet, los medios de comunicación de masas, la propia colonización de sus subjetividades, los servicios de inteligencia (públicos y privados), los satélites, los sistemas de alarma, la emergencia decisiva de la postverdad, las entidades financieras, el endeudamiento permanente, el consumo, las instituciones y organizaciones públicas y privadas poseedoras de datos sensibles de la privacidad de cada ciudadano, la inteligencia artificial, etcétera.

02 Bloques que funcionan mejor para fotos sin foco al centro

Puedes considerar los bloques que tienen la opción de estilo «vista clara» para mostrar las imágenes sin texto encima, como por ejemplo en accesos con imagen, entradas o eventos.

Los bloques de acceso destacado con imagen e imagen también mantienen la proporción de aspecto fija independiente del tamaño del navegador.

03 Formato PNG o JPG

El formato de imagen recomendado para fotografías o imágenes con muchos colores es .jpg ya que soporta mayor complejidad gráfica con bajo peso del archivo. Se sugiere usar .png para el caso de gráficas, logos, texto o imágenes con baja variedad de colores.

04 Performance y compresión

Las imágenes muy pesadas hacen que el sitio se descargue más lento, lo que dificulta a usuarios con conexiones inestables de internet (por ejemplo en móviles) y perjudica la indexación en motores de búsqueda.

Te recomendamos que uses software para comprimir imágenes, de manera que los sitios permanezcan se muestren lo más rápido posible. Puedes usar este programa de mac o esta app online.

05 Edición, nombres y atributos

Cada imagen que se suba debe ser trabajada previamente para cumplir con un recorte adecuado, bajo peso y comunicación efectiva.

La imagen debe tener al menos:

  1. Nombre: que la identifique, la haga buscable por otros usuarios bajo términos identificables y se pueda usar sin tener que subir la imagen nuevamente
  2. Texto alternativo: que permita a personas en alguna situación de discapacidad orientarse mejor en el contenido. Además permite indexar las imágenes en buscadores bajo términos que ayuden al posicionamiento general del contenido. Más información sobre accseibilidad en sitios web (en inglés).

06 Derechos de autor

Las imágenes que se suban a los sitios de la UDD deben ser de propiedad de la Universidad o venir desde fuentes que permitan el uso libre de las fotos (para fines comerciales). En especial para fotografías que incluyen menores de edad, se requiere permiso explícito de los tutores. Para imágenes de uso libre recomendamos:

  • Unsplash: se pueden encontrar imágenes de buena calidad y de uso libre, pero es probable toparse con las mismas fotos en varios sitios web similares.
  • Openverse: es el buscador que creó Creative Commons y luego compró WordPress para disponer de imágenes de uso libre. Se puede filtrar por imágenes que permiten uso comercial.