Optimizar imágenes para WordPress es importante para la velocidad de carga de tu sitio y su desempeño en general. En esta guía vamos a explicarte paso a paso todo el proceso de una buena optimización y todas las herramientas que pueden ayudarte.
Todos hemos visto como se ha popularizado el uso de elementos visuales dentro del marketing de contenidos y está claro que funciona muy bien. Estudios dicen que los posts con imágenes reciben un 94% más de visitas. Pero el uso de este tipo de archivos también afectar tu sitio, por eso en esta guía vamos a tocar el tema de como optimizar imágenes para WordPress, para que estas no tengan un impacto negativo en el performance de tu sitio.
Estos son los temas que vamos a tocar en esta guía…
Índice de Contenidos
- Por qué necesitas optimizar imágenes para WordPress
- ¿Qué es la optimización de imágenes?
- Cómo saber si tus imágenes necesitan ser optimizadas
- Paso 1: Selecciona el formato correcto para una imagen
- Paso 2: Ajusta las imágenes a las dimensiones correctas
- Paso 3: Comprime los archivos de imágenes
- Paso 4: Usa un CDN para distribuir las imágenes
- Paso 5: Optimiza la carga de imágenes con Lazy Loading
- Crea un flujo de trabajo para optimizar imágenes para WordPress
- Conclusión
Por qué necesitas optimizar imágenes para WordPress
Antes de empezar con los pasos del proceso de optimización, hablemos un poquito sobre porqué es tan popular usar elementos visuales en tu contenido y, más importante aún, porque debemos hacer una buena optimización de las imágenes.
Por qué debes usar imágenes en tu contenido
Muy sencillo, los post que incluyen imágenes obtienen un 94% más de visitas.
Las imágenes son el formato más popular en la web. Del 2016 al 2019 el uso de imágenes ha crecido un 106% en páginas móvil y 27% en escritorio.
Todo es porque esto de usar imágenes en tu contenido tiene muchos beneficios, por ejemplo…
- Tus posts son más atractivos visualmente y esto atrae al lector
- Te ayudan a comunicar información más compleja
- Crea una mejor estructura al romper el texto para evitar que parezca una lectura pesada
- Puedes mejorar el ranking de tu sitio en motores de búsqueda (asumiendo que has hecho una buena optimización de tus imágenes)
- Puede ayudar en la indexación de imágenes de Google
- Ayudan a destacar tu contenido cuando es compartido en redes sociales
Por eso y muchas otras razones el uso de imágenes dentro de tu contenido es importantísimo, casi inevitable.
Pero así como tiene muchos beneficios, también puede jugarte en contra, veamos porqué…
Por qué debes optimizar las imágenes
El motivo por el que debemos optimizar es más importante de lo que te imaginas: Las imágenes son el elemento más pesado en una página web.
Según el informe de HTML Archive, que rastrea el tamaño y cantidad de recursos de páginas web, las imágenes se llevan un 21% del peso completo de una página.
Sí, los videos obviamente son aún más pesados, pero su uso no es tan común como el de las imágenes. Ya hablaremos del uso de videos en WordPress en otro post.
El peso de la página significa…
El tamaño de los archivos necesarios para cargar una página, como el HTML, fonts, CSS, imágenes y otros, influyen en el tiempo total de carga. Esto es muy simple:
Página pesada = Carga lenta.
Y qué pasa con una carga lenta…
- Afecta la experiencia del usuario – Más del 50% de los usuarios de móvil abandonan un sitio que tarda más de 3 segundos en cargar
- Afecta el ranking de tu sitio – Google le da prioridad a los sitios rápidos
- Incremento de la tasa de rebote – Página que carga en 3s tiene una tasa de 11% mientras una que carga en 8s tiene una tasa de 59% (Pingdom)
- Utilizas más recursos en tu servidor
- Le haces gastar mas data móvil al usuario que entra a tu página
Si estás pensando… ¿Qué sé yo de optimizar CSS y esas otras cosas? No te preocupes, porque optimizar imágenes para WordPress es algo que todos podemos hacer sin necesidad de ser programador o diseñador. Sigue leyendo que ya te darás cuenta…
El impacto de optimizar imágenes para WordPress
Lo bueno de que las imágenes sean el elemento que más afecta el peso y la velocidad de la página es que:
- Cualquier persona lo puede hacer
- Optimizarlas las imágenes es lo que más impacto tendrá si estás tratando de mejorar la velocidad de tu sitio
Con un poco de esfuerzo es posible reducir drásticamente el peso y velocidad de carga de tu página.
¿Qué es la optimización de imágenes?
Las imágenes que no han sido optimizadas tienen exceso de peso que es totalmente innecesario. Cuando una persona entra a tu pagina pasa lo siguiente:
- El navegador del usuario está obligado a llamar y descargar toda esta información innecesaria
- Tu servidor está obligado a realizar un mayor esfuerzo y utilizar más recursos para enviarla
- El código CSS de tu sitio tiene que ajustar el tamaño de la imagen para que el usuario la pueda como corresponde
Por ejemplo, si tu sitio muestra las imágenes a un tamaño de 600 pixeles de ancho, no deberías subir imágenes con un ancho de 2000px
Por el contrario, una imagen que ha sido optimizada, solamente utiliza lo necesario.
Muchas veces cuando se habla del concepto de optimizar imágenes se reduce a tamaño y compresión, pero existen varios factores que influyen en esto:
- El formato que utilizas (JPG, PNG, etc.)
- Las dimensiones
- El tipo de compresión
- Como se muestran en la página
- La optimización para que carguen en la página
En otras palabras, una imagen en el formato correcto, que se ha cortado a la dimensión precisa, se ha comprimido y se muestra en tu página de forma correcta, ahorra recursos y carga rápidamente en el navegador.
Todos quedan satisfechos, el usuario, Google, tu servidor, el navegador y tú. 😉
Sigamos adelante ahora que tenemos una mejor idea de qué significa esto de optimizar imágenes para WordPress.
Cómo saber si tus imágenes necesitan ser optimizadas
Ahora nos encontramos con dos escenarios diferentes, si se trata de contenido nuevo y de imágenes que te preparas a subir a tu sitio, pues ya sabrás como optimizarlas antes, pero…
¿Qué pasa con las imágenes que ya están en tu sitio? ¿Cómo sabes si esas imágenes están afectando la velocidad de tu sitio?
Para esto vamos al laboratorio a realizar una prueba de velocidad. Te damos dos ejemplos y luego algunas opciones de herramientas que te ayudarán en este proceso.
Prueba de velocidad de carga de las imágenes
Vamos primero con GTMetrix, una herramienta gratuita que mide la velocidad de carga de una página y te da un informe detallado de los tiempos que cada recurso está tomando y recomendaciones de cómo mejorarlo.
En este ejemplo puedes ver (imagen de abajo) que el tiempo de carga de la página completa es de 10.8 segundos. Pero nosotros queremos saber cuales son las causas y cómo reducir ese tiempo, así que vamos más abajo y en la tercera línea encontramos que una de las recomendaciones es optimizar imágenes.
GTMetrix recomienda comprimir las imágenes en las lista para potencialmente reducir el peso en un 22%. Incluso te dice que imágenes específicas tienen el mayor potencial a una reducción de peso significativa.
En este ejemplo te mostramos como, en la prueba de velocidad de carga de Pingdom podemos ver que el peso de las imágenes representa el 48.35% del peso total de esta página.
Análisis de imágenes de Cloudinary
Pero, cuando se trata de medir la velocidad de carga de las imágenes específicamente, nuestra herramienta favorita aquí en WPCafeina, es el Image Analysis Tool de Cloudinary
Simplemente ingresas la dirección de cualquier pagina para que haga un análisis de las imágenes presentes y obtengas un informe de las que necesitan optimización.
No solamente te dice que imágenes necesitan compresión, Cloudinary te da información y recomendaciones mucho más detalladas, por ejemplo:
- El formato y peso de la imagen actual
- El potencial de reducir su peso si utilizas otros formatos
- Y su potencial si ajustas su tamaño
Otra cosa que nos gusta es que muestra la información de una manera mucho más clara. En la siguiente imagen por ejemplo, vemos que la imagen en nuestra página utiliza un formato JPG y pesa 47.3 KB, si cambiamos su formato a JPEG-XR podemos reducir su peso en un 59%, pero si la convertimos en PNG estaríamos subiendo en un 297.9%.
Además, el tamaño de la imagen que hemos subido al sitio es de 1024x536px, pero en realidad en el sitio se está mostrando a 896x469px, hacer ese ajuste tan fácil te baja el peso en un 59%.
Para terminar, Cloudinary ya ha hecho la optimización sugerida para que tu simplemente descargues la nueva versión. Incluso te da diferentes opciones de formatos y te indica la compatibilidad con cada navegador.
Por ejemplo, aquí vemos que la versión más liviana se ha logrado al convertirla al formato WEBP, pero este no es compatible con navegadores como Safari o Firefox, así que por ahora será mejor seleccionar el formato JPG.
Y así es como te enteras si las imágenes que ya están publicadas en tu sitio necesitan ser optimizadas o no.
Ahora vamos a hablar de cómo optimizar imágenes para WordPress, desde un principio.
Paso 1: Selecciona el formato correcto para una imagen
El primer paso de la optimización de imágenes para WordPress es seleccionar el formato correcto. El formato que utilices será clave para su calidad y también para su peso, por eso debes elegir bien.
Para saber qué formato utilizar en cada imagen, simplemente tienes que saber con qué tipo de imagen estás trabajando. Para definir esto lo más fácil posible, veamos qué formatos se usan en cada uno de los tipos de imagen:
Generalmente la decisión del formato esta entre JPG o PNG, pero existen otros que no debemos ignorar porque su uso puede beneficiarnos.
Formato JPG
Casi el 3% de todos los tipos de contenido en sitios son imágenes en formato JPG.
- Uso común: El formato JPG se utiliza más que nada para fotografías porque es capaz de mostrar millones de colores
- Compresión: Tiene varios niveles de compresión: alrededor del 60% está bien para uso en la web
- Compatibilidad: Es compatible con todos los navegadores y dispositivos que existen
- Cuando no debe usarse: JPG no usa transparencias, así que si estás usando una imagen con un fondo transparente, este no es el formato correcto
Este es un ejemplo del uso correcto del formato JPG:
Formato PNG
- Uso común: PNG se usa mas que nada en ilustraciones y en gráficos se usan transparencias
- Compresión: Es un formato sin pérdida que no tiene degradación de la calidad, pero generalmente es más pesado que el formato JPG
- Compatibilidad: Es compatible con todos los navegadores y dispositivos
- Cuando no debe usarse: En fotos porque puedes alcanzar una mejor balance de peso y calidad con un formato JPG
Este es un ejemplo del uso correcto del formato PNG:
Otros formatos de imágenes para web
Como dijimos antes, aunque estos formatos no son tan populares, pueden ayudarte en casos específicos.
Formato SVG
SVG es un formato vector, lo que significa que puede ajustar su tamaño sin perder calidad, cualquiera que sea la resolución de la pantalla del usuario.
Se usa mucho para logos, iconos y mapas, pero no para imágenes que son muy complicadas porque su peso puede subir rápidamente. Además, no es un buen formato para fotos.
Es un formato más liviano que JPG y PNG y es compatible con casi todos los navegadores y dispositivos, con la excepción de algunas versiones viejas de Internet Explorer.
Formato WEBP
WebP es un formato que probablemente será muy popular. Puede llegar a ser hasta 26% más liviano que PNG y entre 25-34% más que JPG.
También puede utilizar transparencias y además fue inventado por Google.
Y si el formato WebP es tan bueno… ¿Por qué no lo usamos para todo?
Porque es relativamente nuevo y todavía no es compatible con todos los navegadores, incluyendo Safari. Si quieres aprender más sobre su uso, puedes leer la pagina oficial de WebP.
Paso 2: Ajusta las imágenes a las dimensiones correctas
Uno de los errores mas grandes y más comunes es el uso de imágenes que no son ajustadas al tamaño correcto.
Por ejemplo subir una imagen de 1620×1620 pixeles cuando en tu sitio se muestra a 800x800px.
Lo que pasa es que, como dijimos antes…
- El navegador de tu usuario tiene que llamar y descargar la imagen a 1620x1620px
- Tu servidor tiene que enviar esa información usando más recursos
- El código CSS de tu sitio tiene que ajustar la imagen de 1620x1620px a 800x800px para mostrarlo correctamente
- Mientras tanto, la persona sigue esperando frente a su pantalla. Y peor aun si esta en un móvil, porque le estás consumiendo su data celular
Esto ha creado una descarga de 64,400 PIXELES TOTALMENTE INNECESARIOS. Y todo eso por no ajustar el tamaño a una imagen. :/
Esta es una tabla de ejemplos publicada por Google.
Cómo saber si tus imágenes están al tamaño que corresponde
¿Cómo sabes si las imágenes en tu sitio estén o no al tamaño que corresponde?
En realidad, esta pregunta nos gusta más… ¿Sabes de qué tamaño deben ser las imágenes en tu blog?
Aquí vamos a matar dos pájaros de un tiro porque, primero vamos a saber si tus imágenes tienen el las dimensiones correctas y segundo, nos vamos a enterar cuales son las dimensiones que necesitas usar en tus posts, de ahora en adelante.
Hay 2 formas de hacer esto muy rápido…
El Inspector de Chrome
Simplemente has un clic derecho encima de la imagen y selecciona “Inspect” para acceder al inspector de DevTools de Chrome (No tienes que instalar nada, esto es parte de tu navegador por defecto).
Esto te dará dos medidas, la primera es a que tamaño se está mostrando la imagen en tu sitio (esto se llama “Visualización”) y la segunda es el tamaño original de la imagen (llamada “Natural”). En el ejemplo de abajo puedes ver cómo la imagen se muestra a 300x200px, pero el original es de 400x266px.
Cloudinary
Ya hablamos de Image Analysis Tool de Cloudinary antes, así que no vamos a volver a explicar como funciona, pero si mencionar que esta es otra forma de enterarse rápidamente de las medidas de “Visualización” y “Natural” de las imágenes en la página.
Herramientas para ajustar el tamaño de las imágenes
Existen diferentes herramientas que puedes usar para ajustar las dimensiones de una imagen.
Programas de escritorio:
Herramientas en la web:
Plugins de WordPress:
Los plugins de WordPress te permiten adaptar las imágenes que subes a tamaños específicos que tú determinas. Nosotros no recomendamos esto porque creemos que es mejor subir las imágenes a tu servidor ya ajustadas al tamaño que corresponde.
Asegúrate de siempre ajustar el tamaño de tus imágenes antes de su comprensión y antes de subirlas a tu sitio.
Como dijimos, los plugins que ajustan las dimensiones una vez que haz subido las imágenes no nos gustan, pero si esta es la única forma que vas a poder hacerlo, es preferible que dejar el tamaño original.
Paso 3: Comprime los archivos de imágenes
Imagenes en paginas de WordPress representan un peso promedio de 1.19 MB
El archivo de una imagen contiene mucha información, alguna que es redundante y otra que es totalmente innecesaria para mostrarla en una página web obteniendo el mismo resultado visual.
La compresión de las imágenes es probablemente el paso más importante de este proceso porque es lo que más impacto tiene en la reducción de peso.
En esta sección vamos a explicarte los tipos de compresión y las herramientas que puedes usar.
Tipos de compresión
La clave de una buena compresión es encontrar un buen balance entre peso y calidad.
Existen dos tipos de compresión:
Lossless (Sin pérdida)
El método de compresión “Lossless” no reduce tanto el tamaño del archivo porque se enfoca en mantener la calidad de la imagen.
El formato PNG es de compresión Lossless.
Lossy (Con pérdida)
En cambio el método “Lossy” utiliza técnicas más avanzadas para reducir el peso, pero debes tener cuidado porque al mismo tiempo le baja la calidad a la imagen.
En este caso tienes que determinar el nivel de compresión que vas a aplicarle a la imagen. Por ejemplo, en un formato JPG puedes llegar a aplicar una compresión de 50% o hasta 60% y mantener una calidad aceptable para web.
Los formatos JPG y GIF son de compresión Lossy.
Herramientas de compresión de imágenes
La compresión de imágenes se puede hacer con diferentes herramientas, empecemos con Photoshop y luego te compartimos otras opciones en la web y también plugins para WordPress.
Compresión de imágenes en Photoshop
Photoshop te permite comprimir la imagen, para esto debes seleccionar “Save for Web”
La ventana de “Save for Web” te permite ajustar el nivel de calidad mientras comparas la versión original con la optimizada en el visualizador y al mismo tiempo ver el peso, de esta forma puedes ajustar hasta llegar al punto óptimo entre calidad y peso.
Herramientas de compresión de imágenes online
También existen muchas herramientas de compresión de imágenes en la web, en este caso lo que estás haciendo es comprimir la imagen antes de subirla a WordPress.
Estas son las más populares:
TinyPNG
TinyPNG es sin duda la herramienta de compresión más popular en la web.
Simplemente arrastrar las imágenes y el proceso da inicio, no te permite configurar ajustes, la herramientas hace la mejor compresión posible por ti. Es completamente gratis y te deja subir 20 imágenes de hasta 5MB al mismo tiempo.
ShortPixel
ShortPixel también es muy popular y también cuenta con un plugin para WordPress.
Tiene un límite de 50 archivos que puedes subir y 10 MB.
Squoosh
Squoosh es la nueva herramienta de compresión de Google.
Esta si te permite ajustar el nivel de calidad y además comparar el resultado en el visualizador. También es una herramienta gratuita.
Optimizilla
Optimizilla es la nueva herramienta de compresión de Google.
Muy similar pero con un visualizador lado-a-lado para comparar las dos versiones mientras ajustas el nivel de calidad. También tiene un límite de 20 imágenes al mismo tiempo y es gratis.
Otras herramientas de compresión en la web
Como dijimos, existe una gran variedad de herramientas online, así que aquí te dejamos el resto:
Plugins de compresión de imágenes para WordPress
Si, es obvio que también existe una gran variedad de plugins para compresión de imágenes. La diferencia con esto es que la compresión sucede después de subir las imágenes a WordPress.
Estos son entonces los plugins de compresión más conocidos:
reSmush.it Image Optimizer
Muchos dicen que reSmush.it Image Optimizer es el mejor plugin de compresión. Tiene un rating de 4.5 estrellas y ha sido instalado en 60,000 sitios.
Con este plugin puedes comprimir las imágenes al momento de subir y también te permite comprimir todas las que ya están un sitio en un par de clics.
Tu puedes ajustar el nivel de compresión que quieras y ademas no tienes que preocuparte de perder el original, porque trabaja sobre una copia que genera automáticamente.
Compress JPEG & PNG images (de TinyPNG)
Compress JPEG & PNG images es el plugin de TinyPNG. A diferencia de su versión web, este plugin no tiene límites de peso.
La capacidades que tiene son similares, compresión al subir o de las imágenes ya publicadas en tu sitio.
EWWW Image Optimizer
EWWW Image Optimizer tiene más de 700,000 instalaciones y un excelente rating.
Aparte de las funciones comunes, también puede comprimir imágenes alojadas en Amazon S3 on en servicios de CDN, puede convertir las imágenes a formato WebP y es compatible con los más populares plugins de galerías de imágenes.
Smush Image Compression and Optimization
Por ultimo esta Smush Image Compression and Optimization, probablemente el más popular con más de 1 millón de instalaciones y un rating de 5 estrellas.
Aparte de lo ya mencionado, Smush cuenta con un detector de imágenes con dimensiones incorrectas, puede usarse en multi-sitios y también puede comprimir imágenes en CDN.
Bueno, creo que ahí tienes suficientes opciones para la compresión de imágenes. Como mencionamos antes, nosotros siempre preferimos hacer todo el proceso antes de subir las imágenes a WordPress, pero si eso funciona mejor en tu caso, es mejor que mostrar las imágenes en tu sitio sin compresión alguna.
¡A comprimir se ha dicho!
Paso 4: Usa un CDN para distribuir las imágenes
Un Content Delivery Network (CDN) es una red de servidores en diferentes partes del mundo y sirve para entregar el contenido de tu sitio de una manera más rápida por su proximidad al usuario que está visitando tu sitio porque la distancia también tiene un impacto en el rendimiento percibido.
En otras palabras, el CDN hace copias de tu contenido desde el servidor principal (tu hosting) y las almacena en diferentes servidores alrededor del mundo para hacer la carga de tu sitio más rápida.
Esto incluye código de CSS, Javascript y también las imágenes de tu contenido.
Estos son algunos de los CDN más conocidos:
Servicios de CDN gratis
Empecemos por los que tienen versiones gratis.
Cloudflare
Cloudflare es quizás el más conocido. Tiene más de 165 centros de datos alrededor del mundo para distribuir tu contenido.
Ademas cuenta con su propio plugin para WordPress que hace que la implementación sea sumamente sencilla.
Jetpack
Jetpack es un servicio de Automattic que hace muchas cosas. Recientemente adquirió Photon y ahora también puede ofrecer servicios de CDN para las imágenes de WordPress.
Tiene una opción gratis y además cuenta con su famoso plugin que seguramente habrás visto más de una vez.
Servicios premium de CDN
Y estos son algunos de los servicios de CDN de pago más conocidos.
StackPath
Nosotros utilizamos StackPath para el sitio de WPCafeina y algunos de nuestros clientes. Cuenta con 45 centros de datos en todos los continentes.
Ofrece el primer gratis y luego puedes suscribirte al paquete de $10/mes.
KeyCDN
KeyCDN es otro de los servicios populares. No tiene un costo fijo mensual y pagas por el uso según tu tráfico.
También cuenta con su propio plugin para que lo integres a WordPress.
Sucuri
Ya antes hemos hablado de Sucuri aquí en este blog porque es uno de las plataformas más robustas para la seguridad de WordPress, pero Sucuri también ofrece servicios de CDN.
Su plan básico tiene un costo de $199/año.
Un servicio de CDN puede acelerar la carga de las imágenes en WordPress de forma significativa, además del resto de tu contenido, en lugar de cargar desde tu propio servidor.
Si no conoces mucho de este tema, te aconsejamos empezar con CloudFlare, que es el más fácil de configurar y tiene un plan gratis.
Paso 5: Optimiza la carga de imágenes con Lazy Loading
El uso de Lazy loading en imágenes tiene el potencial de ahorrar 800 KB en la carga inicial de una página.
Empecemos por definirlo: Lo que hace el Lazy Loading es demorar la carga de las imágenes que todavía no aparecen en pantalla. Esto acelera la carga inicial de la pagina y recién empieza a cargar cada imagen a medida que se necesita cuando el usuario va bajando.
Este es un ejemplo de cómo aparecen las imágenes con lazy loading cuando todavía no aparecen en pantalla y luego como se carga completamente para mostrarse.
Pero si quieres ver claramente cómo funciona, visita esta demo.
El Lazy Loading es muy fácil de implementar en WordPress, aquí te compartimos un par de opciones…
WP-Rocket
Nosotros usamos y recomendamos WP-Rocket, que es un plugin de Cache para WordPress y tiene la opción de habilitar la funcionalidad de Lazy Loading.
Es tan sencillo como seleccionarlo dentro de sus opciones, como puedes ver en esta imagen…
Además, te da la opción de desactivar el Lazy Loading en paginas especificas.
WP-Rocket tiene un costo de $49 al año, sabemos que hay otros plugins de Cache que son gratis, pero en este caso vale la pena hacer esa pequeña inversión.
Plugins de WordPress para Lazy Loading
Y obviamente también existen los plugins que te pueden ayudar a implementarlo, aquí te compartimos los principales:
Lazy Load by WP Rocket
Si no tienes WP-Rocket para una solución de Cache completa, puedes usar su plugin Lazy Load by WP Rocket que es gratis y muy fácil de configurar.
Lazy Loader
Lazy Loader es otro plugin popular con más de 4,000 instalaciones y un rating de 4.5 estrellas.
Puede hacer lazy loading para imágenes, video y audio.
Otros plugins para Lazy Loading
Aquí te dejamos el resto de las opciones:
Como ves, esto del Lazy Loading no es ninguna ciencia, pero sí puede ayudar muchísimo a la carga de las imágenes de una manera mucho más efectiva.
Crea un flujo de trabajo para optimizar imágenes para WordPress
Todo esto puede parecer mucho trabajo, pero una vez que agarres el ritmo lo podrás hacer muy rápido.
La mejor forma de hacerlo es creando un flujo de trabajo, ya sea que trabajes solo o en equipo, de esta forma sabes cada paso y quién es el responsable.
Nuestro checklist para optimizar imágenes para WordPress es así:
- Crear todos los gráficos (si son necesarios, por ejemplo en este post)
- Buscar imágenes
- Reunir todo el material visual que se va a usar para el post o página en una carpeta
- Ajustar los tamaños de todas la imágenes (ya sabiendo cuales son las dimensiones que se necesitan)
- Hacer save en el formato correcto (en realidad se hace como parte del paso anterior)
- Hacer la compresión de todas las imágenes
- Subir todas las imágenes a WordPress
- Agregar el SEO de las imágenes (Títulos y Alt Tags)
- Agregar cada imagen dentro del contenido desde la librería de WordPress
Hay que mencionar dos cosas aquí…
Primero que debes tratar de trabajar en bloques y no imagen por imagen, por ejemplo puedes hacer la compresión de todas las imágenes juntas o puedes subir todas las imágenes a la librería de WordPress, en lugar de hacerlo individualmente. Esto ahorra muchísimo tiempo.
Y segundo es que los demás pasos que hemos incluido en esta guía, como el uso del CDN para la distribución o implementar Lazy Loading, son cosas que ya están establecidas y no necesitas hacer nada dentro del flujo de trabajo.
Conclusión
Tenemos que ser sinceros y admitir que esto de trabajar con imágenes en el marketing de contenidos es una de las cosas más entretenidas, pero hay que hacerlo bien para darle una buena experiencia al usuario cuando visita tu sitio.
Aquí tienes todo lo que necesitas para hacer una optimización de imágenes para WordPress, esperamos que te sea útil y la guardes como referencia para el futuro.
¿Te gusto la guia? Ayúdanos a compartirla. 😉
Yesterday, while I was at work, my cousin stole my
iPad and tested to see if it can survive a twenty five
foot drop, just so she can be a youtube sensation. My apple ipad is now broken and she has 83
views. I know this is totally off topic but I had to share
it with someone!
Greetings! Very helpful advice within this post! It is
the little changes that make the greatest changes.
Many thanks for sharing!
Here is my web-site :: http://simpleketoburns.net/
A person necessarily help to make critically posts I’d state.
That is the very first time I frequented your web page and
thus far? I amazed with the research you made to create this
actual publish incredible. Magnificent activity!
Stop by my web page; https://freeglobalclassifiedad.com/user/profile/6210
It is the best time to make some plans for the future and it is time to be happy.
I’ve read this post and if I could I wish to suggest you
few interesting things or advice. Maybe you could write next articles referring to this article.
I desire to read more things about it!
Check out my blog :: http://lifevibescbd.com/
Yoou definitely made your point!
Best Essay writing
helpessay https://cheapessaywritinghelp.com
Nicely put, Many thanks!
Best Essay writing
essay writers https://buyessayonlinesafe.com
Nicely put, Witth thanks.
Best Essay writing
essay writingg service https://writingmypaper.com
Nicfely put, With thanks.
Best Essay writing
buy essay paper online https://argumentativeresearch.com
Very good forum posts, Cheers.
Best Essay writing
buy esway papers cheap https://collegepaperwriting.com
Terrific data. Wiith thanks.
Best Essay writing
buy esszy paer online https://buyessaysearch.com
Regards, Plenty off tips!
Best Essay writing
buy chesap essays online https://argumentativewriting.com
Thank you. A lot of information.
Best Essay writing
cheap essay writing service https://essayservicesall.com
Nicely put. Apreciate it!
Best Essay writing
write my essay https://servicethesis.com
Regards! Loads of advice.
Best Essay writing
buy an essay online cheap https://usessaywritingservice.com
Nicely put. Thank you.
Best Essay writing
buy cheap essays online https://researchpaperorder.com
Terrivic postings, Cheers!
Best Essay writing
fast essay writing service https://writeargumentativeessay.com
For the reason that the admin of this web page is
working, no question very shortly it will be renowned, due to its quality contents.
Also visit my webpage Goto
Howdy just wanted to give you a brief heads up and let you know a few of the
pictures aren’t loading properly. I’m not sure why
but I think its a linking issue. I’ve tried it in two different web browsers
and both show the same outcome.
Good advice, With thanks.
write my essay cheap
buy your essay https://orderessayonlineuk.com
It’s not my first time to pay a quick visit this site, i am visiting
this web site dailly and obtain pleasant facts from here everyday.
My webpage Full Releaf CBD Review
Seriously tons of amazing information.
write me an essay
write my essay https://ordertermpaper.com
Wonderful write ups Thanks.
Best Essay writing
buy an essay online cheap https://buyessaywritingservice.com
Definitely believe that which you said. Your favorite
reason appeared to be on the net the easiest thing
to be aware of. I say to you, I definitely get irked while people consider worries that they
just don’t know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal.
Will likely be back to get more. Thanks
Feel free to surf to my web blog; Green Leaf CBD
Saved as a favorite, I really like your site!
my site – http://okeepo.co.uk/groups/the-truth-about-locarb-protein-diet-1669203298
Helpful info. Fortunate me I found your web site accidentally, and I am
stunned why this twist of fate did not took place in advance!
I bookmarked it.
Here is my homepage; Pure Spectra CBD Review
Good content. Many thanks.
Best Essay writing
essay helper https://allbestessaywritingservice.com
Lovely postings. Regards!
Best Essay writing
write papers for me https://essaysonservice.com
Hey! I just wanted to ask if you ever have any trouble with hackers?
My last blog (wordpress) was hacked and I ended up losing a few months of hard work
due to no back up. Do you have any solutions to protect against hackers?
My blog: DivaTrim Keto Reviews
Fantastic write ups Thanks.
Bestt Essay writing
buy essay paper https://onlineessayforyou.com
Very energetic article, I loved that bit. Will
there be a part 2?
Feel free to surf to my web site: https://fullreleafcbd.org/
Oh my goodness! Impressive article dude! Thank you, However I am
having troubles with your RSS. I don?t understand why I cannot join it.
Is there anybody else getting identical RSS problems?
Anybody who knows the answer can you kindly respond? Thanx!!
Here is my blog – Super Keto Max Price
You actually said iit fantastically.
Best Essay writing
buy your essay https://essaypaperwritingservice.com
I am really impressed with your writing skills and
also with the layout on your weblog. Is this a paid theme or
did you modify it yourself? Either way keep up the nice quality
writing, it is rare to see a great blog like this one nowadays.
Also visit my web-site :: Super Keto Max Price
I reckon something truly special in this internet site.
Feel free to visit my web page; https://www.qoocle.com/groups/techniques-assist-you-to-quit-smoking-and-its-benefits-234634907/
This is a topic which is near to my heart… Take care! Where are your contact
details though?
Visit my homepage Vita Grow XL
What’s up, just wanted to mention, I enjoyed this blog post.
It was practical. Keep on posting!
I think this is one of the most vital info for me.
And i’m glad reading your article. But want to remark on some general things,
The web site style is wonderful, the articles is
really excellent : D. Good job, cheers
Wow, amazing blog layout! How long have you been blogging for?
you made blogging look easy. The overall look of your site is
fantastic, as well as the content!
Tips nicely regarded!.
Best Essay writing
help essay https://buyessayprices.com
Really a lot of beneficial advice.
Best Essay writing
Buying university essays https://writingmypaper.com/how-to-write-better-english-essays
Peculiar article, exactly what I needed.
Yes! Finally something about gum disease.
Heya i’m for the first time here. I found this board and I
in finding It really helpful & it helped me out much.
I’m hoping to present one thing back and help others like you helped me.
I know this if off topic but I’m looking into starting my own blog and
was curious what all is needed to get setup? I’m assuming
having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not
100% certain. Any suggestions or advice would
be greatly appreciated. Thank you
Seriously all kinds off great advice.
Best Essay writing
write my essay cheap https://writemyessaybest.com/
You said this effectively!
Best Essaay writing
paper writing service https://termpaperwriterservice.com
Wonderful info, Thanks.
essay writer service
essay writer service https://webcustomwritinghelp.com/
It’s awesome to go to see this web site and reading the views of all mates about this post, while I am also eager of getting experience.
Here is my blog post :: EugenioCRoik
With thanks! I like it!
paper writing services
essays writing services https://webtheessaywriter.com/
Awesome knowledge Thanks!
Best Essay writing
essays writing services https://writeessayformoney.com
Incredible quite a llot of excellent tips!
essay Writer
writing service https://websiteessaywriter.com/
Very good stuff Thank you.
Best Essay writing
buy cheap essays online https://essayserviceusukua.com
Amazing forum posts, With thanks.
paper wrtiting services
write my papers https://centeronlineessayservice.com/
Seriously many of excellent tips.
paper writing
paper writing service https://fastpaperwritingservice.com/
Nicely put, Many thanks!
write mmy paper
writing paper https://qualitywritingpaper.com/
Appreciate it. Lots of posts.
Best Essay writing
write my essay cheap https://essaywritingtld.com
You actuall explained it perfectly!
custom paper writing service
custom paper writing service https://amazingcustompaperwritingservice.com/
Appreciate it, Plenty of information!
Best Essay writing
cheap essay writing service https://ordertermpaperonline.com
This is nicely said. !
Best Essay writing
buy essay online forr cheap https://admissionessaywritingservice.com
Point clealy considered!!
Best Essay writing
essay writing service https://toppaperwritinghelp.com
I love your blog.. very nice colors & theme.
Did you design this website yourself or did you hire someone to
do it for you? Plz respond as I’m looking to create my own blog and would like to know where u
got this from. cheers
Hi my friend! I want to say that this post is awesome, great written and include
approximately all important infos. I’d like to peer extra posts like this .
Thanks to my father who informed me about this blog, this webpage is actually
awesome.
WOW just what I was searching for. Came here by searching for root scaling and planing
I do not even know how I finished up right here, but I thought
this put up used to be great. I don’t recognise who you
might be however certainly you’re going to a well-known blogger for those who are not already.
Cheers!
Thanks on your marvelous posting! I genuinely enjoyed reading it, you can be a
great author. I will be sure to bookmark your
blog and will come back from now on. I want to encourage you
to definitely continue your great writing,
have a nice day!