Optimizar las imágenes antes de subirlas a WordPress mejora enormemente la velocidad de su sitio web. Sin embargo, muchos principiantes tienen sitios web lentos simplemente porque suben imágenes no optimizadas.
En WPBeginner, hacemos que las mejores prácticas de optimización de imágenes formen parte de nuestra rutina habitual de blogging. Nos aseguramos de que todos nuestros autores creen imágenes con las dimensiones correctas y luego reduzcan el tamaño del archivo de imagen utilizando una variedad de herramientas gráficas.
En este artículo, le mostraremos cómo optimizar sus imágenes para obtener un rendimiento web más rápido sin perder calidad. También compartiremos plugins de optimización automática de imágenes para WordPress que pueden hacerte la vida más fácil.
Dado que se trata de una guía exhaustiva sobre la optimización de imágenes para la web, hemos creado un índice fácil de seguir:
- What Is Image Optimization?
- What Are the Benefits of Image Optimization?
- How to Save and Optimize Images for Web Performance
- Best Image Optimization Tools and Programs
- Best Image Optimization Plugins for WordPress
- Final Thoughts and Best Practices for Image Optimization
- Expert Guides on Improving WordPress Performance
1. ¿Qué es la optimización de imágenes?
La optimización de imágenes es el proceso de guardar y entregar imágenes en el tamaño de archivo más pequeño posible sin reducir la calidad general de la imagen.
Aunque el proceso parece complejo, hoy en día es bastante fácil. Puedes utilizar uno de los muchos plugins y herramientas de optimización de imágenes para comprimirlas automáticamente hasta un 80% sin pérdida visible de calidad.
He aquí un ejemplo de una imagen optimizada frente a una no optimizada:
Como puede ver, cuando se optimiza correctamente, la misma imagen puede ser hasta un 80% más pequeña que la original sin pérdida de calidad. En este ejemplo, la imagen es un 52% más pequeña.
¿Cómo funciona la optimización de imágenes?
En términos sencillos, la optimización de imágenes funciona mediante la tecnología de compresión.
La compresión puede ser “con pérdida” o “sin pérdida”.
La compresión sin pérdidas reduce el tamaño total del archivo sin pérdida alguna de calidad de imagen. Con la compresión con pérdida, puede haber una pérdida menor de calidad, pero lo ideal es que no sea un aviso para tus visitantes.
¿Qué significa optimizar imágenes?
Es posible que haya recibido una recomendación para optimizar las imágenes del soporte de su alojamiento WordPress o de una herramienta de prueba de velocidad y se pregunte qué debe hacer.
Tendrás que reducir el tamaño de archivo de tus imágenes optimizándolas para la web. Te mostraremos cómo hacerlo paso a paso.
2. ¿Cuáles son las ventajas de la optimización de imágenes?
Aunque optimizar las imágenes tiene muchas ventajas, éstas son las principales que debe conocer:
- Mayor velocidad del sitio web
- Mejora del posicionamiento SEO
- Una mayor tasa de conversión global de ventas y clientes potenciales
- Menos almacenamiento y ancho de banda (lo que puede reducir los costes de alojamiento y CDN)
- Copias de seguridad de sitios web más rápidas (lo que puede reducir el coste del almacenamiento de copias de seguridad).
Las imágenes son el segundo elemento / artículo más pesado de una página web después de los vídeos. Según el archivo HTTP, las imágenes representan el 42% del peso total de una página web media.
Como sabemos que los sitios web rápidos se posicionan mejor en los motores de búsqueda (SEO) y tienen mejores conversiones, la optimización de imágenes es algo que todo sitio web empresarial debe hacer si quiere tener éxito en Internet.
Ahora te preguntarás hasta qué punto la optimización de las imágenes puede marcar la diferencia.
Según un estudio de Strangeloop, un retraso de un segundo en el tiempo de carga de un sitio web puede costarle un 7% de las ventas, un 11% menos de páginas vistas y una disminución del 16% en la satisfacción del cliente.
Si estas no son razones suficientes para acelerar su sitio web, debe saber que los motores de búsqueda como Google también dan un tratamiento SEO preferente a los sitios web que cargan más rápido.
Esto significa que al optimizar sus imágenes para la web, puede mejorar la velocidad del sitio web y aumentar la clasificación SEO de WordPress.
Tutorial en vídeo
Si prefiere instrucciones escritas, siga leyendo.
3. Cómo guardar y optimizar imágenes para mejorar el rendimiento de la Web
La clave de una correcta optimización de imágenes para el rendimiento web es encontrar el equilibrio perfecto entre el menor tamaño de archivo y una calidad de imagen aceptable.
Los tres aspectos que desempeñan un papel fundamental en la optimización de imágenes son:
- Formato de archivo de imagen (JPEG vs. PNG vs. GIF)
- Compresión (mayor compresión = menor tamaño del archivo)
- Dimensiones de la imagen (alto y ancho)
Si eliges la combinación adecuada de los tres, puedes reducir el tamaño de la imagen hasta un 80%.
Veamos cada una de ellas con más detalle.
1. Formato de archivo de imagen
Para la mayoría de los propietarios de sitios web, los tres únicos formatos de archivo de imagen que realmente importan son JPEG, PNG y GIF. La elección del tipo de archivo adecuado desempeña un perfil importante en la optimización de imágenes.
Para simplificar las cosas, conviene utilizar JPEG para fotos o imágenes con muchos colores, PNG para imágenes sencillas o transparentes y GIF solo para imágenes animadas.
Para quienes no conozcan la diferencia entre cada tipo de archivo, el formato de imagen PNG no está comprimido, lo que significa que es una imagen de mayor calidad. El inconveniente es que el tamaño de los archivos es mucho mayor.
Por otro lado, JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente menor.
Mientras que el GIF solo utiliza 256 colores junto con una compresión sin pérdidas, lo que lo convierte en la mejor opción para las imágenes animadas.
En WPBeginner, utilizamos los tres formatos de imagen en función del tipo de imagen.
2. Compresión
Lo siguiente es la compresión de imágenes, que desempeña un gran perfil en la optimización de imágenes.
Existen distintos tipos y niveles de compresión de imágenes. Los ajustes de cada uno variarán en función de la herramienta de compresión de imágenes que utilice.
La mayoría de las herramientas de edición de imágenes, como Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo y otras, incorporan características de compresión de imágenes.
También puedes guardar las imágenes normalmente y luego utilizar una herramienta web como TinyPNG o JPEGmini para facilitar su compresión.
Aunque requieren cierto esfuerzo manual, estos dos métodos permiten comprimir las imágenes antes de subirlas a WordPress, y esto es lo que hacemos en WPBeginner.
También hay varios plugins populares de WordPress como Optimole y EWWW Image Optimizer que pueden comprimir automáticamente las imágenes cuando las subes por primera vez. Esto es muy práctico, y muchos principiantes e incluso grandes empresas prefieren utilizar estos plugins de optimización de imágenes.
Compartiremos más acerca del uso de plugins de WordPress más adelante en el artículo.
3. Dimensiones de la imagen
Normalmente, cuando importas una foto de tu teléfono o de una cámara digital, tiene una resolución muy alta y unas dimensiones de archivo grandes (alto y ancho).
Normalmente, estas fotos tienen una resolución de 300 PPP y unas dimensiones a partir de 2000 píxeles y más. Aunque las fotos de alta calidad son adecuadas para la impresión o la autoedición, su gran tamaño las hace inadecuadas para sitios web.
Reducir las dimensiones de la imagen a algo más razonable puede disminuir significativamente el tamaño del archivo de imagen. Puedes cambiar el tamaño de las imágenes con un programa de edición de imágenes de tu ordenador.
Por ejemplo, optimizamos una foto con una resolución de 300 PPP y unas dimensiones de imagen de 4900×3200 píxeles. El tamaño original del archivo era de 1,8 MB.
Elegimos el formato JPEG para una mayor compresión y cambiamos las dimensiones a 1200×795 píxeles. El tamaño del archivo se redujo a sólo 103 KB. Es decir, un 94% menos que el tamaño del archivo original.
Ahora que ya conoce los tres factores importantes en la optimización de imágenes, echemos un vistazo a varias herramientas de optimización de imágenes para propietarios de sitios web.
4. Las mejores herramientas y programas de optimización de imágenes
Como hemos mencionado antes, la mayoría de los programas de edición de imágenes incluyen ajustes de optimización y compresión de imágenes.
Aparte del software de edición de imágenes, también hay varias potentes herramientas gratuitas de optimización de imágenes que puedes utilizar para optimizarlas para la web (con sólo unos clics).
Le recomendamos que utilice estas herramientas para optimizar las imágenes antes de subirlas a WordPress, sobre todo si es un perfeccionista.
Este método le ayuda a ahorrar espacio en disco en su cuenta de alojamiento de WordPress, y le garantiza la imagen más rápida con la mejor calidad, ya que usted revisa manualmente cada imagen.
Adobe Photoshop
Adobe Photoshop es una aplicación de edición de imágenes de primera calidad que permite exportar imágenes con un tamaño de archivo menor para la web.
En el cuadro de diálogo de exportación, puede elegir el formato de archivo de imagen (JPG, PNG, GIF) que le ofrezca el tamaño de archivo más pequeño.
También puedes reducir la calidad de la imagen, los colores y otras opciones para disminuir aún más el tamaño del archivo.
GIMP
GIMP es una alternativa gratuita y de código abierto a Adobe Photoshop. Se puede utilizar para optimizar sus imágenes para la web. El inconveniente es que no es tan fácil de usar como otras soluciones de esta lista.
Primero, necesita abrir su imagen en GIMP y luego seleccionar la opción Archivo ” Exportar como…. Aparecerá el cuadro de diálogo Exportar imagen, donde puede dar un nuevo nombre al archivo. A continuación, haga clic en el botón “Exportar”.
Ahora verás las opciones de exportación de imágenes. En el caso de los archivos JPEG, puede utilizar el carrusel / control deslizante “Calidad” para seleccionar el nivel de compresión y reducir el tamaño del archivo.
Por último, debe hacer clic en el botón “Exportar” para guardar el archivo de imagen optimizado.
TinyPNG
TinyPNG es una aplicación web gratuita que utiliza una técnica inteligente de compresión con pérdida para reducir el tamaño de tus archivos PNG y JPEG. Todo lo que tienes que hacer es ir a su sitio web y subir tus imágenes con solo arrastrar y soltar.
Comprimirán la imagen y te darán un enlace para descargarla.
También tienen una extensión para Adobe Photoshop, que es lo que utilizamos como parte de nuestro proceso de edición de imágenes porque te permite acceder a TinyPNG desde dentro de Photoshop.
Para los desarrolladores, disponen de una API para convertir imágenes automáticamente. Además, para los principiantes, tienen un plugin de WordPress que lo hará por ti. Hablaremos de esto más adelante.
JPEGmini
JPEGmini utiliza una tecnología de compresión sin pérdidas que reduce significativamente el tamaño de las imágenes sin afectar a su calidad percibida. También puedes comparar la calidad de la imagen original y la imagen comprimida.
Puedes utilizar su versión web de forma gratuita o comprar el programa para tu ordenador. También tienen una API de pago para automatizar el proceso para tu servidor.
ImageOptim
ImageOptim es una utilidad para Mac que permite comprimir imágenes sin perder calidad, encontrando los mejores parámetros de compresión y eliminando los perfiles de color innecesarios.
Una alternativa para Windows es Trimage.
5. Los mejores plugins de optimización de imágenes para WordPress
Creemos que la mejor forma de optimizar tus imágenes es hacerlo antes de subirlas a WordPress. Sin embargo, si tienes un sitio con varios autores o necesitas una solución automatizada, puedes probar un plugin de compresión de imágenes para WordPress.
Aquí está nuestra lista de los mejores plugins de compresión de imágenes para WordPress:
- Optimole, un popular plugin del equipo de ThemeIsle
- Optimizador de imágenes EWWW
- JPEG, PNG & WebP Image Compression, un plugin del equipo TinyPNG mencionado anteriormente.
- Imagify, un plugin del popular equipo WP Rocket
- Optimizador de imágenes ShortPixel
- Smush
- reSmush.it
- Envira Gallery es un plugin de WordPress para galerías con compresión de imágenes integrada.
Estos plugins de optimización de imágenes para WordPress te ayudarán a acelerar tu sitio web.
6. Reflexiones finales y mejores prácticas para la optimización de imágenes
Si no estás guardando imágenes optimizadas para la web, tienes que empezar a hacerlo ya. Supondrá una gran diferencia en la velocidad de su sitio, y sus usuarios se lo agradecerán.
Por no mencionar que los sitios web más rápidos son excelentes para el SEO, y es probable que vea un aumento en su posicionamiento en los motores de búsqueda.
Aparte de la optimización de imágenes, las dos cosas que le ayudarán significativamente a acelerar su sitio web son el uso de un plugin de caché de WordPress y el uso de un CDN de WordPress.
Como alternativa, puede utilizar una empresa de alojamiento gestionado de WordPress, ya que suelen ofrecer tanto almacenamiento en caché como CDN como parte de la plataforma.
Guías de expertos para mejorar el rendimiento de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo optimizar tus imágenes en WordPress. Puede que también quieras ver otros artículos relacionados con la mejora del rendimiento de WordPress:
- La guía definitiva para aumentar la velocidad y el rendimiento de WordPress
- Cómo acelerar el rendimiento de WooCommerce
- Los mejores plugins de caché de WordPress para acelerar su sitio web
- Cómo optimizar Core Web Vitals para WordPress (Guía definitiva)
- Cómo reducir el tiempo hasta el primer byte (TTFB) en WordPress – Consejos de expertos
- Cómo utilizar el plugin GTmetrix para mejorar el rendimiento de un sitio WordPress
- Alojamiento WordPress más rápido (pruebas de rendimiento)
- Métricas importantes que debe medir en su sitio de WordPress
- Cómo realizar correctamente una prueba de velocidad de un sitio web
- Cómo poner a prueba un sitio web WordPress
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Michelle N
Would love to say that this has been incredibly helpful, easy to digest and implement, I appreciate all the tools provided. Thank you!
– from a beginner blogger
WPBeginner Support
Glad our guide was helpful
Administrador
mohadese esmaeeli
By the way, another question I have is whether, when using image optimization plugins and optimizing previously uploaded images, the new images replace the old ones? Or do the original images remain in the WordPress media library, with the optimized images alongside them?
WPBeginner Support
It would depend on the specific plugin you are using as some will replace the image while others have the option to keep the original.
Administrador
Jiří Vaněk
Many of them give you a choice whether you want to keep the original images or delete them. From personal experience, I recommend keeping the original images on the website (at least as a backup).
mohadese esmaeeli
Hello,
Greetings to you. This article appears to be quite comprehensive. I became acquainted with your website a few days ago and started reading the articles. I have decided to implement the same process on my website as I read through these articles.
I quickly reached point 2, focusing on site speed. To be honest, I have been working on my site for just a few days, and I have only managed to achieve a 10% increase in site speed.
WPBeginner Support
An improvement is still an improvement, we’re glad to hear our guide is helpful
Administrador
mohadese esmaeeli
Yes, that’s exactly right. In this vast and competitive world, those who are always improving their website and offering something more than their competitors will be the winners. Otherwise, we will be the losers.
Moinuddin Waheed
Having optimizes images for websites or blogs is very important for the speed of the website.
Heavy image sizes takes time to load and causes the website to slow.
I have used some of the plugins for image optimisation.
But I think best option is to use caching plugins and CDN for the websites.
it lets the website speed not only fast but also helps in retaining the visitors.
WPBeginner Support
CDNs are normally for speed instead of retention but a fast loading site does help keep your visitors and helps make them want to return
Administrador
Lewis
First of all, it’s important to note that not all image file types are created equal. JPEGs are generally going to be much smaller in file size than PNGs, for example, so it’s important to choose the right file type for the job.
Additionally, when it comes to resizing images, you should always resize them before you upload them to your website. This way, you can avoid having to serve oversized images to your visitors, which can slow down your site.
Finally, I wanted to point out that there are a number of plugins available that can help you automate the process of optimizing your images. WP Smush is a great option that can help you save time and ensure that your images are always properly optimized.
WPBeginner Support
Thanks for sharing your comment
Administrador
Rebecca Gelsi
This is brilliant, thank you. I’m using JPEGmini after reading this article and am so relieved to have this aspect of our site sorted.
Andy
Thanks for the normal and simple explanation. I made a few mistakes with my photo content on my site, but with the help of your explanations, I figured out exactly what I needed to do. Thank you!
WPBeginner Support
Glad our guide was helpful
Administrador
Tania
So helpful!! Thank you for sharing. Quick question – If I compress my images to an optimal/acceptable KB size directly in Photoshop using the Save for web setting mentioned above, and then upload to Wordpress…is there a need to also run Shortpixel or another image compression plugin? Or is that redundant?
Trying to understand if there are added benefits to using a plugin vs Photoshop. Would love to hear your thoughts. Thanks!
WPBeginner Support
The plugins are an alternative, if you optimize your images before uploading them, you wouldn’t need to use an image optimization plugin
Administrador
Shiv Raj Bhatt
Great idea to optimize images for faster loading website. Thanks for the info.
WPBeginner Support
Glad you like our content
Administrador
Lauren
Excellent and thorough! Thank you!
WPBeginner Support
Glad our guide was helpful
Administrador
Eddier Naranjo
The optimization plugins make a copy of the “heavy” image and serve the optimized version. But that increases the storage space on the site.
Is there a way to delete the old version and leave only the optimized image?
WPBeginner Support
We would recommend checking with the support for the plugin that you are using as they normally have an option to remove the unoptimized version.
Administrador