Introducción
En este artículo vamos a hablar sobre como optimizar las imágenes de tu web y por qué debes hacerlo. Aunque para la mayoría de los desarrolladores, diseñadores y programadores pueda parecer obvio, la realidad es que no todos lo aplican y, sobre todo, para aquellas personas que comienzan en este mundo o simplemente solo estén haciendo su web, estos consejos y aclaraciones le pueden resultar de gran ayuda.
¿Por qué optimizar las imágenes de tu web?
Tendemos a pensar que nuestras webs, nuestros productos, nuestros artículos, se verán mejor cuanto mejor sea la fotografía que utilicemos y si, una fotografía o colección de las mismas de buena calidad ayudara a que sea así, pero, Aristóteles dijo “La virtud está en el término medio”. En nuestro caso, es mejor aún inclinar la balanza hacia el peso que hacia la calidad.
Cada vez se accede a internet más desde dispositivos móviles. Muchas de nuestras visitas vienen del usuario que se está tomando un café en un bar, que espera al autobús, que esta en el parque con los niños, que recibe un enlace por WhatsApp de un compañero, etc. Aunque pueda estar conectado a una red WIFI, estas son mas lentas que las cableadas. Si esta usando los datos de su móvil, depende de la velocidad de su operador, la cobertura que disponga, etc. Si un usuario tiene que esperar mas de X segundos, simplemente desistirá en la visita. ¿Quieres perder visitas que ya tenias aseguradas? No. La respuesta es no.
Tus paginas se van a ver principalmente en dispositivos móviles, monitores de tamaño estándar o incluso quizá en televisiones de 65”. No es necesario que la imagen tenga la calidad necesaria para una valla publicitaria. He visto imágenes de más de 10 Mb cuando con unos pocos Kb sobra. (Supongamos que la imagen de 10 Mb se optimiza a 100 Kb. Eso quiere decir que costaría aproximadamente lo mismo cargar 100 imágenes optimizadas que una que no).
SEO
El posicionamiento en buscadores u optimización de motores de búsqueda es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO (SearchEngineOptimization).
Wikipedia.
En resumen, el SEO es el posicionamiento de tu web en los resultados de búsqueda de los diferentes motores (Google, Bing, Yahoo, etc). El sueño de cualquier web es aparecer en la primera posición de estas búsquedas ya que se llevan más del 70% del tráfico. Si apareces el primero tienes prácticamente garantizado el éxito de tu web. El SEO es muy complejo y son muchos los algoritmos que se emplean, pero se resume a algo muy simple. Los buscadores quieren dar a sus usuarios el mejor resultado posible. El mejor resultado es el que más se ajusta a su búsqueda, el que mejor información tiene, el más cómodo para leer, etc., y muy importante, el que se da rápidamente.
Que tu web sea rápida en el proceso de carga no te garantiza las primeras posiciones de Google, pero que sea lenta si te asegura que no aparecerás tan siquiera cerca.
Mejora la experiencia de usuario
Puede que te des por vencido por ocupar la primera posición, de hecho, es tan difícil que se puede redondear a imposible dependiendo del nicho al que pertenezcas. ¿Pero querrás que el visitante que llegue a tu página se sienta cómodo no? Esto hará que permanezca en tu página, que mire más páginas de tu sitio, que recomiende la misma a sus amigos, que comparta tu web por redes sociales, etc. Eso es trafico y para eso creaste tu pagina.
Tipos de imágenes más usadas
La cantidad de formatos de imágenes es abrumadora. A continuación, os hablare de las más utilizadas. En algunos casos solo para descartarlas y en otros para que entendáis que tipo de imagen es y cuando puede ser recomendable utilizarla.
BMP
Conocidas como mapa de bits. Era un formato por excelencia de Windows ya que podía almacenar valores de 24 bits (16,7 millones de colores). Podríamos ver la imagen como una matriz de X por Y donde cada componente puede utilizar varios bytes. Descartar. Nada más que decir.
PNG
Es un formato de “compresión sin perdida”. Son bastante eficientes, aunque no las mejores. Son muy utilizadas para poner fondo transparente a la imagen y esto ha hecho que se utilicen mucho. Si necesitas un fondo transparente tienes que usarla, para el resto soy más partidario de JPG.
GIF
Imágenes animadas. Un video no es más que una sucesión de imágenes a una velocidad determinada. Un gif es parecido solo que el número de imágenes es muy inferior y el tiempo es más lento. Se utiliza para banner publicitarios, o como elemento decorativo (quizá no es la mejor opción decorativa).
Al ser una composición de varias imágenes su peso es mayor. Antaño eran muy utilizadas para animar las webs pero cada vez se usan menos (si no tenemos en cuenta los banner) y se han trasladado más a redes sociales, etc.
SVG
Imágenes vectoriales. Aunque hay que entrar en detalles podríamos decir que es el mejor formato. De hecho, Google lo recomienda.
Una imagen vectorial en realidad es una imagen hecha a base de “ecuaciones matemáticas”, es decir, a la hora de enviar una circunferencia no se envía un circulo si no un bucle con una ecuación del tipo X2 + Y2=R2.
Todas estas funciones se dibujan sobre el lienzo (el monitor o dispositivo utilizado), por lo que no hay pérdida de calidad se dibuje donde se dibuje. Esto la hace ideal.
Las pegas son que la imagen ha de ser procesada en el dispositivo del usuario (normalmente a través del navegador), con lo que si el dispositivo no posee mucha capacidad de cálculo puede verse mermado ante una cantidad de imágenes alta o de gran contenido.
Normalmente se hacen a través de programas como Photoshop, etc., que optimizan el código. Pero si se hacen a la vieja escuela corres el riesgo de que no optimice los recursos.
Inciso: Recuerdo un tirón de orejas de un profesor en la universidad ante un ejercicio en el que para dibujar una figura me pedían una función recurrente. Metí en el interior un par de variables que deberían estar fuera. Esto, con 50.000 iteraciones se comía la pila de sistema.
Normalmente se utilizan para logotipos e imágenes simples. Una fotografía de un paisaje con muchos detalles al final resulta muy cara
JPG /JPEG
Es el formato por excelencia. Aporta una calidad bastante buena y un peso aceptable. Para mi suele ser la mejor opción.
Trucos de optimización
Veamos ahora algunos trucos y buenas prácticas para tus fotografías.
Tamaño
Esto no es un verdadero truco sino más bien una última aclaración a tener en cuenta.
La mayoría de las fotografías que utilizamos las introducimos en cajas o divs que ocupan un determinado porcentaje de la pantalla. Rara vez superan los 600px u 800px. Entonces… ¿Por qué usar una imagen de 2000px? Una imagen de 2000px ocupa más espacio que una de 1000px. Optimiza tus imágenes a un tamaño apropiado para el uso que quieras darle.
He llegado a ver imágenes de gran tamaño para hacer iconos. Además, estas imágenes tienen que ser procesadas por el navegador para meterla en un espacio de 50 x 50. Hay infinidad de formas de transformarlas. Te lo cuento en breve.
Recorte y captura de pantalla
Una manera muy sencilla y bastante efectiva es abrir la imagen en tu ordenador. Puedes hacer zoom para ampliar una zona determinada o hacerla más pequeña. Hasta ahora no has conseguido nada, pero todos los sistemas operativos tienen alguna aplicación nativa para capturar una zona determinada (Recortes en Windows, Captura de pantalla en Ubuntu, etc.) Al capturar una zona no solo podrás escoger la zona que te interese al tamaño que quieras, si no que, al guardar la captura, esta reducirá notalmente el peso. Además, te dará diferentes opciones de guardado según el formato que más te convenga. Una fotografía tomada con un móvil normal (ni siquiera hablo de móviles de alta gama o cámaras profesionales), puede ocupar varios Megabytes. La captura que tú hagas de esta forma puede quedarse en un par de cientos de de Kilobytes. La ganancia es muy significativa.
Cuando enviamos una imagen o video por whatsApp, esta es comprimida para facilitar la transmisión de la misma y, además, no necesitamos 8K para verlo en una pantalla de 6”. En muchas ocasiones cuando mis clientes me envían fotografías y les pido que lo hagan a través de whatsApp se sorprenden, pero ya me dan un paso hecho.
Software y Compresores Online
Existen muchos programas y páginas online que se encargaran de redimensionar, comprimir e incluso cambiar el formato de una imagen. El software da mejores resultados, pero suele ser más complejo de usar que una página. Podemos mencionar por ejemplo CANVAS (Es online. Aunque al menos yo no lo considero una página online sino un software en línea). Te permite subir una imagen y ponerla sobre un lienzo del tamaño que hayas decidido, puedes ajustarla para recortarla y una vez hecho, descargarla en diferentes formatos. De esta forma también reducirás mucho el tamaño.
De Photoshop poco hay que decir, es un software de pago muy potente, si solo lo quieres para quitar peso a tus imágenes te saldrá excesivamente caro. Si lo utilizar para más cosas y has pagado la licencia estoy seguro que ya sabes más que yo de lo que puedes hacer con él.
Paginas Online hay muchas, una interesante es PIXLR.com, es muy intuitiva y fácil de usar. Solo tienes que teclear en google y te aplacerán mil. La verdad es que no suelen especialmente efectivas, y dependiendo de la imagen en particular, y sin seguir un patrón definido, algunas funcionan mejor que otras, por lo que no te queda más remedio que probar en varias y elegir el mejor resultado. Un poco pesado, pero todo suma. Esta última parte la dejaría como último paso.
Conclusión
Cada caso es un mundo, por ejemplo, una página web de un estudio fotográfico requerirá que ciertas imágenes tengan una calidad superior para que el visitante pueda ver los matices del artista, aun así, hay que buscar un punto de equilibrio.
Como norma general para la mayoría de los casos no necesitas una calidad excelente y es recomendable que sea lo más ligera posible. (No busquéis escusas, las tiendas online no necesitan mucha calidad. Para vender unas zapatillas hay que mostrar las zapatillas, no es necesario que haciendo zoom podamos ver las moléculas del tejido). Por lo que:
Elige el formato que necesitaras. Si la crea o retoca un profesional y es una imagen “simple”, intenta que sea en formato svg (Ten cuidado con los profesionales. Son necesarios, pero no hay que olvidar que también son artistas, quieren hacer su obra perfecta y les cuesta tener en cuenta el peso de la imagen).
Si tiene que ser transparente, svg o png.
No uses gif si no son necesarios.
Ten en cuenta el tamaño, puedes tener la misma en diferentes tamaños y dependiendo de donde vaya a ser mostrada usar una u otra (WordPress hace eso). Después de esto mira mucho el peso. Utiliza los trucos que te he comentado antes., como los recortes, etc., (salvo las svg, estas no las mejoraras así).
Y por último mira la posibilidad de bajarle el peso a través de alguna herramienta online.
Nota: Digo por ultimo porque una imagen de 10Mb al pásala por una de estas herramientas se puede reducir un 50% (¡¡Una burrada!! No se dan nunca estos valores), quizá, si a esta ya le has aplicado lo anterior solo te la reduzca un 10%, pero ten en cuenta que un 50% de 10Mb te dejaría la imagen a 5Mb. Si aplicas primero los trucos anteriores la imagen de 10Mb la puedes haber transformado a 500Kb antes de pasarle el “compresor” y con el 10% del mismo se te queda en 450Kb.
Con esto quiero decir que estas opciones no son excluyentes entre sí, sino que más bien una son una secuencia.
Nota final: Aquí hablo para de las imágenes de forma general independientemente de si usas un CMS o no. E independientemente de si lo usas o no, deberías acostumbrarte a hacer esto si o si. Si por ejemplo usas WordPress puedes seguir haciendo más cosas. Te dejo un enlace aquí para que sigas optimizando tus imágenes en WordPress. ¡¡¡ Ojo!!!, he dicho para que SIGAS optimizando, lo dicho más arriba es lo verdaderamente importante.