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

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Loader pino con CSS

Loader pino con CSS

6 Loaders con CSS

6 Loaders con CSS

Algunos artículos que te pueden interesar

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

Cómo hacer una simple nube en CSS

Cómo hacer una simple nube en CSS

En este artículo veremos como crear una simple nube en CSS; la nube estará compuesta de un div, dentro tendrá un span para representar una sombra generada por la misma.

Andrés Cruz 18-03-2014