Toda página web tiene un objetivo. Captar clientes, presentar más información sobre tus servicios, recopilar emails de usuarios potenciales, etc. Pero para que tu web sea funcional y te ayude a lograr tus metas, has de «mimarla» trabajando en ella constantemente.
Hoy te voy a hablar de un factor que debes tener en cuenta a la hora de diseñar tu web: la optimización de imágenes. ¿Quieres saber por qué es una condición indispensable?
La importancia de optimizar imágenes para web
Antes de la teoría, voy a aclararte por qué debes preparar correctamente las imágenes en tu página web:
- Mejora tu posicionamiento en buscadores. La velocidad de carga es uno de los factores que favorecen el SEO. Si reduces correctamente las imágenes de tu web, aumentarán las posibilidades de posicionamiento.
- Capta usuarios. Si una web tarda demasiado en cargar, tienes muchas posibilidades de que la persona que está navegando salga corriendo. Así somos, no nos gusta nada perder el tiempo detrás de la pantalla.
- Adapta tu web a los dispositivos móviles. Actualmente, el 80% de las personas navegamos en internet a través del móvil. Debes adaptar, no solo el peso de las imágenes a la versión de escritorio, sino también a estos dispositivos. Las razones son las mismas: Posicionamiento y captación de usuarios.
Elige bien el formato
Existen dos formatos principales: png y jpg. A continuación te detallo en qué casos es mejor utilizar cada uno de ellos:
- formato png: Se trata de una extensión que guarda una buena calidad del archivo. Se recomienda su utilización para imágenes que contengan colores planos (ilustraciones, logotipos, banners con tipografía, etc). Además, te permiten guardar archivos con fondos transparentes.
Logotipo de Play Station en PNG
- formato jpg: Permite reducir más el peso de los archivos, pero reduce la calidad de las imágenes más que el png. Su uso está indicado para fotografías.
Imagen en JPG (unsplash.com)
Cómo optimizo las imágenes para web
Para esta tarea, necesitarás un programa de edición fotográfica. Mi recomendación es que utilices Photoshop. Aunque no estés demasiado familiarizado con él, ¡no te preocupes! a continuación te dejo 3 pasos rápidos y sencillos para preparar tus imágenes:
- Una vez estés en Photoshop: Archivo – Abrir… . Selecciona tu imagen en los archivos de tu ordenador.
- Una vez tengas la imagen en tu mesa de trabajo, vuelve a hacer click en archivo y después, guardar para web.
- Te aparecerá una ventanita donde podrás, en primer lugar, seleccionar el formato:
- Si eliges jpg: Selecciona la calidad que quieres para tu imagen del 1 al 100. Reduce la barra lo máximo posible hasta que veas en la visualización de la imagen que empieza a perder calidad. Dependiendo de lo óptima que sea la imagen de la que partas, una buena cifra estaría entre el 60 / 80.
- Si eliges png: Asegúrate de que esté marcada la casilla «transparencia» para que se conserven los fondos transparentes de tus imágenes.
- En ambos casos: Modifica en la parte inferior el tamaño final en pixeles de la imagen. Revisa primero el espacio que ocupa en tu web para ajustarte lo máximo posible y optimizar peso.
Otras alternativas para optimizar imágenes
¿No tienes Photoshop? ¿Quieres ir un paso más allá en la optimización? Existen otras herramientas gratuitas que puedes utilizar. Ficha la que te nombro a continuación, ¡es mi favorita!
- Tiny Te permite reducir el máximo peso posible sin perder la calidad de la imagen. Sirve tanto para archivos en jpg como para png. Arrastra tus imágenes y …¡voilá! ya lo tienes.
- Compressor Al igual que Tiny, te permite reducir al máximo sin perder calidad en las imagenes. Compatible también para jpg y png. La única pega es que solo te permite realizar la compresión de uno en uno.
¡Ahora es tu turno! Si tienes alguna duda o necesitas ayuda en cualquier otra cuestión de tu web, indícalo en los comentarios. Resolveré tus dudas y tomaré nota para próximos artículos ;).
