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.
Sobre Santiago Gonzalez
Santy es uno de los creadores y desarrolladores que componen Developando. Además es profesor en el Master Business Entrepreneurship de la Universidad Complutense de Madrid.
Si quieres conocer más sobre Santiago González Courel visita su perfil.
- Find more about me on:
Deja tu comentario