Una de las cosas que ayudan a que una página cargue rápido es optimizar las imágenes. Si te preguntas si sería mejor no poner imágenes o reducirlas al mínimo, la respuesta es: Ni lo pienses; debes poner imágenes en tus artículos y cuantas más mejor.
Las personas somos visuales, es nuestro principal sentido, las imágenes son una herramienta poderosa para apuntalar nuestras publicaciones.
En este post te enseñaré las técnicas y trucos para hacer que tus imágenes sean lo más livianas posibles y puedas recrearte con ellas.
Contenido del post
Optimizar las imágenes ¿Qué es eso?
Es hacer que las imágenes que colocamos en la internet tengan el mejor peso posible sin perder calidad. Esto es, lograr que una imagen de 2 megabytes se reduzca a 100 kilobytes y se vea igual de bien.
Un megabyte es igual 1024 kilobytes. Si haces el cálculo con el ejemplo anterior se reduce su peso en más del 96%. Esto es optimización 😀 .
Esto es un ejemplo extremo, ya que la mayoría de quienes trabajan en la web saben esto y procuran no colocar imágenes de este tamaño, a menos que se trate de un sitio sobre fotografía (¡Hey! No te sientas mal si has cometido este error, que para eso es este post 😉 ).
Se trata de ganar algunos kilobytes en cada imagen, lo que repercute en una ganancia de segundos en la carga de una página.
Yo lo expreso así: imágenes ligeras = usuarios más felices 🙂
Muchos alegan que con las conexiones a internet cada vez más rápidas esto es un factor menos determinante que antes; tienen razón, en parte, pero es importante recordar que la internet es global al igual que su público, no todos tienen tan buenas conexiones, sin contar con que el espacio de almacenamiento de los servidores no es limitado.
El tamaño importa
Uno de los factores que inciden en el peso de una imagen, es el tamaño del mismo, esto se mide en pixeles por lo general. Se expresa en: ancho por alto.
Una imagen pequeña, por ejemplo: 10 x 20, debería pesar menos que una de 500 x 600. Es cuestión de lógica. Mantén este principio en mente siempre: a menor tamaño menor peso. Aquí influyen otros factores, como el tipo de imagen, que explicare más adelante.
Las páginas webs, se definen por áreas, que a su vez tienen columnas. Estas tienen un ancho específico que se define cuando se diseñan.
Para optimizar las imágenes por el tamaño es importante este principio: no pongas imágenes más anchas que el de tus columnas, hacerlo es un desperdicio.
WordPress, tenderá a adaptar la imagen al ancho de las columnas. Esto se hace para no descuadrar el diseño.
Por ejemplo: en este blog, la columna principal (donde lees esto 🙂 ) tiene un ancho disponible para el contenido de 721 pixeles. Mis imágenes las hago para que no sobrepasen este tamaño.
Este parámetro lo encontraras en WordPress en el editor de texto: Añadir objeto > Ajustes de visualización de adjuntos > Enlazado a > Archivo multimedia. También en las imágenes ya insertadas, seleccionándolas y haciendo clic en Editar (imagen de lápiz)
Con respecto a la altura, es un factor con el cual debes jugar y que no es limitante, más allá de la estética.
¿Cómo se cual es el tamaño de las columnas?
Un truco para saber el ancho de la columna donde se coloca la imagen, es con la Development Tools, esta viene de serie con los navegadores modernos. Haz lo siguiente:
Aprieta la tecla F12 en la pagina que quieras verificar, para que aparezca la herramienta, luego aprieta Ctrl + Shift + C y selecciona (sin hacer clic) cualquiera de los párrafos de un artículo que hayas publicado, cuando pases por encima te mostrara con números el ancho y alto (esto es válido al menos para Chrome y Firefox)
Los tipos también importan
Otro factor que influye para optimizar las imágenes es el tipo de imagen que usemos.
En la internet se usan típicamente tres tipos de formatos de imágenes: JPG, PNG y GIF. Cada uno tiene sus cosas buenas y malas; nuestra tarea es usarlos de acuerdo a nuestras necesidades valiéndonos de sus virtudes y debilidades.
Esto no es una ciencia exacta, pero conociendo las reglas que dominan a cada tipo de archivo podremos obtener el menor tamaño de imagen.
JPG
Es uno de los tipos de archivos más dominantes en la internet. Se recomienda para imágenes complejas, como las fotografías.
Este tipo de formato soporta millones de colores por lo que si tienes imágenes con muchos colores, degradados, fotos, pinturas, es el tipo por el que deberás optar la mayoría de las veces.
Puedes elegir la calidad que tendrá al momento de guardarla, representada por lo general del 0 al 100, siendo este ultimo la mejor calidad sin perder mucho detalle.
Características:
- Recomendable para fotos e imágenes complejas.
- Acepta millones de colores.
- Equilibrio entre calidad y peso.
- Se generan imágenes de mala calidad si se comprime en demasía.
- Buena para degradados.
Como punto negativo, es que cuando aumentamos la compresión (menor calidad) tiende a tener mucho ruido. Esto lo podrás notar en los puntitos o pixelado que aparecen. A menor peso del archivo la calidad disminuye notablemente.
Dependiendo del programa que uses, prueba con la compresión alta (high) que no es menor a 60, este es un promedio que generalmente nos da una buena calidad con un peso equilibrado.
PNG
Es un formato de imagen más moderna que JPG, admite también millones de colores con la ventaja de que no tiene pérdida de calidad.
Tiene dos vertientes: 8 bits y 24 bits. Con el primero podemos guardar hasta 256 colores, el peso es menor. Con 24 bits, el formato PNG soporta color verdadero, hasta 16 millones de colores pero con un peso mayor incluso que el JPG.
A diferencia del formato JPG acepta transparencia, por lo que es ideal para el diseño web. Un ejemplo es que podemos crear imágenes con fondo trasparente, para de esta manera no estar atados al color de fondo de la pagina web; en los logotipos es una técnica muy usada.
Para imágenes vectoriales uso PNG de 8bits. Este tipo de imágenes son muy usadas en la web actualmente, tienen por lo general una paleta de color más limitada y con colores planos. Con un tamaño de 720 x 480 pixeles no llegan a pesar más de 10 kilobytes. Esta misma imagen con 24 bits sobrepasan los 100 kilobytes :O .
Características:
- Excelente calidad de imagen pero con un peso mayor al del JPG.
- Ideal para transparencias.
- Admite millones de colores.
- El PNG 8 bits es ideal para las imágenes vectoriales, muy de moda actualmente.
GIF
Este veterano formato nación en 1987. Acepta un máximo de 256 colores y acepta transparencia, pero son chapuceras si las comparamos con las de PNG.
Si quieres imágenes con fondo transparente mejor usa PNG de 8 o 24 bits, son más suaves y se ven mejor.
El formato GIF había estado un tanto olvidado en los últimos años, pero con el auge de los memes ha tenido un segundo aire 😆 , esto es gracias a que acepta animaciones. Une unos cuentos fotogramas y ya tienes tu animación.
Características:
- Hasta 256 colores.
- Admite transparencias, aunque limitadas.
- Acepta animaciones. Es el Rey en este segmento.
Conociendo las características de los formatos, podrás usar el que se adapte a tus necesidades con el menor peso posible. Prueba unos y otros hasta obtener el adecuado.
Sírvete de las ventajas de cada formato para minimizar el peso.
¿Qué programa me recomiendas?
Existen infinidad de programas para edición y tratamiento de imágenes. El más famoso sin duda es Photoshop, pero cuesta algunos cientos de dólares. Si tienes el dinero, no debes dudarlo: Cómpralo.
Photoshop tiene una legión de blogueros, youtubers, sitios especializados, fans, entre otros, que ofrecen tutoriales por internet, y lo mejor: son gratis la mayoría. Es el estándar de la industria.
Si no cuentas con el dinero, o eres más de lo gratis 😎 , aquí te dejo un listado rápido de los programas que puedes usar para este cometió, sin gastar nada. El orden de los factores no determina lo bueno que puede ser:
- Gimp: es un tanto complejo, con una curva de aprendizaje alta, pero si le agarras la vuelta puedes hacer lo mismo que con el Photoshop.
- Krita: este me gusta bastante, con una interfaz muy parecida a Photoshop. Lo malo es que es bastante limitado en las opciones de optimización de imágenes.
- Pixlr: un servicio online para editar tus fotos, lo recomiendo. Tiene capas, herramientas de edición, filtros, efectos.
Por último te dejo estos dos tips:
- Optimizilla. Una vez tengas tus imágenes listas, súbelas a este servicio que optimizarlas aun más. Te sorprenderá cuantos kilobytes te ahorraras.
- Instala el plugin WP Smush, optimizara tus imágenes al subirlas al WordPress, en este articulo te hablo de ella.
Para concluir, déjate decirte que esto de optimizar imágenes es bastante extenso y variado, practica a probar con los formatos, y veras como rápidamente te convertirás en un experto. Si no, ya sabes que en los comentarios puedes dejar las dudas.
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.
Las imágenes, sobre todo el tema de compresión es mi talón de Aquiles. Últimamente estoy usando además de RIOT, jpeg.io, pero en según que casos me genera error. He probado ahora mismo online Optimizilla y me parece realmente formidable y rápido. Es más con imágenes ya comprimidas con RIOT las optimiza aún más. ¡Genial de verdad! Mil gracias.