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
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.
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.
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)
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.
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:
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.
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:
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:
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.
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:
Por último te dejo estos dos tips:
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.
Hacer que Google tome en cuanta tus entradas y las posicione bien en su buscador…
Wordpress recién instalado funciona de maravilla, va rápido como un cohete y es tan sencillo…
El plugin Jetpack es la navaja suiza de Wordpress: ¡Todo en uno 🤩!. Tiene tantas…
Contact Form 7 es sin duda uno de los mejores plugins para enviar Formularios en…
Elementor es el mejor constructor de páginas web de Wordpress en la actualidad. Es sencillo…
Lo he dicho varias veces, el tema OceanWP de Wordpress es uno de los mejores…