Las imágenes son muy importantes para fomentar la participación, añadir interés y romper lo que de otro modo sería un muro de texto.
Sin embargo, las imágenes suponen un reto. Suelen ser archivos grandes que pueden ralentizar la velocidad de carga de la página.
Dado que Google y la mayoría de los usuarios de la web prefieren tiempos de carga más rápidos, esto es algo que debemos evitar absolutamente.
Entonces, ¿cómo puede incluir imágenes en su sitio web WordPress sin ralentizarlo?
Optimizando sus imágenes.
Vamos a resumir qué es la optimización de imágenes, cómo funciona y cómo puede optimizar las imágenes de su sitio web de WordPress con o sin un plugin.
¿Qué es la optimización de imágenes?
La optimización de imágenes consiste en reducir el tamaño de los archivos de imagen sin perder calidad. Lo ideal es presentar imágenes de alta calidad en su sitio web sin ralentizar las páginas con archivos de gran tamaño.
Todo el mundo debería prestar especial atención a la optimización de imágenes porque es uno de los formas más comunes de aumentar la velocidad de un sitio web.
Lo bueno de la optimización de imágenes es que no requiere conocimientos de desarrollo, por lo que es fácil de conseguir para cualquier propietario de un sitio web.
Puedes hacer un seguimiento de cada imagen que subas a tu sitio y asegurarte de ajustarla y redimensionarla manualmente, o puedes utilizar un plugin que optimizará todas las imágenes para usted.
Ventajas de optimizar las imágenes
La optimización de imágenes consiste en reducir el tamaño de los archivos de imagen sin perder calidad. Lo ideal es presentar imágenes de alta calidad en su sitio web sin ralentizar las páginas con archivos de gran tamaño.
Todo el mundo debería prestar especial atención a la optimización de imágenes porque es una de las formas más comunes de aumentar la velocidad de un sitio web.
Lo bueno de la optimización de imágenes es que no requiere conocimientos de desarrollo, por lo que es fácil de conseguir para cualquier propietario de un sitio web.
Optimizar las imágenes tiene algunas ventajas clave. Mejora los tiempos de carga de la página, mejora la experiencia del usuario y puede mejorar el SEO de su sitio web.
Mejora el tiempo de carga de las páginas
Como decíamos al principio, la mayoría de los usuarios prefieren los sitios web que se cargan rápido. Eso es especialmente cierto para el creciente número de personas que utilizan teléfonos para navegar por la web.
Todos somos personas ocupadas que tenemos muchas cosas que hacer y toleramos poco la lentitud de las páginas web.
Según Unbounce, las páginas que se cargan más rápido de dos segundos tienen una tasa media de rebote de 9%, mientras que las páginas que tardan cinco segundos en cargarse tienen una tasa de rebote de 38%. Esto se traduce en un menor compromiso de los usuarios y menos tasas de conversión.
Mejorar la experiencia del usuario
Los tiempos de carga más rápidos garantizan que los usuarios puedan acceder a las páginas rápidamente y participar de inmediato.
Si les hace esperar, corre el riesgo de que se aburran y se vayan a otro sitio.
Si sus páginas están diseñadas para convertir, captar clientes potenciales o vender, ¡cada visitante perdido es un ingreso perdido!
Mejorar el SEO del sitio web
Optimización de imágenes mejora su posicionamiento SEO. ¿Cómo es eso? Es cosa de Google. A partir de 2010, Google anunció oficialmente que la velocidad de la página desempeñará un papel importante en el algoritmo de clasificación.
Por lo tanto, si tiene un sitio web lento, sus posibilidades de ver su sitio en los primeros puestos de las SERP disminuyen.
Incluso 12 años después, esa misma medida de clasificación de velocidad sigue siendo de vital importancia para la clasificación de Google de su sitio web.
Cuanto más rápidas sean sus páginas, mejor se clasificarán. Cuanto más lentas, peor.
La optimización de imágenes puede hacerse manualmente o con una herramienta que se encargue de todo el trabajo duro por ti en modo automático.
Más adelante, hablaremos de cómo puede optimizar las imágenes de WordPress automáticamente y evitar el trabajo extra de hacerlo usted mismo.
Tipos de optimización de imágenes
Hay tres formas principales de optimizar una imagen para obtener el mejor rendimiento: cambiar el formato del archivo, comprimir el archivo de imagen y cambiar las dimensiones de la imagen.
Cambiar el formato de archivo de imagen
Las imágenes suelen tener tres formatos principales: PNG, JPEG o GIF. Cada uno de ellos funciona en páginas web, pero son ideales para tipos específicos de imagen.
PNG - Los archivos .png son ideales para imágenes de alta calidad, pero son archivos más grandes. El formato PNG es mejor para imágenes de menor resolución, como banners, infografías o capturas de pantalla.
JPEG – Archivos .jpg o .jpeg son muy comunes en Internet, ya que se pueden comprimir de forma eficaz, haciéndolas mucho más pequeñas de lo que serían de otro modo. Los JPEG son útiles para páginas web, blogs e imágenes de productos.
GIF - Los archivos .gif son otro formato de archivo habitual en Internet. Se utilizan sobre todo para imágenes sencillas o animaciones, ya que su formato de 8 bits limita el color y el detalle. Los GIF son útiles para añadir imágenes a los contenidos y para ilustraciones o gráficos básicos.
Compresión de imágenes
Compresión de imágenes utiliza un algoritmo para reducir el tamaño de los archivos de imagen. Dependiendo de si el formato del archivo de imagen es con pérdida o sin pérdida, el algoritmo eliminará los datos innecesarios del archivo de imagen.
La compresión con pérdidas reducirá la calidad de la imagen al eliminar datos y, al mismo tiempo, reducirá significativamente el tamaño del archivo.
La compresión sin pérdidas comprime los datos de la imagen en lugar de eliminar datos del archivo.
Los archivos PNG y JPEG pueden ser con o sin pérdidas en función de la imagen de origen, mientras que el GIF utiliza compresión sin pérdidas.
Cambiar las dimensiones de la imagen
Cambiar la dimensión de la imagen es el último método para optimizarla.
Cuanto mayor es la imagen, más datos contiene y, por tanto, mayor es el archivo. Reducir el tamaño de la imagen al requerido en la página reduce al máximo ese tamaño de archivo.
Le recomendamos que ajuste el tamaño de sus imágenes a las dimensiones deseadas utilizando un editor de imágenes antes de subirlas a WordPress. También puedes optimizar y comprimir las imágenes antes o después de subirlas.
Cómo optimizar las imágenes de WordPress
En esta guía, aprenderemos a optimizar las imágenes de WordPress a través de dos métodos.
- Cómo optimizar manualmente las imágenes de WordPress
- Cómo optimizar imágenes con un plugin de WordPress
Vamos a sumergirnos.
Cómo optimizar las imágenes para el rendimiento web
Así que ahora que ya sabes un poco más sobre la optimización de imágenes y en qué consiste, vamos a ponernos manos a la obra.
Vamos a tratar la optimización manual de imágenes, el uso de Photoshop y el uso de una herramienta en línea.
Optimizar imágenes manualmente
Si te gusta hacerlo tú mismo, puedes optimizar manualmente todas las imágenes que utilices en tu sitio web de WordPress.
Tú mismo puedes redimensionar y recortar las imágenes antes de subirlas. Es importante que primero averigües el tamaño máximo de visualización de tus imágenes para no superar el límite de tamaño.
El tamaño máximo de visualización es, en realidad, la mayor resolución con la que se puede mostrar una imagen en un sitio web.
Dependiendo de a quién preguntes, será de unos 1200 x 628 píxeles para las imágenes de cabecera y de entre 640 x 480 y 1024 x 768 para las imágenes estándar.
Optimización de imágenes con Photoshop
Como Photoshop es uno de los editores de imágenes más populares, vamos a optimizar manualmente una imagen utilizándolo.
- Abra Photoshop y seleccione Archivo > Abrir
- Selecciona tu imagen para que se cargue en Photoshop
- Seleccione Imagen > Tamaño de la imagen en el menú superior
- Establezca la altura y la anchura deseadas para la imagen
- Fije el Resolución en el mismo menú
- Seleccione Archivo > Exportar > Guardar para Web
- Seleccione JPEG en el menú
- Establezca un valor de calidad de imagen de entre 40 y 60 (puede ser necesario experimentar)
- Establecer Progresiva y Incrustar perfil de color a Sí
- Convertir a sRGB y guardar el archivo
Optimización de imágenes con herramientas en línea
Hay una serie de herramientas en línea que pueden realizar la optimización de imágenes. Suelen ser rápidas e indoloras de usar y son una alternativa viable si no tienes un editor de imágenes.
Una herramienta en línea es Optimizilla.
- Visite el sitio web de Optimizilla
- Arrastra tu imagen al recuadro del centro y la optimización se realizará automáticamente
- Seleccione Descargar dentro de la imagen para descargar la imagen optimizada
Verá un porcentaje dentro de la imagen cuando esté optimizada. Este es el porcentaje en que se redujo el tamaño del archivo. Cuanto mayor sea el porcentaje, más pequeño será el archivo.
Utilice un plugin de WordPress para optimizar las imágenes
Si no quieres optimizar las imágenes manualmente, puedes instalar un plugin que hará todo lo anterior (y más) por ti.
Existen muchos plugins de optimización de imágenes, pero a nosotros nos gusta Optimole. Lo utilizaremos como ejemplo.
Otros plugins de optimización de imágenes consiguen prácticamente lo mismo, pero de formas ligeramente diferentes.
Instalación del plugin de optimización de imágenes Optimole
Instalar Optimole es fácil. Usted tendrá que registrarse con un correo electrónico para activarlo, pero por lo demás, es muy fácil de usar.
También hay una versión gratuita, que es la que utilizamos en este ejemplo.
- Acceda a su sitio web WordPress
- Seleccione Plugins y Añadir nuevo en el menú lateral
- Busque "optimole" en el cuadro de búsqueda de la parte superior derecha.
- Seleccione Instale y Activar cuando aparezcan las opciones
Se te pedirá que te registres para obtener una clave API, lo que tendrás que hacer para poder utilizarla.
- Seleccione la opción Register & Email API Key en la primera ventana de Optimole
- Pegue la clave API que reciba por correo electrónico en la casilla y confirme
- Si la ventana no aparece, seleccione Medios de comunicación > Optimole para subirlo
Verá una pantalla de conexión que sincroniza su plugin con los servidores de Optimole. Una vez hecho esto, ahora debería ser capaz de utilizar las funciones gratuitas de Optimole para optimizar sus imágenes.
Optimización de imágenes con Optimole
Ahora que Optimole está funcionando, vamos a optimizar una imagen.
La buena noticia es que Optimole optimizará automáticamente cualquier nueva imagen que subas. No necesitas hacer nada ya que el plugin escaneará y optimizará automáticamente en segundo plano.
Optimole también optimizará todas las imágenes existentes ya subidas a WordPress. No lo hará automáticamente. En su lugar, optimizará las imágenes cuando se visite la página o la entrada por primera vez.
De esta forma, no se sobrecarga el plugin de golpe y las imágenes pueden optimizarse de forma más eficiente.
Transfiere tus imágenes originales a la nube y sustituye su enlace inicial por uno personalizado una vez optimizadas. Las imágenes optimizadas se renderizan a través de una CDN que las entrega más rápido.
Cuando visite una página con una imagen, observará que la imagen mostrará la URL personalizada de Optimole (clic derecho > Abrir imagen en nueva pestaña).
Los ajustes automáticos son bastante buenos, pero puede cambiarlos en el menú Ajustes al que se accede a través de Medios de comunicación > Optimole > Ajustes ficha.
La pestaña Configuración te permite configurar las opciones del plugin. Los usuarios gratuitos no podrán hacer mucho aquí, pero si eres un usuario premium, tendrás un montón de opciones de acceso mediante los enlaces General y Avanzado a la izquierda de la ventana.
Ventajas de los plugins de optimización de imágenes
Las ventajas de los plugins de optimización de imágenes son muchas, pero sirven sobre todo para reducir el tamaño de los archivos de imagen y mejorar así la velocidad de carga de las páginas.
Puedes hacerlo manualmente, como hemos explicado anteriormente, pero también puedes utilizar un plugin que haga el trabajo pesado por ti. Por qué cambiar manualmente cada imagen cuando un plugin puede hacerlo automáticamente?
Otro beneficio de algunos plugins es el uso de CDN. Optimole no es el único optimizador de imágenes que utiliza CDN, otros ofrecen características similares.
En lugar de que su servidor web envíe todas las páginas y medios, la Red de Entrega de Contenidos aloja copias de su sitio web en ubicaciones de todo el mundo. El enrutamiento inteligente significa que la CDN más cercana al visitante enviará los datos, reduciendo los tiempos de espera y mejorando la experiencia del cliente.
Pruebas de optimización de imágenes - Antes y después
Ahora, hagamos algunas pruebas para ver la eficacia de la optimización automática de imágenes.
WordPress, por defecto, reduce las imágenes de alta resolución, pero vamos a ver cómo puede reducirlas aún más con un plugin de optimización de imágenes.
Así que hagamos un experimento de antes y después, utilizando la misma imagen.
Resultados antes de la optimización de imágenes
Utilizando una instancia de WordPress de prueba y el tema predeterminado Twenty Twenty, subimos unas cuantas fotos de diferentes tamaños tomadas de MyStock.fotos. Incluimos las imágenes en una entrada normal del blog, mediante un bloque de galería.
Ahora, si haces clic en cada imagen para ampliarla, te darás cuenta de que WordPress las redimensionó por defecto. Así que las cuatro imágenes que subimos se redujeron de la siguiente manera:
7,47 MB > 676 KB
12,3 MB > 762 KB
11,2 MB > 384 KB
8 MB > 794 KB
Si subes la primera imagen a un tipo de entrada normal, sin la opción de ampliarlo, su tamaño de visualización pasará de 7,47 MB a 452 KB.
WordPress, por defecto, reduce la imagen subida en un solo post de 7,47 MB a 452 KB.
Si accede a la misma entrada del blog desde su móvilla imagen se reducirá a 92,61 KB.
Así que estos son los cambios que WordPress hace por defecto cuando accedes a las entradas de tu blog a través de escritorio y móvil.
Resultados tras la optimización de la imagen Optimole
Ahora, vamos a ver cómo Optimole comprime sus imágenes. Al igual que hicimos en la primera parte de las pruebas (sin Optimole), creamos un bloque de galería subiendo las mismas imágenes sin optimizar tomadas de MyStock.photos.
Optimole tiene cuatro niveles de compresión. Si eliges Alta, la compresión mantendrá la calidad de imagen lo más alta posible.
Si eliges Baja, la compresión y la optimización serán más drásticas (reducirá el tamaño en mucha mayor medida).
Una vez que visite el puesto en el sitio web en vivo, Optimole toma inmediatamente el relevo y crea una alternativa comprimida de cada imagen sobre la que hagas clic (cada imagen puede ampliarse).
Con compresión de alta calidadlas imágenes se redujeron de la siguiente manera (se trata de las mismas imágenes enumeradas en el mismo orden que en la prueba anterior):
7,47 MB > 557 KB
12,3 MB >548 KB
11,2 MB > 220 KB
8 MB > 547 KB
Con compresión de baja calidadlos resultados son diferentes:
7,47 MB > 251 KB
12,3 MB > 269 KB
11,2 MB > 124 KB
8 MB > 302 KB
Así es como queda la primera imagen de la lista tras los niveles de compresión Alto y Bajo (el nivel de calidad) :
Nivel de alta calidad (557 KB)
Nivel de calidad bajo (251 KB)
A simple vista, se nota que la calidad de la imagen no ha cambiado mucho.
Ahora, si añades una imagen a una entrada de blog sin la opción de ampliarlose reducirá automáticamente a su tamaño máximo de visualización (el tamaño máximo de visualización que se requiere para una entrada de blog).
Por ejemplo, esta imagen por sí sola fue convertido de 7,47 MB a 75,3 KB (en compresión de alta calidad) mientras se muestran en una sola entrada de blog:
Imagen de puesto único comprimida a 75,3 KB
580 x 387 píxeles
Esto es bueno porque su servidor no tendrá que cargar el tamaño completo de la imagen cuando se prefiere un tamaño más pequeño.
Pero eso ocurre en el escritorio. Para pantallas móviles, Optimole creará versiones alternativas de la imagen, incluso más pequeñas que su homóloga de escritorio.
Por lo tanto, si alguien accede a su sitio desde un móvil, Optimole no mostrará la versión de escritorio de la imagen que, incluso optimizada, puede tardar en cargarse en un dispositivo más pequeño. En realidad, el plugin ofrece una alternativa móvil a esa imagen.
La misma imagen de la entrada del blog anterior era reducido a 20,15 KB para usuarios móviles (de 7,47 MB en el original).
Optimole utiliza métodos de compresión con y sin pérdidas, que se establecen en función del nivel de compresión que elija.
A través de optimización sin pérdidaslas imágenes no perderán datos significativos durante la compresión. Tendrán el mismo aspecto que su versión original después de la optimización. Por eso la optimización sin pérdidas no reducirá mucho el espacio en disco, las diferencias de tamaño tras la compresión son casi nulas.
Por otra parte, hay optimización con pérdidasque reduce en gran medida el tamaño de las imágenes, pero sin reducir la calidad (tal y como se percibe a simple vista).
Por lo tanto, si quiere que su base de datos sea mucho más ligera de lo que es ahora, puede optar por la optimización con pérdidas, ya que sus visitantes no notarán la conversión.
Otras formas de optimizar imágenes
Aparte del cambio de tamaño, existen otros métodos para ofrecer imágenes más ligeras a sus visitantes y mejorar los tiempos de carga de su sitio.
Carga lenta
La carga lenta es otro método que contribuirá a que tus imágenes no ralenticen tu sitio. Si tienes entradas o páginas con muchas imágenes, mostrarlas todas a la vez puede no ser una buena idea.
La función de carga lenta las mostrará gradualmente cuando el usuario se desplace por la página. Con cada desplazamiento, se muestra un nuevo lote de imágenes en la zona visible de la pantalla del usuario, de modo que el servidor responderá mejor a todas las peticiones.
SVG e imágenes vectoriales
Los SVG son gráficos vectoriales escalables o imágenes vectoriales. Mientras que los PNG y los JPEG se basan en la trama, los SVG se basan exclusivamente en las matemáticas. Esto significa que pueden ampliarse o reducirse infinitamente manteniendo archivos de menor tamaño.
Los SVG son ideales porque la misma imagen puede representarse en distintos tamaños de pantalla sin perder detalle ni distorsionarse. También requieren menos peticiones HTTP para cargarse y pueden ser entendidos por los motores de búsqueda, lo que ofrece una pequeña ventaja SEO.
Utilizar la red de distribución de contenidos (CDN)
Un CDN es un servicio que sirve su sitio web utilizando el servidor más cercano a sus visitantes, lo que se traduce en tiempos de carga más rápidos. Optimole viene con un servicio CDN integrado para imágenes, que funciona automáticamente.
Cloudflare y StackPath son plugins independientes de WordPress que proporcionan servicios CDN para toda su base de datos en caso de que necesite una optimización completa del sitio.
Convertir GIF en vídeo
Para ahorrar espacio en disco y mostrar archivos más ligeros, también puede convertir GIF en vídeo. Si activa esta función en Optimole, empezará a convertir automáticamente todos los archivos GIF que cargue.
Los formatos de vídeo disponibles son MP4 y WebM, y el plugin elegirá el más eficiente para cada caso particular durante la conversión.
También existen varias herramientas en línea que puedes utilizar para convertir un GIF a MP4 antes de subirlo a tu sitio de WordPress. ¿Por qué convertirlo? Porque los formatos GIF son más grandes que los formatos de vídeo.
Recorte inteligente
Recorte inteligente significa recortar el espacio o el fondo innecesarios de una imagen y mantener sólo el punto de interés.
El recorte puede hacerse manualmente o mediante un complemento como Optimole que detectará automáticamente los "puntos calientes" de una imagen y eliminará las partes innecesarias.
Conclusión
La optimización de imágenes es una técnica sencilla que no requiere mucho esfuerzo si se utiliza un plugin y sólo un esfuerzo modesto si se realiza manualmente.
Mientras optimices todas tus imágenes, no importa cómo lo hagas. Sólo que lo hagas.
Los archivos grandes ralentizan las páginas web y eso es algo que nadie quiere. Google te penalizará por páginas lentas y los usuarios también.
Hay demasiada competencia en Internet como para dejar pasar cualquier ventaja potencial. Cuando la optimización de imágenes es tan eficaz y, a la vez, tan sencilla de aplicar, ¡realmente deberías planteártelo!
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
¿Cómo ahorra tamaño de archivo la conversión a mp3?
Gracias por tu comentario, Julius. Puede consultar el artículo que referenciamos para la reclamación.
¿Es compatible el tema Astra con Imagify?
Hola,
me gustaria preguntarte tengo instalado el tema astra y quiero redimensionar la imagen automaticamente al subirla.que plugin es compatible y adecuado para el tema astra?
Hola George, hemos cubierto los plugins que funcionarían bien con Astra. Pruébalos y cuéntanos cómo te va 🙂 .
Hola. Puedes utilizar una herramienta gratuita en línea para reducir el tamaño de los archivos de imagen.
Sí, claro 🙂 .
HI, en woocommerce Astra Pro las imágenes son borrosas.
Antes tenía el tema genesis con imágenes a 1000×1000 optimizadas sin problemas, pero con Astra todas las imágenes de catálogo y producto único salen borrosas.
Este problema aparece desde 2018 y no se ha encontrado ayuda ni resultados en el grupo de FB ni Soporte.
Por favor, dar una guía para resolver este problema. Gracias.
Gracias por esta información tan útil. Yo mismo tomo fotos para mi sitio, pero todavía no estoy seguro de que estoy subiendo las imágenes correctas en el sitio que no cause daño. Muchos escriben que el tamaño de la imagen comprimida no debe ser superior a 100 kb. ¿Qué opina al respecto?
Preferí su página ya que cuenta exhaustivamente sobre
Todo muy abierto con una explicación precisa de los temas. Fue realmente informativo. Su sitio web es útil.
Me ha encantado leer su artículo. Optimizar las imágenes en WordPress es crucial para mejorar el rendimiento del sitio web y garantizar tiempos de carga más rápidos. Aquí hay varios pasos que puede tomar para optimizar las imágenes en WordPress:
1.Redimensionar y recortar imágenes
2.Comprimir imágenes
3.Utilizar el formato de imagen correcto
4.Carga lenta
5. Aprovechar la caché
6.Integración de CDN
7.Habilitar imágenes responsivas
Estos son algunos puntos que quería incluir en su artículo. Lectores, Si desea desarrollar su sitio web wordpress, puede visitar una empresa de TI como tecnologías Alakmalak. Tienen más de 17 años de experiencia en este campo.