Cómo optimizar las Imágenes del Blog

Optimizar las imágenes del blog, es una tarea importante que contribuirá a mejorar la carga del mismo. Si tu blog carga rápido, permitirá que tus usuarios puedan navegar en él cómodamente. Además, Matt Cutts, quien forma parte del equipo de Google, recientemente comentó que mejorar la velocidad de un sitio web permite mejorar su posicionamiento en Google.



Hay varios factores que pueden influir en que la carga de nuestro blog se vea afectada, el uso de código Javascript por ejemplo, pero uno de las cosas que más influyen en la carga del blog, es la de las imágenes que usamos.



Tomando en cuenta ese punto, veamos cómo optimizar las imágenes. Esto incluye imágenes en la plantilla y en las entradas.

1. Elige el formato adecuado para las imágenes.

Antes de subir una imagen a una entrada, o bien cuando estés cambiando las imágenes de una plantilla que utilices, asegúrate de que uses un formato adecuado. Los formatos de las imágenes que se suben en la web pueden ser GIF, PNG, o JPG.



El formato GIF, es ideal para imágenes con pocos colores como logotipos. También es el formato que permite crear imágenes animadas.

El formato JPEG, es ideal para imágenes que tienen muchos colores como el caso de las fotografías.

El formato PNG, Este formato permite dos alternativas: la primera es PNG8 que es una alternativa al GIF y puede usarse siempre y cuando no la imagen no sea animada. Y la otra es PNG24 que debes usar de preferencia cuando la imagen tenga transparencia.





Photoshop Elements y demás versiones, tiene una opción integrada llamada: para la web, en donde podemos comparar el peso de la imagen en distintos formatos, previsualizando cómo luce la imagen en cada formato. Al comparar el tamaño y la calidad que deseamos mostrar, podemos elegir cuál es el formato más conveniente.



En la web existen algunos programas disponibles que te permitirán optimizar las imágenes tales como Dinamic Drive.









3. Reduce el tamaño de la imagen (medida)





Entre más pequeñas sean las imágenes que usamos en las entradas, mas rápido se cargará la página ya que los archivos serán mas ligeros. Eso no quiere decir que tenemos que usar imágenes miniaturas en las entradas, ya que éstas perderán atractivo. Puedes por ejemplo cambiar el tamaño de las imágenes o fotografías a uno que no sea mayor al ancho que muestras en tus entradas.



Eso quiere decir que si el ancho de tu columna principal mide 600 pixeles evites utilizar imágenes que midan por ejemplo 1000 pixeles, ya que al final de cuentas las mostrarás más pequeñas. Y si las muestras más grandes, se desbordarán o no se verán completas, dependiendo del valor que uses en la plantilla en una propiedad de CSS que define como mostrar el contenido que se desborda (overflow). Esto no aplica para diseños en lo se usan porcentajes.



Si quieras que las imágenes muestren detalles importantes y para lograrlo es necesario rebasar el ancho del post, puedes optar por redireccionar la imagen, enlazándolola al álbum de Google photos u otro servicio que uses para alojar la imagen.

3. Utilizar la técnica de sprites (avanzado).

La técnica de sprites, permite colocar en un solo archivo varias imágenes que sean usadas en la plantilla como iconos, con el fin de reducir el número de imágenes que son solicitadas al servicio donde se encuentran alojadas.



Luego con CSS, se van posicionando las imágenes para que sean mostradas. Esto tendrá un impacto positivo en la carga de tu blog ya que se solicitaran menos imágenes al sitio donde las tienes alojadas.



Puedes aprender de esta técnica en este artículo de libros.es.



Hace tiempo veíamos como usar la técnica sprites para mostrar iconos de redes sociales. Ese es solo un ejemplo, podemos implementarlo en todas las imágenes de la plantilla del blog, creando uno, dos, o tres sprites, según el diseño del blog.



Sabiendo como funciona la técnica, podemos crear los sprites usando en un editor de imágenes como Photoshop, paint.Net. También existen algunos generadores de sprites como: css sprites, que podemos usar para ese propósito.

3. Evita redimencionar imágenes con CSS

Si vas a agregar por ejemplo una galería de imágenes, evita usar imágenes muy grandes para luego cambiarles el tamaño con CSS. Haz lo posible porque la imagen sea del mismo tamaño en que está siendo mostrada. Esto mismo aplica para las imágenes de las entradas del blog. Evita usar una imagen muy grande innecesariamente y que luego reducirás desde el editor de Blogger.

Conclusiones

Dependiendo del propósito del uso que estemos haciendo de las imágenes podremos determinar cuál es el formato ideal para las imágenes así como las dimensiones.

Si bien la técnica de sprites puede resultar tediosa, los beneficios que aportara en lo que respecta a la carga del blog son enormes así que vale la pena implementarla siempre que sea posible.



Bueno, pues a ¡trabajar se ha dicho!





Referencias:

Baluart



También puedes leer:

Google webmaster Blog

(En inglés pero pueden usar el traductor de Google)