PEC1 – IMAGEN FIJA

Diseño visual del blog

A la hora de subir y utilizar imágenes en un sitio web, o blog online, se deben tener en cuenta una serie de factores que permiten optimizar su correcta visualización, así como, facilitar su descarga mejorando los tiempos de respuesta de la página.

Por lo tanto, las características de dichas imágenes están comprometidas, y directamente relacionadas, con el peso o tamaño del archivo digital donde se encuentran contenidas. Su resolución, profundidad de color y compresión tienen un impacto directo en la tasa de transferencia (bitrate), así que, es algo que se debe de tener bien presente a la hora de decidir que formato, o formatos, utilizar.

De tal manera, los diferentes gestores de contenido online suelen recomendar la utilización de una serie de características para las imágenes que alojan, más o menos concretas según el caso. Es más, estos servicios de alojamiento pueden imponer una serie de limitaciones respecto al tipo de imágenes que son capaces de contener, más aún si se trata de vídeo, que deberían tenerse en cuenta ayudando a elegir cual de ellos es más conveniente según las necesidades del usuario.

Poniendo como ejemplo WordPress, el CMS que utiliza este blog, son conocidas una serie de recomendaciones que sirven de ayuda para escoger y dar un formato adecuado a las imágenes utilizadas. Estas recomendaciones pueden segmentarse en dos bloques: Resolución y Formato/ Compresión.

REsolución

La resolución y relación de aspecto de las imágenes depende en WordPress del uso que se vaya a hacer de estas dentro de la página. De forma predeterminada y de mayor a menor resolución son:

  • Tamaño completo original de la imagen.
  • Tamaño grande. De 1024 pixeles máximo tanto de largo como de alto.
  • Tamaño mediano. De 300 pixeles máximo tanto de largo como de alto.
  • Tamaño miniatura. 150 pixeles con relación de aspecto cuadrada.

De cualquier forma, estos tamaños predeterminados pueden ser cambiados por el usuario. En este blog creado mediante un tema de WordPress se utilizan:

  • Imagen de cabecera. El tema utilizado recomienda un tamaño de 2000 x 1200 pixeles y aunque permite recortar la imagen online he preferido recortar la fotografía utilizada en Photoshop para ahorrar peso. El tamaño original era de 3504 x 2336 y 1,96MB de peso, mientras que la resultante pesa la mitad, 1MB.
  • Imagen de encabezado de las entradas. Igualmente he utilizado una foto complementaria a la cual se han dado las mismas dimensiones que a la anterior.

(Ambas imagenes pertenecen al autor del blog, concretamente de las islas Lofoten, Noruega, 2010).

formato / compresión

Otro factor altamente importante para reducir el peso de las imágenes utilizadas es la compresión, con pérdidas en este caso puesto que supone un degradado respecto a la imagen original.

Según el tipo de imagen que se quiera emplear es aconsejable elegir un tipo de formato y compresión diferente. Por ejemplo en WordPress es recomendable la utilización del formato JPEG para fotografías y PNG para gráficos.

Las fotografías encuentran los métodos del JPEG mucho más efectivos debido a su alta gama de matices de luminosidad y colores, de tal forma, este formato consigue menores peso de archivos manteniendo más calidad.

Sin embargo, en lo que a gráficos se refiere, el formato PNG mantiene mayor detalle en los trazos finos, característicos de los gráficos, además de permitir la exportación del canal Alfa para realizar superposiciones.

El tipo de archivos elegidos para la creación de este blog ha sido el JPEG (en calidad máxima 12 desde Photoshop) puesto que, como se ha dicho, son fotografías.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s