Optimización de imágenes de WordPress: la guía definitiva

Publicado: 2020-11-13

La optimización de imágenes de WordPress implica reducir o comprimir los tamaños de archivo de las imágenes en su sitio de WordPress sin afectar negativamente la forma en que aparecen las imágenes en las pantallas. Cuando se esfuerza por optimizar las imágenes en WordPress, acelerará la velocidad de su sitio web y de su página, lo que en última instancia ayuda a captar más visitantes nuevos.

En esta guía, echamos un vistazo a la optimización de imágenes de WordPress, por qué debería optimizar las imágenes y las técnicas de optimización de imágenes. También analizamos los complementos de optimización de imágenes de WordPress, la resolución de imagen y el formato de imagen. Finalmente, concluiremos con cómo la optimización de imágenes de WordPress impacta en el SEO. ¡Vamos!

En esta guía

    Para comprender la importancia de la optimización de la imagen, hágase una pregunta simple: cuando va a un sitio web nuevo y la página no se carga rápidamente, ¿qué hace?

    Si eres como mucha gente, probablemente lo cierres y sigas adelante, ¿verdad? Como mínimo, se sentirá impaciente y frustrado con el tiempo que tarda en cargarse el sitio web. O si se queda, es solo porque está realmente interesado en ese contenido en particular. Probablemente nunca volverás a ese sitio después de leer este artículo. El sitio es demasiado lento.

    ¿Qué tiene que ver esta experiencia con por qué necesitas optimizar las imágenes en WordPress? Los tiempos de carga de la página a menudo se ven afectados en gran medida por el tamaño de las imágenes. Por lo tanto, la optimización de imágenes de WordPress entra en juego de manera importante cuando se trata de mejorar la experiencia del usuario e incluso su clasificación de SEO.

    ¿Qué es la optimización de imágenes de WordPress?

    La optimización de imágenes de WordPress es una técnica para reducir el tamaño de los archivos de imágenes sin afectar negativamente la forma en que las imágenes aparecen en una pantalla a simple vista. El objetivo de la optimización de imágenes de WordPress es reducir el tamaño de los archivos de imagen sin notar ninguna pérdida en la calidad de la imagen.

    Las imágenes se pueden optimizar de varias maneras para un sitio web de WordPress, utilizando diferentes herramientas y técnicas. El uso de archivos de menor tamaño significa que puede llenar su sitio con más imágenes sin sobrecargarlo o hacerlo funcionar más lento.

    La optimización de todas las imágenes de su sitio de WordPress debe estar en la parte superior de su lista de prioridades cuando se trata de optimizar su sitio de WordPress en general. El proceso de optimización de imágenes hará que su sitio pese mucho menos y se cargue más rápido que nunca, capturando a más usuarios nuevos y haciendo que regresen por más contenido.

    Después de todo, no importa qué tan bueno sea su contenido, no importará si los usuarios se van antes de consumirlo.

    ¿Por qué debería optimizar las imágenes en WordPress?

    Hay cuatro razones principales por las que debería optimizar las imágenes en WordPress.

    1. Acelere los tiempos de carga de la página
    2. Mejorar el SEO (optimización de motores de búsqueda)
    3. Reducir las cargas del servidor
    4. Reducir el tamaño general del sitio web para que requiera menos recursos
    5. Manténgase al tanto de las importantes tareas de mantenimiento de WordPress
    Obtenga el contenido adicional: la lista de verificación de mantenimiento definitiva de WordPress
    Descarga el PDF

    Echemos un vistazo a algunos de los detalles específicos de los tiempos de carga de la página cuando se trata de la optimización de imágenes de WordPress.

    En 2020, un sitio web que tarda diez segundos o más en cargarse simplemente no va a captar la atención del usuario. Y aunque no existe una definición exacta de una velocidad de carga de página objetivo óptima, estudios de expertos recientes muestran que:

    1. Los primeros diez segundos tienen un gran impacto en el tiempo que los usuarios permanecen en las páginas web. Los lectores rebotarán de su página o publicación si no se muestra todo el contenido en ese corto período de tiempo.
    2. En el 79% de los casos, si un usuario no está satisfecho con la velocidad del sitio, nunca volverá a ese sitio porque la velocidad es un asesino.
    3. Peor aún, un 47% de los usuarios insatisfechos no solo rechazarán su sitio personalmente, sino que desanimarán a otros usuarios al hablar con sus amigos sobre su experiencia. También son más propensos a dejar críticas negativas en las redes sociales y Google.

    Todas estas estadísticas significan que es absolutamente fundamental mantener los tiempos de carga de la página de su sitio web por debajo de los diez segundos. En realidad, su objetivo debería ser menos de tres segundos. Y ahí es donde interviene la optimización de imágenes de WordPress.

    Factores que afectan las velocidades de carga de la página de WordPress

    Desea que su sitio de WordPress se cargue más rápido, pero no está exactamente seguro de por dónde empezar. El enfoque principal de hoy es la optimización de imágenes, de la que tendrá un conocimiento profundo al final de este artículo.

    Pero como parte de un esfuerzo mayor en la optimización de WordPress, es importante comprender todos los factores que afectan la velocidad de su sitio.

    Para un sitio ultrarrápido, es importante:

    1. Utilice imágenes que sean ligeras

    El uso de imágenes que son "ligeras" se logra mediante la optimización de la imagen. El objetivo es comprimir las imágenes al máximo sin perder calidad. Este proceso se conoce como compresión sin pérdida (hablaremos más de eso más adelante) y requiere el uso de un optimizador de imagen.

    2. Optimice el almacenamiento en caché de su sitio web

    El almacenamiento en caché de WordPress ayuda a que su sitio web se cargue más rápidamente al reducir la cantidad de transferencia de datos entre el navegador del visitante de su sitio, la base de datos de WordPress de su sitio y el servidor web de su sitio web. Un complemento de almacenamiento en caché de WordPress que mantendrá y borrará el caché de su sitio cuando sea necesario, tanto de forma manual como automática.

    3. Utilice un host de WordPress de calidad

    Los propietarios serios de sitios de WordPress no ejecutan sus sitios web con un plan de alojamiento de $ 4 / mes por una razón. Si bien esos pueden funcionar bien para las personas que ejecutan blogs personales que usan muy pocos recursos (y no obtienen mucho tráfico), no son suficientes para los propietarios de sitios que tienen una carga más alta y exigen velocidades de sitio más rápidas.

    Dedique algún tiempo a encontrar un proveedor de alojamiento gestionado de calidad que tenga centros de datos repartidos por varias regiones. Además, compare los tiempos de respuesta a nivel de servidor cuando esté comprando un host. Estos factores definitivamente afectarán la rapidez con la que se cargue su sitio para sus usuarios.

    4. Optimizar el código

    El código que alimenta su sitio web también debe optimizarse para acelerar los tiempos de carga de la página. Optimizar el código en su sitio de WordPress, en general, significa:

    • Usar complementos y temas de calidad
    • Mantener sus temas y complementos actualizados a la última versión
    • No usar complementos que se superpongan en funcionalidad o características.
    • Desinstalar / eliminar complementos o temas no utilizados.

    Los desarrolladores necesitan minimizar el código mediante:

    • Eliminar formato y comentarios
    • Deshacerse de espacios extra
    • Quitar comas y código que no se usa

    Es importante minimizar el código en todos sus recursos, incluidos HTML, JavaScript y CSS. Para minimizar su HTML, una herramienta poderosa es HTMLMinifier. Para JavaScript, pruebe UglifyJS. También vale la pena investigar el compilador de cierre. Cuando se trata de CSS, CSSNano es una buena opción.

    5. Reducir los redireccionamientos

    Hay ocasiones en las que es necesario configurar redireccionamientos para evitar esos desagradables errores 404. Pero, si es posible, evite siempre los llamados "redireccionamientos de uso múltiple".

    Esto significa que sus redireccionamientos van desde, por ejemplo, example.com> example.com/subdomain> example.com/subdomain/redirect.html. Sería muy difícil que la página de destino se cargue en tres segundos o menos con esos múltiples redireccionamientos en ejecución.

    Una redirección está bien. Por lo general, más de uno no lo es.

    Ahora que comprende los factores adicionales que afectan la velocidad de su sitio, concentrémonos en optimizar las imágenes de WordPress.

    Al final del día, la optimización de imágenes de WordPress es un proceso que querrá implementar ya sea que ejecute un sitio para pequeñas empresas o administre varios sitios de WordPress para varios clientes.

    ¿WordPress comprime automáticamente las imágenes?

    Si y no. Con el lanzamiento de WordPress 5.3, el núcleo de WordPress introdujo un soporte mejorado para las imágenes cargadas de alta resolución. Estos incluyen imágenes que ha tomado con una cámara de alta calidad o su teléfono inteligente.

    • La función de compresión de imágenes introducida en WordPress 5.3 detecta cuando se carga una imagen grande y luego genera automáticamente versiones optimizadas para la web de la imagen.
    • Tras la carga, las imágenes se redimensionan automáticamente a 2560 píxeles, el nuevo tamaño completo en WordPress.
    • Cuando se cambia el tamaño de una imagen que carga, se agrega la palabra "escalado" al nombre de su archivo.
    • Si un cambio de tamaño de imagen automático falla debido a un tiempo de espera en el servidor, WordPress lo volverá a intentar continuamente hasta que se produzca la imagen optimizada.

    Esta actualización del núcleo de WordPress fue importante para los desarrolladores que pueden no haberse dado cuenta de cuánto sus grandes archivos de imágenes estaban ralentizando sus sitios web. Sin embargo, la optimización de imagen incorporada proporcionada por WordPress no es una gran solución general y no se adapta a cada desarrollador de WordPress individualmente. Es un buen primer paso, pero para maximizar completamente la optimización de su imagen, debe ir más lejos.

    ¿Cómo optimizo las imágenes en WordPress?

    Optimizar completamente sus imágenes dentro de WordPress no es un esfuerzo demasiado complicado.

    Hay tres formas principales de optimizar imágenes para su sitio web de WordPress:

    1. Complementos de optimización de imágenes de WordPress que le permiten hacer el trabajo directamente desde su panel de administración de WordPress.
    2. Software / aplicación de optimización de imágenes de carga previa : estas aplicaciones pueden ser software de código abierto como un optimizador de imágenes o, como mínimo, un editor de fotos, o aplicaciones pagas que brindan capacidades de ajuste del tamaño de la imagen. Photoshop es un ejemplo de una aplicación de software premium que le permite ajustar la resolución de la imagen para comprimir imágenes para uso web.
    3. Servicios en línea gratuitos que comprimen y optimizan sus imágenes antes de subirlas a WordPress.

    Uso de un optimizador de imágenes de carga previa

    Generalmente, optimizar una imagen significa comprimirla . Un optimizador de imágenes, o compresor, es un programa de software que puede instalar en su dispositivo personal o acceder en línea a través de su navegador web.

    Para usar un optimizador de imágenes, simplemente cargue una imagen y permita que el programa realice pequeños cambios en los píxeles. Estas cargas no se pueden detectar a simple vista, por lo que el proceso a veces se denomina compresión sin pérdidas.

    Se aplica el mismo tipo de técnica cuando comprime un archivo de audio en un MP3. En ese proceso, las altas frecuencias se reducen estratégicamente de manera que el oído no puede detectar ningún cambio.

    Opciones de la herramienta de optimización de imagen previa a la carga

    Tiene bastantes opciones de herramientas que comprimirán y optimizarán sus imágenes antes de subirlas a WordPress.

    1. Un editor de fotos de escritorio

    Si es un usuario habitual de Photoshop, probablemente no necesite comprimir más sus imágenes. Esto se debe a que puede exportar sus imágenes recién creadas en cualquier resolución que desee.

    El mismo principio se aplica a la mayoría de los demás editores de fotografías de escritorio. Pero en realidad, si aún no está utilizando Photoshop para crear las imágenes para su sitio, probablemente no se tomará el tiempo para aprender un programa tan complicado con el único propósito de comprimir imágenes.

    Sin embargo, los editores de fotografías de escritorio como Photoshop son una opción independiente para comprimir y optimizar imágenes.

    2. Aplicaciones móviles y editores de fotografías en línea

    Las aplicaciones de edición de fotografías y los editores de fotografías en línea (como Fotor y Pixlr) están diseñados para realizar una edición básica de fotografías. Muchas de estas herramientas también incluyen opciones para optimizar sus imágenes antes de subirlas a WordPress.

    Sin embargo, al igual que usar Photoshop para hacer este trabajo, usar este tipo de herramientas casi se siente como una exageración. Algunas de estas soluciones tendrán un precio y es posible que no utilice la mayoría de sus otras funciones.

    3. Compresores de imágenes basados ​​en web

    Si desea optimizar sus imágenes antes de subirlas a WordPress, el software dedicado basado en la web probablemente sea su mejor solución.

    Simplemente busque en Google el término "compresor de imágenes en línea" y elija el gratuito con el nombre más interesante. La mayoría de ellos funcionan exactamente de la misma manera.

    Después de elegir la que más te guste, todo lo que necesitas hacer es subir tu imagen y seleccionar el tipo de compresión que deseas aplicar.

    Además, muchos servicios basados ​​en web ofrecen opciones de optimización masiva que funcionan muy bien si necesita optimizar una gran cantidad de archivos.

    Complementos de optimización de imágenes de WordPress

    Si desea un optimizador de imágenes de WordPress que funcione directamente dentro de su sistema de administración de contenido de WordPress, un complemento de optimización de imágenes es el camino a seguir.

    Con un complemento optimizador de imágenes de WordPress, todo lo que debe hacer es cargar su imagen en WordPress y el complemento la comprimirá automáticamente a la configuración que haya predefinido. También puede comprimir y optimizar cada imagen manualmente si lo prefiere.

    En el repositorio de complementos de WordPress, encontrará docenas de complementos para optimizar imágenes. Algunas de las mejores opciones de complementos de optimización de imágenes de WordPress son:

    Smush: carga diferida de imágenes, optimización y compresión de imágenes
    Optimizador de imagen EWWW
    Comprimir imágenes JPEG y PNG

    Elija el que le resulte más fácil trabajar y personalícelo según sus necesidades.

    Nota: solo recomendamos usar UNO de estos complementos de optimización de imágenes de WordPress. Como mencionamos antes, es mejor no duplicar los complementos con una funcionalidad similar.

    ¿Cuál es la mejor resolución de imagen?

    En general, un buen objetivo para la resolución de imágenes basada en web es 72 PPI. Sin embargo, no existe una "resolución de imagen perfecta" universal y reconocida para los sitios web. Básicamente, si la imagen comprimida no aparece pixelada o distorsionada en su sitio después de subirla, la resolución de la imagen es perfectamente ideal para usar en su sitio.

    A diferencia de la industria de la impresión, donde la resolución de imagen requerida es de 300 DPI (puntos por pulgada) para cualquier cosa que se imprima, deberá verificar cómo se ve una imagen cargada en un monitor de computadora grande antes de seguir adelante.

    ¿Qué pasa con la relación tamaño-peso?

    Los colores juegan un papel importante en cuánto "pesa" una imagen. Una simple foto en blanco y negro con un tamaño de 1000 × 800 píxeles con muy pocos elementos puede pesar alrededor de 100 KB. Sin embargo, una foto del mismo tamaño de píxel con altos contrastes y colores vivos a veces pesará más de ocho veces esa cantidad.

    El host de su sitio puede limitarlo en el peso máximo y limitarlo en los tamaños de archivo que puede cargar. Pero la relación tamaño-peso siempre dependerá de la estructura de la imagen.

    Dicho esto, no existe una relación tamaño-peso óptima para las imágenes de WordPress. Simplemente haga todo lo posible para mantenerlos lo más bajos posible sin sacrificar la calidad visual.

    ¿Qué formato de imagen es mejor para los sitios de WordPress?

    La documentación oficial de WordPress sobre el tamaño y la calidad de la imagen recomienda que utilice archivos JPEG o PNG en sitios con tecnología de WordPress. Como tal, estos son de lejos los formatos de imagen más comunes publicados en todos los sitios de WordPress.

    Dependiendo del contenido específico que esté publicando, los archivos JPEG y PNG funcionarán de manera un poco diferente.

    Los archivos JPEG (o .jpg) son perfectos para todo lo relacionado con la trama (imágenes que se componen de píxeles en lugar de líneas). Las fotografías en particular casi siempre se guardan como archivos JPEG.

    Cuando guarda una foto como JPEG, normalmente se comprime automáticamente en un cierto porcentaje. Los mejores editores de fotos le permiten controlar exactamente cuántos detalles se eliminan mediante el proceso de compresión.

    Siempre es mejor seleccionar la cantidad mínima absoluta de compresión aquí, luego comprimir la imagen más tarde con uno de los optimizadores de imagen que ya hemos discutido. Esto ayuda a evitar la distorsión de la imagen.

    Los archivos PNG son para dibujos lineales y fotografías. Cuando guarde una imagen como PNG, se comprimirá sin perder ningún detalle. Sin embargo, los archivos PNG suelen ser mucho más grandes que los JPEG. Este formato de archivo se utiliza mejor para archivos vectoriales. No se distorsionarán independientemente del tamaño.

    WordPress también admite imágenes en formato GIF. Sin embargo, este no es un formato que recomendamos usar porque causa una cantidad máxima de distorsión, sin importar cuán cuidadosamente haya convertido su archivo.

    ¿Los sitios de WordPress se benefician de la optimización de imágenes?

    La respuesta fácil a esta pregunta es un rotundo sí. Por ejemplo, ¿su sitio presenta su logotipo de propiedad en la parte superior de cada página y publica en su sitio? Es posible que no crea lo pesado que puede ser ese archivo de imagen, o cuánto puede ralentizar el rendimiento de su sitio por sí solo. Intente optimizarlo y verifique la diferencia que hace en la velocidad y el rendimiento del sitio.

    ¿Subes nuevas imágenes a tu blog casi todos los días? ¿Actualmente administra una tienda de comercio electrónico con cientos de imágenes de productos? Si es así, no olvide instalar un complemento en WordPress que optimizará automáticamente las nuevas imágenes que cargue, así como las imágenes que ya aparecen en su sitio.

    La verdad es que realmente no importa en qué categoría encaja su sitio web. Si es posible, comience a pensar en optimizar su velocidad mientras todavía está diseñando el sitio. No espere hasta que esté listo para iniciarse.

    Si su sitio ya se ha lanzado, use uno de los complementos simples mencionados anteriormente para optimizar de forma masiva todas las imágenes de su sitio.

    Optimización de imagen y SEO

    Si bien es cierto que optimizar sus imágenes no es la única respuesta para perfeccionar las reglas de SEO en constante cambio, la velocidad de su sitio sigue siendo un factor determinante importante. Es por eso que la optimización de imágenes de WordPress es tan importante para su estrategia de SEO.

    El tamaño de sus imágenes puede afectar negativamente los resultados de búsqueda de su sitio de varias maneras.

    Porcentaje de rebote

    Ya hemos hablado de cómo el uso de archivos de imágenes grandes ralentizará su sitio. Pero, ¿sabías que los principales motores de búsqueda como Google miden el tiempo promedio de carga de tu página y clasifican los sitios de carga más rápida como los más altos en los resultados de búsqueda?

    Los motores de búsqueda también miden las tasas de rebote (cuando un usuario llega a su sitio web pero se va sin visitar una segunda página o publicación) de cada sitio web que rastrea. Un factor determinante importante de una alta tasa de rebote es la velocidad lenta del sitio.

    Como puede ver, las altas tasas de rebote harán que su sitio caiga en picado al final de los resultados de los motores de búsqueda. Sin embargo, las tasas de rebote más bajas lo llevarán hacia arriba en la lista.

    Las velocidades más rápidas del sitio casi siempre equivalen a tasas de rebote más bajas.

    Priorización de páginas

    En varias ocasiones, Google ha declarado que la velocidad de la página es un factor muy importante para clasificar los sitios web y priorizar las páginas. Las imágenes, en promedio, ocupan más del 60% del espacio de almacenamiento de todo su sitio web.

    Si no está optimizando imágenes, ese número podría ser sustancialmente mayor.

    Nuevamente, esto significa un sitio más lento y un factor de clasificación más bajo en Google.

    Y eso no es bueno para los negocios.

    Optimización de metadatos para imágenes

    Piense en los metadatos como información que brinda más información sobre otra información.

    Para las imágenes, los metadatos son la información de texto sobre la que escribe y guarda en su archivo de imagen. Esta información es visible para Google y otros motores de búsqueda.

    Como desarrollador de WordPress, todo lo que necesita hacer para optimizar los metadatos en una imagen es completar el pequeño formulario cuando carga la imagen en su biblioteca multimedia.

    Las áreas para las que necesitará ingresar datos son:

    • texto alternativo
    • Título
    • Subtítulo
    • Babosa

    Al aplicar el texto más adecuado para los motores de búsqueda en estos campos, será mucho más probable que sus imágenes aparezcan en una búsqueda de imágenes de Google.

    Una clasificación más alta en las búsquedas de imágenes de Google atraerá más tráfico a su sitio de lo que cree.

    Optimización de imágenes de WordPress simplificada

    Antes de llegar a este artículo, es posible que no haya sabido completamente cuánto la optimización de imágenes de WordPress puede mejorar todos los aspectos del rendimiento de su sitio de WordPress. Cuando optimiza sus imágenes utilizando los métodos y consejos detallados anteriormente, su sitio podrá funcionar a un nivel similar al de los grandes.

    Pero cuando el tráfico de su sitio comienza a aumentar, ¿está preparado para las amenazas de seguridad que pueden venir con él? Un poderoso complemento de seguridad de WordPress como iThemes Security Pro puede cortar estas amenazas de raíz antes de que se conviertan en problemas.

    Obtenga el contenido adicional: una guía para la seguridad de WordPress
    Haga clic aquí

    Si sucede lo peor y necesita restaurar su sitio después de una brecha de seguridad (u otra catástrofe), se alegrará de tener un plan sólido para las copias de seguridad de WordPress con un complemento de copia de seguridad de WordPress como BackupBuddy. Créanos, le ahorrará horas de trabajo y frustración.

    Ahora, ¡que comience la optimización de la imagen de WordPress!