Blog Developando » diseño http://developando.com/blog ¿Tienes una idea? Nosotros te ayudamos Thu, 19 Jun 2014 10:05:42 +0000 es-ES hourly 1 http://wordpress.org/?v=3.8.3 Optimizar imagenes: aumenta la velocidad de carga de tu web http://developando.com/blog/optimizar-imagenes-carga-web http://developando.com/blog/optimizar-imagenes-carga-web#comments Mon, 12 May 2014 10:41:07 +0000 http://developando.com/blog/?p=2454 Hace poco tiempo os hablamos de Smush.it una herramienta para optimizar imagenes, hoy os traemos una nueva herramienta que te permitirá optimizar tus imágenes. Dada la situación actual además de servir contenido de calidad tu web deberá cargarla en el menor tiempo posible, para ello existen múltiples técnicas: Cargar el CSS mínimo visible. Mantener el mínimo número […]

The post Optimizar imagenes: aumenta la velocidad de carga de tu web appeared first on Blog Developando.

]]>
Hace poco tiempo os hablamos de Smush.it una herramienta para optimizar imagenes, hoy os traemos una nueva herramienta que te permitirá optimizar tus imágenes. Dada la situación actual además de servir contenido de calidad tu web deberá cargarla en el menor tiempo posible, para ello existen múltiples técnicas:

  • Cargar el CSS mínimo visible.
  • Mantener el mínimo número de ficheros CSS posibles.
  • Cargar los js bloqueantes al final del body.
  • Minificar el CSS.
  • Minificar el JS.
  • Habilitar la compresión de tu sitio web con GZIP.
  • Optimizar imágenes.

Estas y otras técnicas más nos las facilita la herramienta PageSpeed Insight de Google, sin embargo, como ocurre con las imágenes conocer la solución puede ser en ocasiones demasiado complicado.

¿CÓMO OPTIMIZAR IMaGENES DE un SITIO WEB?

Lo primero que debemos tener en cuenta a la hora de mostrar imágenes en nuestro sitio web es que la resolución de las mismas no sea superior al área que van a ocupar. Esto es obvio aunque puede no serlo tanto si además queremos optimizar nuestras imágenes para visualizarse correctamente en las pantallas retina.

¿cómo optimizar imagenes para las pantallas retina?

A modo general podemos decir que las pantallas Retina Display son aquellas que tienen alta definición gracias a que duplican la cantidad de píxeles en pantalla.

Esto nos afectará directamente a la hora de diseñar nuestro sitio web y a la hora de tratar las imágenes que mostraremos en el mismo. Sin embargo con el siguiente truco tus imágenes se verán también tanto en pantallas normales con el pantallas Retina Display.

El truco:

Para mantener la calidad en las imágenes que se visualizan en nuestro sitio web guardaremos las imágenes al doble de resolución de que se van a mostrar y al 50% de calidad. Recuerda añadir el  tamaño correcto en tu etiqueta

optimizar imagenes con optimizilla

Optimizilla es una herramienta muy sencilla de utilizar que nos permitirá una compresión óptima de nuestras imágenes. Por tanto, teniendo en cuenta lo que comentamos en el punto anterior, deberemos subir las imágenes a esta herramienta al doble de tamaño del que pretendamos mostrar en nuestro sitio web y ajustar la calidad al 50%.

Una vez hecho esto podremos guardarlas en nuestro PC listo para ser subidas a nuestro sitio web.

The post Optimizar imagenes: aumenta la velocidad de carga de tu web appeared first on Blog Developando.

]]>
http://developando.com/blog/optimizar-imagenes-carga-web/feed 1

Last updated by at .