In Diseño

Empiezas con tu nueva web o blog .. que bonita, que chula .. pasan los meses y empiezas a notar como los tiempos de carga se resienten y lo que era un portal ágil y dinámico se mueve a saltos o directamente se queda «pensando» en tu móvil con 3G.

Y una de las cosas por las que ello empieza a pasar es porque el usuario «administrador web» empieza a introducir productos nuevos en su tienda virtual, ofertas en su negocio, entradas en su blog, etc. acompañados de bonitas y grandes (sobre todo grandes) imágenes sin comprimir y con sus megas al hombro.

En este post nos vamos a centrar en ese tipo de imágenes de usuario final, dejando al margen las utilizadas para la propia confección de la web y su estructura. Sin ser diseñador gráfico o un experto en fotografía, puedes echar mano de herramientas para que en un minutito puedas seguir alimentando tu sitio con buenos contenidos sin poner en compromiso la velocidad del mismo.

Centrados pues en imágenes que acompañan a entradas, artículos y demás de tu web, nos quedamos con dos formatos para las mismas : .jpg y .png .. seguro que hasta te suenan.

Lo primero, el tamaño .. para qué necesitas subir a tu web una imagen de 4200 píxeles de ancho si luego la vas a visionar en tu entrada a 700?? Pues eso, lo primero reducir el tamaño de tu imagen original para adecuarlo a las verdaderas necesidades de la página.

Segundo, la optimizo para «formato web» en uno de éstos formatos:

    • JPG : Es el formato ideal para fotografías. Cuantos más colores y matices tenga la fotografía más nos convendrá salvarlas así. Utilices la herramienta que utilices, normalmente te encontrarás el típico rango 0-100 para marcar la calidad del archivo de salida, y comprobarás cómo a partir de 50 o 60 las diferencias con la original empiezan a ser sutiles a ojos de usuario normal.
    • PNG (8-bits) : En general, el formato .png no presenta casi pérdidas en su compresión y ésta opción a 8 bits (también el formato GIF) es la indicada para imágenes con colores planos y gráficos sin, por ejemplo, degradados o sombras.
    • PNG (24-bits) : Dependiendo del tipo de imagen, y sobre todo si trabajamos con transparencias, puede ser el indicado. Permite preservar la transparencia sin asperezas en los bordes.PNG soporta imágenes RGB, con colores indexados, en escalas de grises y en modo de mapa de bits.

Un ejemplo sobre la práctica:

Tenemos una imagen con una resolución normal en .jpg que ocupa 189 KB :

01

 

Esa misma imagen optimizada con Photoshop y su opción «Guardar para Web» a una calidad de 60 sobre 100… sólo nos ocupa 47 KB!!

02

 

La misma imagen, también con Photoshop en formato PNG-8 … algo ahorra, se queda en 124 KB aunque recuerda que ésta opción es la más indicada para gráficos o imágenes más planos que la que estamos utilizando:

03

 

Y ésta misma imagen en PNG-24 … para el caso tampoco es el formato adecuado, porque nos da un tamaño incluso superior a la original … 327 KB:

04

 

Como puedes ver, a golpe de vista pocas diferencias entre las 4, lo que demuestra que dependiendo de la imagen que nos traigamos entre manos deberemos optar por una opción u otra para conseguir un tamaño ajustado. A la larga, nuestro sitio y sus impacientes visitantes agradecerán el trabajo.

Y por último, qué herramientas utilizo?? .. hay muchas, y muchas online y gratuítas si no tienes un software como Photoshop u otro editor de imágenes instalado en tu ordenador. Te dejo sólo algunas que he probado, aunque si «googleas» encontrarás muchísimas más:

Sencillo y con las opciones precisas : http://www.webresizer.com … marcamos el nuevo tamaño, calidad jpeg, si queremos rotar, enfocado … subimos la imagen original, tres clicks y listo!
Con menos opciones todavía: http://www.imageoptimizer.net … sencillo pero funciona!
Nos permite elegir si queremos que el resultado sea un GIF, PNG, o JPG : http://tools.dynamicdrive.com/imageoptimizer/
Igual de sencillo de utilizar : http://www.freshpixels.net/

 

Bueno, pues como en todo, el esfuerzo merece la pena … ya verás.

Diseño web responsivo