DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
20-08-2015

Las imágenes son un recurso fundamental en todo aplicación tanto web, como de escritorio, como móvil; hace poco leí un comentario en otro blog indicando que es mejor colocar una imagen representativa (una metáfora) como la siguiente:

Reproducir icono

Qué emplear frases o palabras indicando la misma acción, que para nuestro ejemplo pudiese ser "Reproducir" en español o "Play" en inglés; y esto por nombrar algunos idiomas, ahora imaginemos si queremos traducir la aplicación a múltiples idiomas y traducir muchas veces la mismas frases o palabras, nos ahorramos mucho tiempo con tan solo indicar la metáfora.

Es mejor emplear metáforas en vez de frases en la medida de lo posible.

Imágenes pixeladas con CSS

Volviendo al tema principal de esta entrada; Google Chrome en sus últimas versiones (a partir de la versión 41, puedes revizar el soporte del resto de los navegadores en MDN image-rendering) incorporó una nueva opción para el reenderizado de las imágenes (más información en Pixelated Image Rendering Sample) mediante la propiedad image-renderin en conjunto con su valor pixelated permiten mostrar imágenes pixeladas:

.img { 
  image-rendering: pixelated; 
}

Ejemplo de imágenes pixeladas con CSS

Tomando prestado el ejemplo presentado en el enlace anterior el cual hace uso de la siguiente imagen cuyo tamaño natural (sin distorsionar su tamaño con width y/o height) es de 2x2 píxeles:

Ahora, si aumentamos el tamaño mediante CSS (width y height) a unos 300x300 píxeles veremos la diferencia:

pixelated vs renderizado por defecto de los navegadores

(Tamaño natural de la imagen 2x2 píxeles)

Este en un ejemplo un poco radical o ido a los extremos para poder entender claramente la diferencia (una imagen vale más que mil palabras), ya que en rara ocasión emplearemos una imagen de estas dimensiones (2x2 píxeles) para aumentarla a las dimensiones anteriores (300x300 píxeles); veamos un ejemplo un poco más realista con la siguiente imagen:

tigre blanco

Y cambiando sus tamaño natural desde los 200 píxeles hasta los 50 píxeles vea sus efectos y considere sus uso según el efecto que desea conseguir en las imágenes:

pixelated vs renderizado por defecto de los navegadores

tigre blancotigre blanco

(Tamaño natural de la imagen 200x200 píxeles)

pixelated vs renderizado por defecto de los navegadores

tigre blancotigre blanco

Tamaño natural de la imagen 100x100 píxeles

pixelated vs renderizado por defecto de los navegadores

tigre blancotigre blanco

Tamaño natural de la imagen 50x50 píxeles


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Calendario de cubo

Calendario de cubo

Loader espiral con CSS

Loader espiral con CSS

Algunos artículos que te pueden interesar

Múltiples columnas con CSS3

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos.

Andrés Cruz 28-10-2013

Introducción a las Transiciones en CSS

Introducción a las Transiciones en CSS

Con solo aplicar ciertas reglas CSS sobre nuestros elementos del DOM; podemos hacer completas animaciones sin utilizar JavasCript o alguna otra tecnologías como Flash.

Andrés Cruz 10-09-2013

¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

YouTube es una plataforma de contenido digital en la cual puedes encontrar toda clases de vídeos además de brindar opciones que permiten insertar vídeos fácilmente en nuestra web (HTML).

Andrés Cruz 29-06-2015