Si estás inmerso en mejorar las prestaciones de tu web y poner en práctica la WPO (Web Performance Optimization), seguro que te habrás topado con el desafío de optimizar tus imágenes para que tu sitio cargue más rápido. Al fin y al cabo es un factor clave, uno de los apartados que más fácilmente se pueden solucionar y al que muchos no prestan demasiada atención.
Y es que hacerlo de forma correcta puede conllevar grandes beneficios.
Según KISSmetrics, un eCommerce que facture 100.000$ al día puede llegar a tener 2.5$ millones de pérdidas en ventas al año si su web tarda 1 segundo más en cargar.
Cierto es que no basta con optimizar las imágenes para conseguir velocidades de vértigo (no debes descartar la calidad del servidor de hosting, los plugins que utilices si usas por ejemplo con WordPress, etc.). Pero en algunos casos supone un auténtico salvavidas.
Como todo en esta vida, saber cómo optimizar tus imágenes depende de cada caso y de las herramientas que quieras o estés dispuesto a utilizar. Algunas serán más complejas que otras, y más adecuadas según el caso. ¿Empezamos?
Recomendaciones para optimizar tus imágenes para la web: el tamaño sí que importa
Por lo pronto es importante tener en cuenta el formato de la imagen. Si por ejemplo eres un fotógrafo y haces las capturas en RAW (que conservan toda la información de la escena, sin procesar) el tamaño de la imagen será descomunal, para los términos de un archivo gráfico pensado para Internet. A esto se suma la poca o nula compatibilidad de los navegadores para interpretarlas.
Lo normal es que se emplee el formato JPG o PNG (en menos medida los GIF, y ya ni qué decir los GIF animados, tan populares antaño).
Dicho esto, debes asegurarte de que el tamaño de la imagen es el que quieres mostrar en pantalla. De nada servirá subir a tu web una foto de 3600 x 3600 px cuando quieres mostrar una miniatura de apenas 200 x 200 px. ¿Tiene sentido verdad? Ya no solo es que la imagen en cuestión pesará 10 veces más, sino lo que puede implicar si por ejemplo tienes 1000 imágenes alojadas en tu sitio web. Efectivamente, problemas de espacio.
Así pues, si solucionas esto matarás dos pájaros de un tiro:
- Mejorarás la carga de la página en pos de una mayor usabilidad.
- Reducirás el espacio que ocupan estos archivos en tu hosting, evitando problemas de espacio y de ancho de banda.
Deberás saber el tamaño con el que tiene que mostrarse la imagen en la web (el programador del sitio o el diseñador debería poder facilitarte esa información). Y entonces llega el momento de redimensionarla. Y este es el punto en el que muchos se atascan.
La buena noticia es que la solución es mucho más sencilla de lo que podrías pensar.
Editores gráficos instalables
Son muchas las herramientas que te pueden ayudar. Por un lado están los editores gráficos, que además de redimensionar hacen muchísimo más. Simplificando mucho digamos que en este apartado se engloban las herramientas para quienes tienen ciertos conocimientos de diseño, ya que de inicio la curva de aprendizaje puede ser algo elevada. Ahora bien, la versatilidad y la potencia que brindan es incuestionable, y con un poco de dedicación no son tan complejas de utilizar.
Por lo general tendrás que descargarlas a tu ordenador e instalarlas. Un ejemplo que nos viene a todos a la cabeza de inmediato es el archiconocido Adobe Photoshop, aunque existen otras soluciones gratuitas como Pixlr Editor, GIMP, Fotor o Photo Pos Pro, entre otras muchas, que no le van a la zaga.
Cambiar el tamaño de la imagen es aquí una función entre miles. Hablamos de auténticas suites todo terreno en el apartado gráfico, con vistas a lograr objetivos profesionales y muy exigentes: aplicar todo tipo de filtros, trabajar en 3D, con máscaras, pinceles o capas, solo para empezar.
Si exclusivamente quieres emplearlos para reducir el tamaño de una foto, ya te avanzamos que no es el camino recomendado. Es como matar moscas a cañonazos. No obstante, si tus expectativas son más ambiciosas en el apartado del diseño (por ejemplo aquí encontrarás un post sobre cómo crear tu imagen de marca con Pixlr), hay que tenerlas muy en cuenta. Su calidad y potencia son indiscutibles y gran parte de ellas se puede disfrutar sin coste.
Editores gráficos online
Algunos editores también están disponibles en plataformas online. Y es que resulta muy cómodo no verse obligado a instalar nada en tu equipo y poder hacer uso de estas soluciones previo registro, por lo general gratuito (en la mayoría de casos con opciones más avanzadas ya de pago).
Estas herramientas en la nube suelen disponer también de versiones para dispositivos móviles iOS y Android. Así podrás realizar algunos de estos ajustes desde tu teléfono, por ejemplo, compartir el resultado en tu ordenador, seguir haciendo correcciones en tu tablet… Todo mediante un flujo de trabajo muy «omnicanal».
En este grupo de herramientas podemos englobar soluciones como Canva, Easil, Crello o PicMonkey, por solo citar algunas.
Siguen la línea funcional de los editores gráficos antes mencionados, pero generalmente con características más escuetas. Tendrás a tu alcance replicar funciones básicas de los editores más populares, aunque estas plataformas están más pensadas para un uso intuitivo, ágil y sin muchas exigencias técnicas.
Así pues, es habitual que cambiar el tamaño de las imágenes sea una de las características incorporadas (pero no siempre). A su vez suelen incluir plantillas preparadas para propósitos varios (informes, redes sociales…) que pueden coincidir con las medidas que necesitas. Y también suelen dar acceso a algún banco de imágenes (como Pixabay), muy práctico si necesitas elementos gráficos para tus proyectos gráficos.
Conversores online instantáneos
La tercera vía la componen aquellas páginas que van directo al grano, ofreciendo soluciones para modificar el tamaño de una imagen. Encontrarás varias de uso gratuito donde solo haz de cargar la imagen y definir qué tamaño de salida quieres. ¿Fácil verdad? Aquí podemos encontrar soluciones como:
Con Befunky podrás redimensionar fácilmente cualquier imagen
Encontrarás muchas más alternativas. Solo debes hacer una simple búsqueda en Google.
Escoge el formato gráfico más adecuado
Sea cual sea la herramienta por la que te decantes, recomendamos probar a guardar el gráfico resultante en formato JPG y PNG, para escoger el que tenga el menor peso. Dependiendo del tipo de imagen, uno u otro ofrecerá resultados diferentes (el GIF puede considerarse también, aunque está en claro desuso).
Sin que se pueda considerar una regla inamovible, una imagen fotográfica suele ofrecer resultados más óptimos de tamaño en formato JPG, mientras que los gráficos vectoriales se llevan mejor con el PNG.
Extra: los gráficos con fondos transparentes
Cuando la imagen incluye píxeles transparentes, como sucede con muchos logos, lo normal es usar el formato PNG, que permite mantener esta propiedad… pero también puedes guardarlo en JPG en un caso en concreto: si el fondo en el que vayas a superponer la imagen en la web tiene un color plano, puedes añadir ese fondo a la imagen PNG y luego guardar el resultado en JPG. No siempre es lo más recomendado, pero el efecto final a ojos del usuario será el mismo. Cuando generes ambas imágenes comprueba cuál de las dos versiones pesa menos y úsala. ¿La pega? Si el día de mañana cambias el fondo en la página donde tengas este gráfico, te verás obligado a generar un nuevo JPG con un fondo adaptado.
Cuando el tamaño se torna una cuestión de principios
Tras estas recomendaciones podemos decir que la mayor parte del trabajo está hecho. Si eres poco exigente, ya puedes dejar de leer. Has conseguido tu objetivo principal. A saber: no ahogar tu servidor con exigentes peticiones de descargas de imágenes que consumirán más rápido tu ancho de banda (de excederte puedes toparte con un desagradable error al cargar la página), y los navegadores de quienes visiten tu web lo agradecerán.
Pero aún puedes ir más lejos…
Si eres de los que les gusta llegar al fondo y exprimir al máximo la optimización para asegurarse de que por ese lado tienes los deberes bien hechos, sigue leyendo. Porque disponer de la imagen al tamaño adecuado no implica que no pueda optimizarse más. Te vamos a explicar más métodos con los que seguir logrando imágenes hipervitaminadas.
Las soluciones descritas hasta ahora ofrecen pocas opciones para apurar más el peso del archivo. Photoshop por ejemplo permite guardar un imagen «para la web», en varias resoluciones, para ajustar su peso. Pero no siempre ofrece el resultado más optimizado. Y es que descubrirás que según qué herramienta elijas, el peso final de una misma imagen puede variar de forma sorprendente.
De modo que ¿cómo conseguir el menor tamaño posible para una imagen? Y todo ello sin perder calidad, claro. Superada la redimensión nos tenemos que centrar en la compresión.
Compresores online
Parece que la nube brinda soluciones para todo, y esta no iba a ser la excepción. Después de emplear cualquiera de las herramientas antes mencionadas, recomendamos pasar por una aplicación especializada en comprimir el fichero a su mínima expresión. Descubrirás que una imagen de 500 KB puede pasar a menos de 100. Magia potagia…
Para este cometido tenemos por ejemplo Kraken Image Optimizer. Aunque se trata de una herramienta online de pago (que también dispone de un plugin para WordPress), ofrece un apartado de uso gratuito aquí: Try Free Web Interface.
Al acceder a esta página la pantalla facilita tres modos de compresión:
- Lossy: Modo recomendado y donde el resultado final no puede distinguirse de la imagen original (aunque pierda información gráfica).
- Lossless: Si deseas retener el 100% de la información, aunque con menor pérdida de peso de Lossy.
- Expert: A medida, donde puedes elegir el nivel de calidad a mantener.
Eligiendo el modo Experto, dependiendo de si cargas un archivo JPG o PNG puedes establecer la calidad a mantener en la compresión, de 0 a 100. Con una calidad de 85 la imagen seguirá exactamente igual a la original y la reducción de peso es de más de 50%. No está mal, ¿eh?
Puedes cargar imágenes sueltas o decenas/cientos de fotos para hacer una conversión en lote, arrastrándolas sobre la interfaz. O bien subirlas desde tu cuenta de Box, Google Drive o Dropbox. La única limitación es que la imagen cargada no puede pesar más de 1 MB. El resultado comprimido se puede descargar uno a uno u optar por empaquetarlo en un ZIP (ideal cuando son muchas fotos).
Kraken no es la única solución que pone a nuestro alcance esta encomiable misión, pero llevamos tiempo utilizándola y no nos ha defraudado nunca. Otras opciones similares en el mercado son Compressor.io, Optimizilla o Tinypng, por ejemplo.
Plugins en tu CMS
Por un lado, si utilizas un CMS como WordPress para tu página web, existen plugins que se especializan en optimizar las imágenes cargadas en la biblioteca de medios. Podemos recomendarte estos tres:
- SmushIt: Uno de los plugins más conocidos y utilizados. Basta con instalarlo y ya empezará a comprimir las imágenes que considere que lo requieran. Es el más usado y en el que se basan otras herramientas similares.
- EWWW Imagen Optimizer: Funciona de la misma forma que SmushIt.
- CW Image Optimizer: Para comprimir las imágenes también hace uso de la API de Smush It, aunque lleva tiempo sin actualizarse, lo que le hace ser la menor recomendable de las opciones expuestas.
Servicio en alojamiento web
Dependiendo del hosting donde esté hospedado tu sitio web, puede que disponga de algún servicio dedicado a la optimización de imágenes. Esto es lo que sucede por ejemplo en Webempresa, que incluye en su plataforma la herramienta ImgOptimizer que basta con activar para optimizar los archivos gráficos. SiteGround también ofrece su plugins SG Optimizer que funciona en forma de plugin pero muy optimizado para esta plataforma.
Por otro lado, solo como apunte, podrías pensar que habilitar la compresión GZIP puede ayudarte, pero en cuestión de imágenes no tanto.
La compresión GZIP hace uso del algoritmo de «Deflate» para comprimir archivos con el fin de que tu web se cargue más rápido, y es 100% recomendable que la tengas habilidada en tu sitio web, pero no afecta a las imágenes.
Como habrás visto, el proceso de optimizar una imagen puede estar sujeto a ciertas variables. Depende de tus necesidades, tiempo, conocimientos… Pero lo que no cabe duda es que cuanto menos pese un fichero, mejor para todos. De ahí que aquí el tamaño si que importe. Y tanto.
Si te sirve de algo nuestra experiencia, generamos y exportamos las imágenes con un editor fotográfico genérico, las pasamos por Kraken y el resultado es el que se sube a nuestra plataforma. Allí tenemos habilitado el plugin SmushIt para asegurarnos de las imágenes están optimizadas al máximo. Para la imagen que ilustra este post hemos seguido este proceso y ha pasado de pesar 124 KB, a 64 (casi la mitad) tras pasar por Kraken, y bajando 😉
¿Qué método utilizas? ¿Nos recomiendas alguna alternativa que sea capaz de mejorar más los resultados sin perder calidad en los archivos gráficos? Déjanos tus comentarios y suscríbete a nuestra newsletter para estar al día de todo lo que tenga que ver con MarTech.
Deja tu comentario