Hace 5 años

Preparar nuestras imágenes para la web

El robot de Google cuando visita nuestra web nos la califica según lo rápida que sea al cargar y si el valor conseguido es bajo nos la penaliza. Una de las causas son las imágenes que usamos para documentar un articulo o incluso para crear nuestro tema web. Por lo tanto el objetivo es reducir el tamaño de las imágenes lo más posible sin perder calidad y reducir el número de imágenes de nuestro tema usando Sprites CSS.

Tamaño de la imagen en pixeles

Tenemos que ver el espacio que va ha ocupar. De que nos sirve una imagen de por ejemplo 1024×768 pixeles si luego va a ir en un espacio muy reducido de 500×400 pixeles o incluso menor. El exceso repercute en Kb que no son necesarios. Para reducir el tamaño de la imagen podemos recortarla quitando zonas de las que podamos prescindir. En cualquier caso lo que si es importante es, escalar la imagen al tamaño que realmente va a tener en la web.

La resolución de la foto.

O lo que es lo mismos los puntos por pulgada (ppp) de la imagen. El valor mínimo para imprimir una imagen con calidad es de 300ppp, osea que dependemos de la impresora. En la web la resolución máxima necesaria es la resolución de la pantalla, y en lugar de usar los ppp se usan los dpi. Este valor depende de la anchura en pulgadas y de los pixeles que hay en ese espacio.

Ejemplo

Si nuestro monitor de ancho mide 50,8 cm y la resolución de la pantalla es de 1920 x 1080 pixeles
dpi = Pixeles horizontales / Anchura de la pantalla en pulgadas
dpi = Pixeles horizontales / ( Anchura de la pantalla en cm / 2,54 cm )
1 pulgada = 2,54 cm
Por lo tanto:
1920 pixeles / ( 50,8 cm / 2,54 cm ) => 1920 pixeles / 20 pulgadas => 96 dpi

El tamaño del archivo en kb.

Después de elegir el formato de nuestro archivo nos queda elegir el grado de compresión, para tener un tamaño final del archivo reducido. Para ello tenemos que jugar con la compresión del formato y elegir un valor de compromiso en el que nuestro archivo mantenga una buena calidad con el menor tamaño. Teniendo en cuenta que a menor tamaño peor calidad y a más tamaño mejor calidad.

Formato del archivo

El tipo de archivo no es menos importante, pues según la necesidad puede ser más interesante usar uno u otro.

JPG

Es un formato de compresión con pérdida de calidad. Podemos elegir con distintos porcentajes de compresión hasta encontrar el que nos dé el de menor tamaño sin perdida aparente de calidad de la imagen.

GIF

Es un formato con compresión sin pérdida, siempre que nuestra imagen tengan un máximo de 256 colores. Este formato nos permite hacer sencillas animaciones. También admite transparencias.

PNG

Es un formato libre, que admite algo de compresión sin pérdida, que también admite transparencias pero soporta una profundidad de color de hasta 16,7 millones de colores. Posee dos modos de compresión: estándar y progresivo. Este último útil para grandes imágenes, o conexiones lentas. El que contenga metadatos permite que los motores de búsqueda puedan indexar estos archivos gráficos en función de la descripción incluida, en lugar de únicamente por el nombre.

Transparencias

El soportar transparencias es muy útil para los casos en que por ejemplo tenemos un logo que queremos integrar en la web. Para ello el fondo ha de ser transparente, de lo contrario quedaría como un rectángulo. Con el formato GIF y PNG es posible hacerlo, al contrario que con el formato JPG. Por lo que es importante saber cual es la prioridad si tener transparencias o tener una imagen de poco tamaño.

CSS Sprites

En el diseño de nuestra web es normal incluir unas cuantas imágenes, logos, texturas, e iconos. Además tenemos que contar con algunos que aparecen al poner el ratón sobre ellos. Para cada una de estas imágenes se tiene que hacer un acceso a la base de datos. Si tenemos 20 imágenes, tendremos 20 accesos. Esto Google lo tiene en cuenta y nos propone acceder a la base de datos el menor número de veces, usando CSS sprites.

Para explicar que es un CSS sprite lo mejor es poner un ejemplo. Sitúa el ratón sobre cualquier icono, pulsa el botón derecho, y elije la opción Ver imagen de fondo. Verás un imagen con 17 imágenes, esto es un Sprite. La ventaja está en que al ser solo una imagen solo se hará un acceso a la base de datos y no 17. Para visualizar una imagen concreta tendremos que usar coordenadas.

Esta imagen la podemos crear con cualquier programa de manipulación de imágenes como Gimp, o más fácil aún con webs como Instant sprite. Usando la web es tan fácil como: subir las imágenes, ordenarlas a nuestro gusto, elegir los píxeles de separación entre las imágenes, indicar si las queremos tener de forma vertical u horizontal, y descargar el archivo. Pero además nos dará las coordenadas, la anchura y la altura de cada imagen. Y ya solo nos quedará trasladar los valores a nuestra hoja de estilos CSS. Un detalle a tener en cuenta es que los valores de las coordenadas son siempre negativos.

#div {
width:50px;
height:60px;
background:url(‘/imagenes/Sprite.png’) no-repeat -10px -20px;
}
Diseño web
863

Dame tu opinión

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>