Divulgación: este contenido es compatible con lectores, lo que significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión.
La optimización de imágenes es el proceso de reducir el tamaño de archivo de una imagen sin sacrificar su calidad. Si su sitio web tiene problemas de rendimiento, incluidos tiempos de carga de página lentos, la optimización de imágenes puede ayudar a resolver sus problemas.
Las imágenes y otro contenido visual son activos valiosos para todos los sitios web. Ya sea que esté utilizando una imagen para dividir el texto en una publicación de blog, exhibir sus productos o atraer la atención en una página de destino, los casos de uso y las posibilidades son aparentemente infinitos.
El problema de agregar imágenes a su sitio web es el tamaño del archivo. Las imágenes no optimizadas son grandes, lo que significa que tardan más en cargarse en la pantalla. Estos retrasos pueden generar altas tasas de rebote y una mala experiencia de navegación para sus visitantes.
Además de la experiencia del usuario, las velocidades de carga de página inadecuadas tienen un impacto directo en el SEO. Google y otros motores de búsqueda penalizan los sitios con tiempos de carga de página deficientes.
Al tomarse el tiempo para optimizar sus imágenes antes de subirlas a su sitio web, se beneficiará de cargas de página más rápidas, menos rebotes y clasificaciones más altas en los SERP.
La optimización de imágenes para su sitio web agregará algunos pasos adicionales a su proceso actual. Afortunadamente, los pasos no deberían llevar más de unos minutos, como máximo. El costo real para optimizar las imágenes será gratuito para la mayoría de ustedes.
Hay docenas de herramientas gratuitas de optimización de imágenes en el mercado hoy en día, pero se puede decir que TinyPNG es la mejor. Esta plataforma basada en la web se ha utilizado para optimizar más de mil millones de imágenes.
TinyPNG le permite optimizar hasta 20 imágenes simultáneamente, hasta 5 MB cada una, 100% gratis. Para optimizar más de 20 imágenes y extender el límite de tamaño de archivo a 75 MB, el plan TinyPNG Pro comienza en $25 por año por usuario.
Para los sitios de WordPress, incluso hay un complemento de WordPress TinyPNG que optimiza automáticamente las nuevas imágenes cargadas en su CMS. Este complemento reduce drásticamente la cantidad de tiempo que lleva pasar por el proceso de optimización de la imagen.
Aquí hay un tutorial detallado del proceso paso a paso requerido para optimizar las imágenes del sitio web. El proceso que se describe a continuación asume que no está utilizando un complemento de WordPress para recibir asistencia.
Incluso si está utilizando un optimizador de imágenes o una herramienta de compresión, hay algunas cosas que debe hacer antes de ejecutar esa imagen a través de la compresión.
En primer lugar, realice las modificaciones o mejoras necesarias en la imagen. Cosas como filtros, recorte, ajustes de contraste, exposición, saturación y otras ediciones deben manejarse antes de continuar. Puede continuar usando cualquier software de edición de imágenes con el que se sienta cómodo para este paso.
A partir de aquí, es importante que guardes la imagen correctamente. Para la mayoría de las imágenes de sitios web, tendrá que considerar dos opciones principales: PNG y JPEG.
En general, los PNG funcionan bien para imágenes que no tienen mucho color. Si una imagen tiene muchas líneas, íconos o nitidez, PNG también será una mejor opción. La compresión JPEG podría crear algunos problemas de contraste en este escenario.
Una de las principales ventajas de utilizar archivos JPEG es que podrá elegir la calidad de la imagen antes de pasarla por una herramienta de compresión.
Aquí hay un ejemplo usando Preview, el visor de imágenes predeterminado en una Mac:
Si exporta imágenes como un archivo JPEG, puede ajustar la calidad simplemente deslizando la barra. Al reducir la calidad de la imagen, reducirá simultáneamente el tamaño del archivo.
A menos que sea un fotógrafo profesional, la calidad JPEG de alrededor del 40% al 50% debería estar bien para la mayoría de ustedes. Por ejemplo, si está cargando fotografías a su cartera de la boda de un cliente, probablemente le convenga sacrificar el tamaño del archivo por la calidad de la imagen.
Además de las ediciones y la elección del formato de archivo correcto, también deberá preparar las dimensiones correctas de la imagen antes de continuar con el siguiente paso.
Piense en dónde y cómo se utilizará la imagen en su sitio web. Por ejemplo, las dimensiones de una imagen utilizada en una publicación de blog probablemente serán diferentes a las del ícono de una imagen en la página de un producto.
Si el área de contenido de su blog tiene 700 píxeles de ancho, las dimensiones de una imagen aquí nunca deben ser mayores de 700 píxeles.
Cada vez que cambie el tamaño de una imagen, asegúrese de habilitar la opción para escalar la altura y el ancho proporcionalmente. De lo contrario, la imagen se distorsionará.
Este es un ejemplo de un archivo JPEG de 2634 x 2718 píxeles y 1,8 MB:
Al cambiar el ancho a 700 píxeles, la altura se escala automáticamente a 722 píxeles. Esto también reduce el tamaño del archivo.
Una vez que haya guardado la imagen con el formato de archivo y las dimensiones correctos, puede continuar con el siguiente paso.
Ahora es el momento de comprimir la imagen. La forma más fácil de comprimir imágenes es usando una herramienta en línea.
Hay innumerables opciones para elegir. Pero para nuestros propósitos aquí hoy, vamos a usar TinyPNG.
Miles de empresas de todo el mundo confían en TinyPNG para la compresión de imágenes. Esto incluye grandes marcas como Samsung, Walmart, Sony, Lego y Bank of America. Como se mencionó anteriormente, puede usar este TinyPNG de forma gratuita para optimizar imágenes para su sitio web.
Comience navegando a la página de inicio de TinyPNG. Desde aquí, simplemente puede arrastrar y soltar su archivo de imagen en el cuadro en la parte superior de la pantalla.
La herramienta comprimirá automáticamente cualquier archivo de imagen que cargue sin que se requieran pasos o acciones adicionales de su parte. Una vez que se complete el proceso, simplemente haga clic en el botón descargar para recuperar la imagen recién comprimida.
En el ejemplo anterior, TinyPNG tomó un archivo JPEG de 534 KB y lo comprimió en un 86 %, reduciendo el tamaño del archivo a solo 76 KB.
¡La imagen original con la que comenzamos antes del primer paso era de 6 MB! Este es un archivo que sería demasiado grande para comprimir usando el servicio gratuito de TinyPNG.
Pero después de tomarnos el tiempo de guardarlo como JPEG, ajustar la calidad y cambiar las dimensiones, nos preparó para el éxito con la compresión.
Ahora, supongamos que acabamos de cambiar la calidad del JPEG inicial sin ajustar las dimensiones. Si vuelve al paso uno, verá que esto redujo el tamaño del archivo a 1,8 MB (todavía significativamente menos de 6 MB).
Si ejecutamos ese archivo a través de TinyPNG, se comprime a 446 KB, casi seis veces más grande que nuestro archivo de 76 KB para el que cambiamos las dimensiones.
Por eso es tan importante la preparación en el primer paso. Si salta directamente a la herramienta de compresión, todavía está dejando mucho sobre la mesa en términos de cuánto puede optimizar la imagen.
La razón por la que recomendamos tanto TinyPNG es porque la diferencia en la calidad de la imagen es imperceptible a simple vista. Eche un vistazo a este ejemplo que compara dos PNG transparentes antes y después de la compresión:
¿Notas alguna diferencia? No lo creo.
Este paso se verá un poco diferente para todos. Todo depende del CMS que esté utilizando para potenciar su sitio web.
Los usuarios de WordPress tendrán una interfaz diferente a la de Magento, Shopify, Drupal, Joomla, BigCommerce, etc. Dado que WordPress es el CMS más popular del mundo, y eso es lo que usamos para ejecutar nuestro sitio aquí en Webinpixels, lo usaremos como el ejemplo para este paso.
Navegar a Medios de comunicación en el lado izquierdo de su tablero de WordPress. Luego seleccione Agregar nuevo y arrastre y suelte la imagen o seleccione un archivo de su computadora.
Una vez que se ha agregado una imagen a su biblioteca de medios de WordPress, es fácil insertarla en publicaciones de blog o páginas de destino en su sitio. Alternativamente, puede completar este proceso en tiempo real mientras crea contenido nuevo en su sitio.
Por ejemplo, supongamos que está escribiendo una nueva publicación de blog en WordPress. Escribir el texto y luego regresar e insertar imágenes más tarde puede no funcionar bien para su proceso.
Dado que el proceso de optimización de la imagen solo lleva uno o dos minutos, puede realizar los primeros dos pasos cada vez que llegue a un punto en la publicación de su blog que requiera una imagen.
Luego simplemente haga clic en el Agregar medios en el post y sube la imagen sin salir del blog.
Si tiene ganas de alejarse de la publicación para ocuparse de la optimización de la imagen que distrae su flujo de trabajo de escritura, está bien. Solo no olvides agregar las imágenes cuando termines de escribir.
Recuerde por qué estamos optimizando las imágenes en primer lugar: estamos tratando de mejorar la velocidad de carga de la página.
Además de la optimización de la imagen en sí, puede llevar este concepto un paso más allá alojando las imágenes optimizadas de su sitio web en una CDN (red de entrega de contenido).
En lugar de almacenar las imágenes en sus propios servidores, las CDN tienen redes ubicadas estratégicamente en todo el mundo. Por lo tanto, los visitantes del sitio web recibirán imágenes en su pantalla desde un servidor que esté más cerca de ellos, geográficamente hablando.
Por ejemplo, supongamos que los servidores de su sitio web están ubicados en los Estados Unidos. Si un usuario en Europa llega a su sitio, la CDN puede usar un servidor que se encuentra más cerca de ese visitante específico, lo que en última instancia aumenta la velocidad de carga de la página.
Tinify CDN es la red de entrega de contenido de TinyPNG. Entonces, si está utilizando TinyPNG para optimizar sus imágenes, es natural considerarlas también como su proveedor de CDN.
Si bien una CDN no reemplaza su servicio de alojamiento web, puede quitarle una carga significativa a sus servidores.
Tinify CDN comienza en $ 15 por mes. Pero ese plan realmente solo se adapta a sitios web personales y pequeños blogs.
La mayoría de ustedes deberían suscribirse al paquete Business, como mínimo. Este plan comienza en $ 69 por mes y puede probarlo gratis durante 14 días.
A estas alturas, ya ha optimizado las imágenes para su sitio web. Y aunque no hay nada que pueda hacer para optimizar más la imagen, todavía hay pasos que puede seguir para asegurarse de que sus páginas se carguen lo más rápido posible.
Los complementos de carga diferida son su mejor opción aquí.
El concepto detrás de la carga diferida es simple. Las imágenes que no están en el campo de visión no se cargan hasta que un visitante se acerca a esa parte de la página.
Por lo tanto, las imágenes en la parte inferior de su página no se cargarán al mismo tiempo que una imagen en la parte superior de la página. Este consejo aumentará significativamente la velocidad de carga de su página, especialmente para páginas con múltiples imágenes.
Los ejemplos de complementos populares de carga diferida incluyen:
Para aquellos de ustedes que desean llevar la estrategia de optimización de imágenes de su sitio web al siguiente nivel, estos complementos harán el trabajo.
Ahora que domina la optimización de imágenes para su sitio web, es hora de centrarse en otras formas de mejorar el rendimiento de su sitio web.
Consulte nuestra guía sobre las mejores formas de acelerar su sitio web y mejorar las conversiones. Estos consejos van más allá de la optimización básica de imágenes.
También debe aprender a borrar su caché en WordPress. Esta guía de cinco pasos es extremadamente útil para los principiantes de WordPress que buscan formas de mejorar el rendimiento de su sitio. Es especialmente útil para sitios web con muchas imágenes.
