Source: https://monicauoc.wordpress.com/2020/03/04/visual-blog/
Timestamp: 2020-06-07 07:35:05+00:00

Document:
Diseño visual del blog – El blog de Mónica
Diseño visual del blog
Publicado porMónica Almaraz Lozano 4 marzo, 2020 10 marzo, 2020 Publicado en Sin categoría
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.
Imagen de Wallpaperflare
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:
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.
Comprensión sin pérdida
Una resolución 518×64
Peso de 5,90Kb
por Carlos Villagómez en https://es.ccm.net/
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.
Comprensión con pérdida
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).
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
por Colaborador de Adobe en https://helpx.adobe.com/
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.
Xpert2. Técnicas de interpolación o remuestreo en Photoshop. [En línea] (Consultado en Marzo 2020) < http://xpert.co/tecnicas-de-interpolacion-o-remuestreo-en-photoshop/&gt;
Colaborador Adobe. Aplicación de filtros específicos. [En línea] (Consultado Marzo 2020) < https://helpx.adobe.com/es/photoshop/using/applying-specific-filters.html&gt;
Wikipedia. Procesamiento digital de imágenes. [En línea] (Consultado Marzo 2020) < https://es.wikipedia.org/wiki/Procesamiento_digital_de_im%C3%A1genes&gt;
Carlos Villagómez. El formato PNG. [En línea] (Consultado Marzo 2020)<https://es.ccm.net/contents/723-el-formato-png>
Uso del vídeo en el blog
Publicación con embebido
El blog de Mónica, Blog de WordPress.com.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución