¡Hola de nuevo querido lector! hoy voy a hablarte sobre cómo optimizar imágenes para web.

En ocasiones no prestamos especial atención a las imágenes que tenemos en nuestra página web, simplemente nos dedicamos a subirlas tal y como las tenemos en nuestro ordenador, en el orden que más nos guste, y sin mirar ni siquiera el tamaño del archivo.

Muchos webmasters pasan por alto este apartado a la hora de realizar su trabajo, siendo un punto importante a la hora de optimizar tu sitio web correctamente.

A continuación os voy a enseñar el proceso que yo mismo sigo para optimizar las imágenes que veis en la mayoría de mis posts.

¡Vamos a ello!

 

Existen muchas razones por las cuales debemos prestar especial atención a las imágenes de nuestra página web. Para empezar, las imágenes constituyen buena parte del peso de la mayoría de sitios, normalmente por encima del 50%. En las siguientes lineas, voy a enumerar las que, bajo mi punto de vista, son las mas importantes:

 

  • Disminuye el tiempo de carga de tu sitio web. la reducción del tamaño de cada una de sus páginas es determinante en muchos aspectos. Un menor peso se traduce en un tiempo de carga más reducido. Presta mucha atención si quieres que tu web cargue en un abrir y cerrar de ojos.
  • Mejora el posicionamiento SEO. Es sabido que Google y los demás buscadores, prestan especial atención a las imágenes de las distintas páginas web. Para mejorar tu posicionamiento en buscadores enseñale a Google cada una de tus fotos con su traje de gala.
  • Ahorra espacio en tu servidor. Cada vez usamos más contenido visual en Internet. Además, Todos tenemos un límite de espacio contratado en nuestro hosting. Reduce el tamaño de tus imágenes y no pagues de más por tu servidor.
  • Consume menos ancho de banda. Las imágenes son uno de los recursos que más ancho de banda consume, es por ello que quizá tu web tarde siglos en cargar ¡Optimiza y convierte tu web en Flash!

Programas y herramientas

Existen infinidad de herramientas destinadas a la optimización web, entre las cuales se encuentran algunas de las que yo utilizo en mi día a día. 

En el proceso de optimización que voy a mostrarte un poco más adelante, voy a enseñarte las dos herramientas principales con las que trabajo.

  • La primera de ellas es Adobe Illustrator, con la que redimensiono las imágenes, y las edito en caso de que sea necesario.
  • La segunda es TinyPNG, una herramienta SEO online que puedes utilizar de forma totalmente gratuita.

 

Si quieres ver más herramientas para optimizar imágenes online te interesa leer:

Las mejores herramientas SEO gratis

 

Cómo optimizar imágenes para la web

El proceso que sigo a la hora de optimizar fotos sin perder calidad consta principalmente de dos fases, redimensionar, y optimizar al máximo. Otro factor importante cuando incluimos imágenes en nuestras páginas es el tamaño que van a tener una vez que se muestren en pantalla. 

Para qué quieres tener una imagen con una resolución de 1920 x 1032 pixels, cuando después la muestras en pantalla con una resolución de 300 x 200 pixels ¿No tiene mucho sentido verdad?

Forzar a que tu CMS (si es que usas uno) redimensione las imágenes, es algo que también puede perjudicar nuestra velocidad de carga, así como nuestro posicionamiento SEO. En consecuencia, debemos insertar, en la medida de lo posible, imágenes en el tamaño exacto en el que queremos mostrarlas en nuestra página.

Ahora vamos a la chicha del asunto…

Redimensionar

En primer lugar abrimos nuestro Adobe Illustrator, o en su defecto, cualquier editor de imagen que se le asemeje. Pulsamos en la pestaña Archivo > Abrir… y seleccionamos la imagen que deseamos optimizar.

Una vez que tenemos nuestra imagen en pantalla, y con ella seleccionada, debemos irnos a la pestaña transformar que se encuentra en la parte superior derecha de la imagen.

En esta pestaña encontramos dos cajas diferenciadas como “An: (Ancho)” y “Al: (Alto)”. En dichas cajas podemos especificar en pixels, las nuevas dimensiones que deseamos para nuestra imagen.

Importante: Debemos tener en cuenta que, en caso de modificar ambos ejes de la imagen en diferentes proporciones, la imagen podría verse distorsionada. Para evitar esto, debemos asegurarnos de que el símbolo que representa una cadena, situado a la derecha de dichas cajas, esté activado. Una vez activado, podemos modificar ancho o alto, viendo modificado el otro en la misma proporción. De esta forma, evitamos cualquier tipo de distorsión en nuestra imagen.

El siguiente paso es guardar la nueva imagen en nuestro equipo. para ello, debemos dirigirnos a la pestaña Archivos > Exportar > Guardar para Web (Predeterminado)… Donde nos aparecerá una ventana emergente para poder configurar las opciones de guardado.

Por último, debemos configurar algunos campos en función de nuestras preferencias a la hora de guardar las fotos. Las opciones básicas a tener en cuenta se encuentran en la pestaña superior derecha con el nombre Ajuste preestablecido.

Aquí podrás elegir entre los diferentes tipos de archivos JPG, PNG o GIF. Calidad de compresión, alta, media, o baja. Además de algunas otras opciones. A continuación detallo las opciones que debes tener en cuenta para optimizar fotos para web.

Los formatos de imagen pueden ser:

  • JPG: Se puede conseguir un buen ajuste tamaño/calidad de archivo. Es el formato ideal para fotografías con muchos detalles y colores.
  • PNG: Usado normalmente para obtener imágenes de mejor calidad, aunque con un mayor tamaño. Se recomienda su uso para imágenes planas, capturas de pantalla, logotipos, etc.
  • GIF: Un formato practicamente en desuso. Su principal función en la actualidad es para imágenes animadas.

En cuanto a los niveles de calidad de compresión, debes pensar en tus prioridades y en cada caso en particular. Te compensa una perdida mayor de calidad, para conseguir un tamaño mucho menor, o por el contrario prefieres tener mejor calidad de imagen, aunque el tamaño sea mayor. Toma tus decisiones en función de tu criterio.

Una vez elegidas las opciones, tan solo debemos pulsar el botón guardar, y seleccionar el lugar de nuestro equipo donde deseamos almacenar la imagen.

Importante: Recuerda que la pestaña “Recortar al tamaño de la mesa de trabajo” debe estar DESMARCADA. En caso contrario la imagen que guardes aparecerá con un fondo blanco alrededor. 

Optimizar

En esta segunda fase para la optimización de imágenes, me enfoco principalmente en la reducción de tamaño mediante la compresión lossy. Este tipo de compresión de imágenes se basa en la reducción del número de colores de la imagen, de esta forma se ve reducido el tamaño de la imagen con una pequeña perdida de calidad casi imperceptible.

Para realizar este paso utilizo la herramienta online TinyPNG. Bajo mi punto de vista, es la que mejores resultados da en cuanto a reducción de tamaño/calidad. A continuación vas a poder ver lo fácil que es usar esta herramienta, con la que tendrás tus imágenes optimizadas en un plis plas.

Primero, debemos acceder a TinyPNG entrando en su página web.

Por último, debemos ir a la carpeta donde se encuentra la imagen que queremos comprimir, y arrastrar dicha imagen hasta el recuadro a la derecha del panda, como puedes ver en la imagen de arriba. La otra opción es pulsar en el mismo recuadro. De esta forma, aparecerá una ventana emergente donde debemos buscar y seleccionar las imágenes en nuestro equipo.

Una vez hecho esto, tenemos nuestra imagen optimizada. Tan solo debemos descargarla en nuestro equipo pulsando el botón download situado a la derecha, y la tendremos lista para ponerla en la página web que estemos realizando.

Nota: Como puedes ver en esta última captura, en esta ocasión este paso no ha disminuido en nada el tamaño de la imagen. En ocasiones la herramienta no es capaz de reducir su tamaño ya que puede conllevar demasiada perdida de calidad. De todos modos, creo que es un paso bastante rápido y sencillo como para no hacerlo.

Ten en cuenta que la herramienta te permite optimizar imágenes en formatos JPEG y PNG, subir hasta 20 archivos a la vez, con un tamaño de hasta 5 Mb cada uno, nada mal para ser una herramienta gratuita.

Conclusiones

Optimizar imágenes para web es un apartado al que debemos prestarle la atención que se merece. A la hora de confeccionar nuestra página, es importante optimizar al máximo todos los apartados a los que los buscadores le prestan especial atención. De esta forma, obtendremos los mejores resultados posibles en nuestro posicionamiento web.

Si has llegado hasta aquí ya sabes cual es mi metodología en esta fase, además de los programas que utilizo en dicha tarea. Si te ha quedado alguna duda, no dudes en preguntar.

¿Cual es tu proceso para optimizar una imagen de tu página web? Deja un comentario y cuéntame que pasos sigues, y las herramientas que utilizas. También estamos aquí para aprender. 

🎄 Felices fiestas y cuidado con no atragantarse con el jamón 🎄 ¡Nos vemos en el siguiente post amigo lector, un saludo! 😉