Tips para optimización de imágenes web

Hace 15 años, Jakob Nielsen terminaba de escribir su libro “Usabilidad: diseño de sitios Web”, una lectura obligatoria para comunicadores, diseñadores, ingenieros Web y demás profesionales (y no profesionales, como me pasaba) de la época que estaban interesados por la producción Web.

Uno de los términos que Nielsen expone en su obra hace referencia a los tiempos de respuesta, que corresponde al momento que transcurre entre la petición del usuario y la respuesta del servidor. En palabras sencillas: los segundos (o minutos) que espera el usuario al dar clic o presionar “Enter” y obtener la respuesta (contenido o acción) del servidor.

Este concepto también se presenta en libros sobre arquitectura de información, como es el caso del famoso libro del oso polar: “Arquitectura de la información para la World Wide Web” de Morville y Rosenfeld (1988).

Para Nielsen (y también para mi) el tiempo de respuesta es un criterio de calidad que está alineado con la satisfacción del usuario. Mientras más corto es valor de la medición, más positiva será la experiencia.

Hoy, 2015, infortunadamente, sigo encontrando sitios Web que desconocen el concepto. Los tiempos de respuestas (especialmente desde conexiones móviles) superan los 10 segundos, alterando dramáticamente la experiencia de navegación.

Por ello decidí retomar algunos contenidos y experiencias de e-Lexia.com y consolidar un documento electrónico que sirva de guía para los profesionales que están detrás de una estrategia digital. El libro (porque soy ambicioso) aún no está listo, pero espero terminarlo pronto.

Consejos para editar imágenes

En esta entrada quiero compartir algunas recomendaciones y consejos que he consolidado, producto de investigaciones rápidas, observaciones y comparaciones en sitios Web y descubrimiento y experiencia propia.

Los siguientes tips ofrecen ideas para producción en redes sociales y sitios Web. Voy a intentar ser explícito, indicando cuáles son exclusivos para redes, cuáles para sitios Web y cuáles aplican para ambos. Sin embargo, lo exhorto a profundizar sobre el tema, pues lo que voy a compartir no es una biblia sobre el tema, tanto solo corresponde a un resumen de lo que comenté anteriormente.

Comencemos:

Sobre las características técnicas

• Utilice el formato de imagen más óptimo para el tipo de recurso que desea compartir: las fotografías quedan bien en JPG, pues este formato soporta 16.7 millones de colores. Los GIF son ideales para gráficos con menos de 256 colores. Por su parte los PNG soportan diferentes profundidades de color y permiten transparencias… son como un punto intermedio entre el JPG y el GIF
• Utilice la optimización de imágenes correcta. Para JPG utilice una compresión de 80% (o equivalente, según el editor utilizado). Para GIF, la paleta de colores que conserve la legibilidad de la imagen, sin evitar la pérdida (por falta o superación) de colores. Para PNG, utilice la profundidad de colores requerida.
• Para imágenes en pantalla utilice una resolución de 72 puntos por pulgada. Imágenes para pantalla e impresión (como un boletín de prensa), 150 puntos por pulgadas. Imágenes para impresión (reel para prensa, p.e.), 300.
• En lo posible, utilice una configuración de exportación de entrelazado y progresivo (aplicable para ficheros PNG y JPG, respectivamente). Esta configuración permite entregar al usuario una respuesta más rápida en los tiempos de descarga (aplica para imágenes al sitio Web).
• Conserve las dimensiones (ancho y alto) de acuerdo al uso de la imagen. Para ello, lea el apartado de medidas de imagen para redes sociales.

Reducir el peso de una imagen

Uno de los criterios que tiene presente Google al valorar la calidad de una página web es su peso, es decir, la sumatoria del tamaño de todos los archivos que convergen en ella.

En este video, disponible en mi canal YouTube, explico cómo disminuir el tamaño de una imagen digital, utilizando el servicio TinyPNG.

En el canal YouTube «Escuela Digital» puedes encontrar más videos sobre el tema.

Sobre imágenes para un sitio web:

• El nombre del archivo es  coherente con el contenido de la imagen. Por ejemplo: si la fotografía representa la entrada a un edificio gubernamental, un buen nombre de archivo sería: entrada-gobernacion-sim-city.jpg.
• Como se presenta en la recomendación anterior, el nombre de la imagen utiliza diferentes palabras (las que sean necesarias para mejorar su valor semántico). Cada una de ellas se separan por guion medio.
• El nombre de archivo no contiene marcas de acentos ortográficos, la letra “ñ” ni cualquier carácter especial.

Sobre las imágenes para Facebook:

• Las dimensiones para la imagen de portada son: 851 x 315 pixeles. Tenga presente una composición horizontal, que brinde espacio para la imagen de perfil (ubicada en la esquina inferior izquierda).
• Para la imagen de portada se recomienda no utilizar texto que supere el 20% del área.
• La foto de perfil, aunque aparece de 160 x 160 pixeles, tiene una dimensión de 180 x 180 pixeles.
• Las imágenes que acompañan publicaciones compartidas (enlaces a un sitio web) miden 1200 x 627 pixeles (composición horizontal) o un tamaño proporcional, sin superar los 337 x 197 pixeles.
• Las imágenes para publicaciones regulares miden  1200 x 1200 pixeles o un tamaño proporcional, sin superar los 403 x 403 pixeles.
• En lo posible, los dos últimos tipos de imágenes mencionados no superan el 40% de texto. La información adicional se anexa en el mensaje de texto de la publicación.

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Sobre las imágenes para Twitter

• Según Twitter, la imagen de portada puede ser JPG, PNG o GIF (sin animación). La dimensión recomendada es 1500 x 500 pixeles (composición horizontal). Tenga presente la ubicación de la imagen de perfil (esquina inferior izquierda).
• La imagen de perfil mide 400 x 400 pixeles.
• La imagen de publicación con expansión mide entre 440 x 440 pixeles y 1024 x 1024 pixeles. La composición de la vista previa se define en los cuadrantes dos y tres, como se representa a continuación:

• La imagen de publicación sin expansión mide 1024 x 512 pixeles (composición horizontal). Este tipo de imagen tiene mayor impacto en Twitter.

Sobre las imágenes en Instagram

• La imagen de perfil tiene un tamaño mínimo de 161 x 161 pixeles.
• La imagen en la línea de tiempo tiene una dimensión mínima de 510 x 510 pixeles.

Sobre la línea editorial y generalidades

Estas recomendaciones las escribí para un evento que se realizó en la ciudad. La Jefatura de Prensa me pidió escribir (además de lo anterior) algunas recomendaciones de orden editorial que orientaran a los proveedores de contenidos visual. Recomiendo extrapolar estos contenidos a su realidad.

• La  línea gráfica entre la pieza gráfica (paleta de colores, uso de logotipos, familia tipográfica) y la imagen del evento guardan coherencia y cohesión.
• No se admiten faltan ortográficas, sintácticas y semánticas en ninguna pieza.
• La piezas que entreguen resultados de operación y gestión del evento son aprobadas por la Jefatura de Prensa o la Dirección del Eventos antes de su publicación.
• Salvo convenios comerciales e imágenes propias del ambiente y contexto de la imagen, no se aceptan logotipos o referencias a marcas diferentes al Evento.
• Cada pieza gráfica anexa la marca #Evento. Esta marca no supera el 30% del área y presenta amplio contraste.
• Se exige el uso de imágenes (fotografías, iconos y cualquier otra representación gráfica) propias o, en su defecto, con licencias de tipo copyleft.
• Se privilegia el uso de piezas gráficas que usen la fotografía como principal recurso comunicativo.
• Las fotografías tiene alto luminosidad y buen contraste y legibilidad.
• Las piezas gráficas tipo collage son claras y lo suficientemente legibles para pantallas de dispositivos móviles.
• Las imágenes para publicación en los diferentes medios de Evento son enviadas a la Jefatura de Prensa (o a quien ella defina) con tiempo suficiente (30 minutos) para su revisión, publicación y distribución.
• Las imágenes de promoción de eventos (conferencia, lanzamiento, conversatorio, talentódromo, entre otros) se entregan a la Jefatura de Prensa (o a quien ella defina) con mínimo 24 horas de anticipación.
• Toda imagen, independiente del medio que la distribuye, debe anexar una breve descripción que responda a:
• Nombres, apellidos y cargo de quienes aparecen en primer plano (si aplica);
• descripción del contexto;
• ubicación geográfica;
• fecha de la captura (día, mes, año);
• y demás datos relevantes que el profesional que captura la imagen considere pertinentes.

Para terminar:

Ten presente que la producción de recursos Web no es un tema corto ni sencillo. Es apasionante, eso sí. Hay que trabajar día y noche, estudiar, leer, ensayar, tomar nota y volver a empezar. Como mencioné, esta entrada no es la guía definitiva, es un punto de consulta e inicio.

Por último, te invito a leer mi libro “YouTube: Publicación de Contenidos, que realicé en co-autoría con la comunicadora audiovisual Yury Eliana Baena.

¿Tienes alguna otra recomendación? Déjala en los comentarios… siempre respondo.

Producción de contenidos web

Descarga este libro electrónico de acceso libre, donde se presentan recomendaciones de producción multimedia.
Obtener una copia

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Tips para optimización de imágenes web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .