Diseño visual del blog

El uso de las imágenes del blog

A continuación se hará una descripción de las imágenes utilizadas en el blog y el distinto tratamiento que se ha hecho con ellas según cada caso.

Imágenes de portadas

Imagen de Wallpaperflare
Imagen de Pexels

La imágenes de las cabeceras utilizan el formato de compresión de imagen JPEG . Por lo que, las imágenes han sufrido pérdidas de datos pero que son irrelevantes y no modifican a simple vista la estética de la imagen. Por otro lado, tienen unas resolución bastante alta al tratarse de unas imágenes que van a estar en portada y tienen que verse lo más nítidas y con calidad posible. La compresión realizada sirve para reducir el peso de las imágenes, ya que en un entorno Web, los datos tienen que cargar lo más pronto posible y cuanto menos información contengan, más rápido llegarán a la pantalla del usuario. Por lo que la ficha técnica que tenemos de las imágenes es la siguiente:

  • Formato JPEG
  • Compresión con pérdidas
  • Una resolución de 2560 x 1440
  • Peso de 382Kb y 0,99Mb

Exportación de una imagen

Para la conversión de las imágenes se ha utilizado el programa Photoshop. Se ha manipulado el tamaño de cada imagen para obtener una resolución acorde con las dimensiones de una pantalla WQHD (2560×1440). Además, para el muestreo se ha optado por la opción Bicúbica para obtener unos tonos más suaves en cada uno de los píxeles. Por último, realizando estas transformaciones, logramos una imagen de portada con buena resolución y con un peso aceptable para la transmisión de datos servidor-cliente.

Bicubic (Bicúbica): Es un método más lento pero más preciso al realizar un promedio “ponderado” de los pixeles adyacentes. El resultado es una gradación tonal mucho más suave que con los métodos anteriores. Es el método más usado en fotografí­a y artes gráficas.

por xpert2 en http://xpert.co/

Imagen entradas recientes

En este caso, se ha creado un título en Photoshop para las entradas del blog, por lo que no es una imagen que se ha debido de “tratar” a partir de una original. Para esta imagen se ha usado el formato sin pérdida PNG, ya que, es capaz de definir niveles de transparencia a diferencia del JPEG usado anteriormente. Por lo que, esta imagen se puede adaptar a cualquier tipo de fondos. Al tratarse de una imagen con tan solo caracteres y con tan solo dos canales de color su tamaño es considerablemente pequeño. Por no mencionar, que el formato de imagen permite mostrar la imagen de forma gradual por su función de entrelazado.

  • Formato PNG
  • Comprensión sin pérdida
  • Una resolución 518×64
  • Peso de 5,90Kb

El formato PNG permite almacenar imágenes en blanco y negro (una profundidad de color de 16 bits por píxel) y en color real (una profundidad de color de 48 bits por píxel), así como también imágenes indexadas, utilizando una paleta de 256 colores. Además, soporta la transparencia de canal alfa, es decir, la posibilidad de definir 256 niveles de transparencia, mientras que el formato GIF permite que se defina como transparente solo un color de la paleta. También posee una función de entrelazado que permite mostrar la imagen de forma gradual.

por Carlos Villagómez en https://es.ccm.net/

Imágenes de Galería

Galería de Imágenes

Estas imágenes han sido tomadas desde un teléfono móvil. Cuando se genera una foto con la cámara del teléfono, según las opciones que se tengan configuradas (como velocidad de obturación, apertura, ISO, distancia focal, etc…), se genera una imagen con un tamaño, resolución y píxeles determinados. En este caso, las proporciones de las imágenes originales eran enormes por lo que se ha convertido de la siguiente manera:

En esta ocasión, se ha reducido la resolución de las imágenes y se ha realizado un muestreo bilineal para suavizar los bordes que contengan. Gracias a estas transformaciones, se ha logrado reducir ficheros de 6Mb a 350Kb (caso del templo dorado Rinkokuji) como en la imagen, por lo que su factor de de compresión sería 17,14. Al tratarse de una galería conviene que las imágenes sean lo más ligeras posibles para que los datos se descarguen enseguida del servidor. Por otro lado, al reducir la resolución y usar el formato JPEG con fotos de poco contraste, éstas, habrán tenido pérdidas de información pero debido a su tamaño final y los datos innecesarios que contenga, no es visible para el ojo humano.

  • Formato JPEG
  • Comprensión con pérdida
  • Resolución 800×600
  • Peso de 349Kb, 726Kb, 360Kb, 504Kb

Por último, esta imagen se ha utilizado para darle un aspecto estético a la zona de la galería y que a su vez tiene mayor resolución para hacerlo más vistoso y detallado, se le ha aplicado un filtro propio de WordPress para bajar su contraste y resaltar el texto. Esta imagen ha recibido un tipo de compresión con pérdidas y una disminución de su resolución (además ha sido recortada para la estética de la página).

Configuración de imagen
  • Formato JPEG
  • Compresión con pérdida
  • Resolución 1600 x 1200
  • Peso 261Kb

Estos son los ajustes que se han utilizado para la compresión de la imagen. Aunque se ha comprobado que al realizar el cambio había algo de ruido en la imagen. Por lo que se ha utilizado un filtro de reducción de ruido en Photoshop. En en muestreo se ha usado la opción Bicúbico.

Configuración de ruido de la Imagen

El ruido de la imagen se muestra como píxeles superfluos aleatorios que no forman parte del detalle de la imagen. El ruido puede aparecer por tomar fotografías con un ajuste ISO alto en una cámara digital, por subexposición o por tomar fotografías en un lugar oscuro con una velocidad de obturador larga. Las cámaras de consumo de gama baja suelen provocar más ruido de imagen que las cámaras de gama alta. Las imágenes escaneadas pueden presentar ruido de imagen a causa del sensor del escáner. A menudo, el motivo granulado de la película aparece en la imagen escaneada.

por Colaborador de Adobe en https://helpx.adobe.com/

Imagen de ejemplo

Fuentes de información utilizadas

Documentación docente

  • Alex Ribelles García. Conceptos básicos de vídeo y audio. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.
  • Alex Ribelles García. Digitalización, almacenamiento y transmisión de audio y vídeo. Introducción. Publicación,distribución y monetización. Barcelona: Fundació per a la Universitat Oberta de Catalunya.

Documentación en línea

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

Crea tu página web en WordPress.com
Empieza ahora
A %d blogueros les gusta esto: