¿Sabías que optimizar tus imágenes antes de subirlas a WordPress puede tener un gran impacto en la velocidad de tu sitio web?
Cuando empiezan un blog, muchos novatos suben imágenes sin asegurarse de que están optimizadas para la web. Estos grandes archivos de imagen ralentizan tu sitio web.
Puedes solucionarlo aplicando las mejores prácticas para la optimización de imágenes como parte de tu rutina normal de blogging.
En este artículo, te mostraremos cómo optimizar las imágenes para la web sin sacrificar la calidad. También te hablaremos de los plugins de WordPress que optimizan automáticamente las imágenes y te hacen la vida más fácil.
¿Qué es la optimización de imágenes?
La optimización de imágenes es el proceso de guardar y enviar imágenes en el tamaño de archivo más pequeño posible sin perder calidad.
La optimización de imágenes es el proceso de reducir el tamaño del archivo de una imagen sin degradar significativamente su calidad. Esto se consigue eliminando datos innecesarios del archivo de imagen, como metadatos e información de color innecesaria. La optimización de imágenes puede realizarse manualmente mediante un programa de edición de imágenes, o automáticamente con herramientas especializadas y servicios en línea.
Aunque parezca difícil, hoy en día el proceso es bastante sencillo. Puedes utilizar uno de los muchos plugins y herramientas de optimización de imágenes para reducir automáticamente el tamaño de las imágenes hasta en un 80% sin perder nada de su calidad.
En primer lugar, veamos cómo se almacenan los archivos de imagen y cómo funciona la optimización.
¿Cómo se guardan las imágenes?
Una imagen está formada por cuadrados de color llamados píxeles. El esquema de color general de la imagen se compone de los colores de cada píxel.
Por ejemplo, la imagen de abajo tiene 736 píxeles. Cada píxel tiene tres colores: rojo, verde y azul. Por tanto, esta imagen tiene 2.316 colores:
Ahora, cuando tu navegador web recibe una imagen, configura un búfer de imagen, escribe cada píxel de la imagen en el búfer y luego dibuja cada línea de píxeles desde el búfer para crear la imagen final en la pantalla.
Cada píxel se almacena en una unidad denominada “byte”. Así, si cada píxel se compone de tres colores y cada color está definido por cuatro bits (lo que da 16 millones de opciones), toda la imagen se compone de 64 KB (64.000 bytes) de colores.
Por eso JPEG y PNG siguen siendo en el año 2022 los formatos más comunes para almacenar imágenes.
El formato JPEG (Joint Photographic Experts Group) es “con pérdidas”, lo que significa que pierde algo de información cuando comprime el archivo para hacerlo más pequeño.
El formato PNG (Portable Network Graphics) es un formato sin pérdidas, es decir, no pierde información al comprimir las imágenes. Esto ayuda a que las imágenes mantengan toda su calidad.
Por eso, cuando optimizamos imágenes, perdemos algo de información a propósito en los JPEG para poder reducir el tamaño del archivo sin perder demasiada calidad de imagen. Cuando la gente solicite estas imágenes comprimidas en el futuro, su navegador web las recreará y las mostrará en pantalla.
He aquí un ejemplo de una imagen optimizada frente a una no optimizada:
Como puedes 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?
La optimización de imágenes consiste en eliminar datos innecesarios de un archivo de imagen, como metadatos e información de color innecesaria, sin degradar significativamente su calidad visual. Esto puede hacerse manualmente con programas de edición de imágenes, como Adobe Photoshop o GIMP, o automáticamente con herramientas especializadas y servicios en línea.
En términos sencillos, la optimización de imágenes funciona utilizando tecnología de compresión.
La compresión de imágenes 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 perceptible para sus visitantes.
¿Qué significa optimizar imágenes?
Es posible que hayas recibido una recomendación para optimizar las imágenes del soporte de tu hosting WordPress o de una herramienta de test de velocidad y te preguntes qué tienes que hacer.
Tendrás que reducir el tamaño de archivo de tus imágenes optimizándolas para la web. Le mostraremos cómo hacerlo paso a paso.
¿Cuáles son los beneficios 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
- Mejor posicionamiento SEO
- Mayor tasa de conversión de ventas y clientes potenciales
- Menos almacenamiento y ancho de banda (lo que puede reducir los costes de alojamiento y CDN)
- Copias de seguridad del sitio web más rápidas (lo que puede reducir el coste de almacenamiento de las copias de seguridad)
Las imágenes son el segundo elemento más pesado de una página web después del vídeo. Según el archivo HTTP, las imágenes representan el 21% del peso total de una página web media.
Como sabemos que las páginas web rápidas se posicionan mejor en los motores de búsqueda (SEO) y tienen mejores conversiones, la optimización de imágenes es algo que toda página web empresarial debe hacer si quiere tener éxito online.
Ahora te estarás preguntando cómo de grande puede ser la diferencia en la optimización de imágenes.
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. Último argumento: Las imágenes optimizadas ocupan menos espacio de almacenamiento en su servidor, lo que significa copias de seguridad más rápidas.
Cómo guardar y optimizar imágenes para el rendimiento web
La clave del éxito de la optimización de imágenes para el rendimiento web consiste en encontrar el equilibrio perfecto entre el menor tamaño de archivo y una calidad de imagen aceptable.
Las tres cosas que juegan un papel masivo en la optimización de imágenes son:
Formato de archivo de imagen (JPEG vs PNG vs GIF vs WebP)
Compresión (mayor compresión = menor tamaño de archivo)
Dimensiones de la imagen (alto y ancho)
Si eliges la combinación correcta de los tres, puedes reducir el tamaño de tu imagen hasta en 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 únicos cuatro formatos de archivo de imagen que realmente importan son JPEG, PNG, GIF y WebP. Elegir el tipo de archivo correcto juega un papel importante en la optimización de imágenes.
Para simplificar las cosas, le conviene utilizar JPEG o WebP para fotos o imágenes con muchos colores, PNG para imágenes sencillas o cuando necesite imágenes transparentes, y GIF sólo 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 para imágenes que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente menor.
Mientras que GIF sólo utiliza 256 colores junto con una compresión sin pérdidas, lo que lo convierte en la mejor opción para imágenes animadas.
WebP es un formato de imagen desarrollado por Google en 2010 que utiliza un algoritmo de compresión con y sin pérdidas para reducir el tamaño de archivo de las imágenes sin degradar significativamente su calidad visual. Fue diseñado para ser una alternativa a los populares formatos JPEG y PNG, ofreciendo una calidad de imagen similar o mejor con un tamaño de archivo menor. En general, las imágenes WebP son más pequeñas que las JPEG y PNG de calidad similar. Esto las acelera y las hace bastante eficientes para su uso en la web.
WebP es compatible con muchos navegadores modernos, como Google Chrome, Mozilla Firefox y Opera. También es compatible con un número creciente de programas de edición de imágenes, como Adobe Photoshop, GIMP y Pixelmator.
En nuestro sitio web utilizamos los cuatro formatos de imagen en función del tipo de imagen.
2. Compression
Lo siguiente es la compresión de imágenes, que desempeña un papel muy importante en la optimización de imágenes.
Existen diferentes tipos y niveles de compresión de imágenes. La configuración de cada uno variará en función de la herramienta de optimización de imágenes que utilices.
La mayoría de las herramientas de edición de imágenes como Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo y otras vienen con funciones de compresión de imágenes incorporadas.
También puedes guardar las imágenes normalmente y luego utilizar una herramienta web como TinyPNG o JPEGmini para facilitar la compresión de imágenes.
Aunque requieren cierto esfuerzo manual, estos dos métodos le permiten comprimir imágenes antes de subirlas a WordPress, y esto es lo que hacemos en Commander-SEO.
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 conveniente, y muchos principiantes e incluso las grandes empresas prefieren utilizar estos plugins de optimización de imágenes.
Compartiremos más sobre el uso de plugins de WordPress más adelante en el artículo.
3. Image Dimensions
Cuando importas una foto desde tu teléfono o una cámara digital, tiene una resolución muy alta y unas dimensiones de archivo grandes (alto y ancho).
Estas fotos tienen una resolución de 300 DPI y 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 los 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, hemos optimizado 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 101 KB. Es decir, un 94% menos que el tamaño del archivo original.
Ahora ya conoces los factores más 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.
Las mejores herramientas y programas de optimización de imágenes
La mayoría de los programas de edición de imágenes incluyen opciones de optimización y compresión.
Existen varias potentes herramientas gratuitas de optimización de imágenes que puedes utilizar para optimizarlas para la web (con sólo unos clics).
Recomendamos utilizar estas herramientas para optimizar las imágenes antes de subirlas a WordPress.
Esto le ayuda a ahorrar espacio en disco en su cuenta de alojamiento de WordPress, y garantiza la imagen más rápida con la mejor calidad.
Adobe Photoshop
Adobe Photoshop es una aplicación premium de edición de imágenes que te permite exportar imágenes con un tamaño de archivo más pequeño para la web.
En el diálogo de exportación, puedes elegir un formato de archivo de imagen (JPG, PNG, GIF) que te proporcione 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.
Si exportas la imagen, puedes reducir el nivel de calidad de la compresión JPG y comprobar si el resultado se ajusta a tus necesidades.
Como alternativa, puedes utilizar el comando específico “Guardar para Web”. Optimiza el archivo de imagen para su visualización en línea. Esto es importante, ya que el comando “Guardar” normal puede acabar creando archivos 2-3 veces más grandes que el comando “Guardar para Web”. En el menú “Guardar para Web”, tenemos que hacer algunas selecciones.
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, necesitas abrir tu imagen en GIMP y luego seleccionar la opción Archivo ” Exportar como…. Aparecerá el cuadro de diálogo Exportar imagen, en el que puede asignar 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, puedes utilizar el control deslizante “Calidad” para seleccionar el nivel de compresión y reducir el tamaño del archivo.
Por último, haz clic en el botón “Exportar” para guardar el archivo de imagen optimizado.
Pixelmator
Pixelmator es un popular software de edición de imágenes para Mac y dispositivos iOS. Es conocido por su interfaz fácil de usar y sus potentes herramientas de edición, que lo convierten en una opción popular para fotógrafos profesionales y aficionados, diseñadores gráficos y otros profesionales creativos.
Pixelmator tiene muchas herramientas para editar imágenes, como herramientas para cambiar colores y tonos, retocar y arreglar imágenes, y añadir filtros y efectos. Cuenta con una gran variedad de tutoriales y otras herramientas para ayudar a los usuarios a aprender a utilizar el software y mejorar sus habilidades.
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 un simple arrastrar y soltar.
Comprimirán la imagen y te darán un enlace de descarga.
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, tienen una API para convertir imágenes automáticamente, y para los principiantes, tienen un plugin para WordPress que lo hará por ti. Más sobre esto más adelante.
Kraken.io
Kraken.io es otro optimizador de imágenes en línea que puedes utilizar. Al igual que TinyPNG, es gratuito (con una opción premium) y permite comprimir imágenes en bloque.
Sin embargo, ofrece más opciones de compresión que TinyPNG: por ejemplo, puedes elegir entre tres modos de optimización, con y sin pérdidas. Con la compresión con pérdida, puede reducir significativamente el tamaño de su archivo de imagen eliminando grandes cantidades de datos de la imagen. Por su parte, la compresión sin pérdidas reduce el tamaño del archivo sin eliminar ningún dato de la imagen. Por lo tanto, este método es ideal para imágenes de alta calidad.
JPEGmini
JPEGmini es un excelente optimizador de imágenes. 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 perceptiva. También puede comparar la calidad de su imagen original y la imagen comprimida.
ImageOptim
ImageOptim es una herramienta para Mac que te permite comprimir imágenes sin perder calidad encontrando los mejores parámetros de compresión y eliminando perfiles de color innecesarios. Utiliza cualquier método de compresión que desee (JPEG, PNG, GIF, SVG, etc.) y combina varias imágenes en una sola si lo desea.
Best Image Optimization Plugins for WordPress
Creemos que la mejor forma de optimizar tus imágenes es hacerlo antes de subirlas a WordPress. Sin embargo, si tiene un sitio con varios autores o necesita una solución automatizada, puede 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, a popular plugin by the team behind ThemeIsle
-
EWWW Image Optimizer
-
JPEG, PNG & WebP Image Compression, a plugin by the TinyPNG team mentioned above
-
Imagify, a plugin by the popular WP Rocket team
-
Smush – an excellent Image Optimizer Plugin
Estos plugins de optimización de imágenes para WordPress le ayudarán a acelerar su sitio web comprimiendo sus imágenes de forma muy eficaz.
Reflexiones finales y mejores prácticas para la optimización de imágenes
Si no está guardando imágenes optimizadas para su sitio WordPress, entonces necesita empezar a hacerlo ahora. Hará una gran diferencia en la velocidad de su sitio y los tiempos de carga de página, y sus usuarios se lo agradecerán.
Sitios web más rápidos son excelentes para SEO, y es probable que vea un aumento en su ranking en los motores de búsqueda.
Aparte de la optimización de imágenes, las dos cosas que acelerarán su sitio web son el uso de un plugin de caché de WordPress y el uso de un CDN de WordPress como Cloudflare, por ejemplo.
Alternativamente, puede utilizar una empresa de alojamiento gestionado de WordPress. A menudo ofrecen tanto el almacenamiento en caché como la CDN como parte de la plataforma.
Esperamos que este artículo te haya ayudado a aprender cómo optimizar tus imágenes en WordPress. También puedes consultar nuestra guía sobre cómo mejorar la seguridad de WordPress y cómo comprobar el rendimiento de tu sitio web a través de Google Performance Insights.
Preguntas más frecuentes
La forma más fácil y eficaz de optimizar imágenes JPEG para la web es utilizar una herramienta de compresión de archivos. Estas herramientas hacen gran parte del trabajo pesado por usted utilizando algoritmos avanzados para identificar y eliminar datos innecesarios. Esto puede reducir drásticamente el tamaño de las imágenes con un impacto mínimo en la calidad.
Usa una resolución más baja
El tamaño de una imagen JPEG viene determinado por la combinación de su anchura y altura. El tamaño de estos valores determina el tamaño del propio archivo, así que para reducir el tamaño de tus imágenes, deberías probar a reducir la resolución.
La resolución de una imagen se mide en píxeles por pulgada (ppp). La resolución estándar para las fotos digitales modernas es de 300 ppi, lo que da como resultado un archivo 12 veces mayor de lo que sería si se guardara a 72 ppi.
Si guardas las imágenes a una resolución inferior, serán más pequeñas sin perder mucho detalle (si es que pierden alguno). Para optimizar un JPEG para la web, debes reducir la resolución de la imagen al mínimo aceptable, reducir los niveles de color de la imagen (esto disminuirá el tamaño del archivo) y reducir la densidad de píxeles de la imagen (normalmente, esto no es un factor para reducir el tamaño del archivo).
Recuerde que, al optimizar imágenes, debe tener siempre presente el mismo nivel de calidad. Reducir la resolución puede dar como resultado una imagen menos nítida, por ejemplo, pero si no necesitas ese nivel de nitidez, no tiene sentido cargar con el peso extra de datos innecesarios.
El tamaño de imagen más importante es de 2500 píxeles para que la mayoría de los sitios web se extiendan a pantalla completa en todos los navegadores. Las imágenes más grandes podrían desaparecer o verse borrosas al tener que ocupar todo el ancho del navegador. Las imágenes más pequeñas se mostrarán pixeladas y de baja calidad.
Tu imagen llenará el ancho del navegador sin perder calidad cuando se muestre al 100%. Sitios como Twitter, Instagram y otros recomiendan este tamaño como su propio tamaño de foto de perfil. Además, este tamaño funciona perfectamente en pantallas de ordenadores de sobremesa y portátiles de alta resolución.
TinyPNG es una herramienta en línea que utiliza técnicas de compresión perdidas para la reducción del tamaño de los archivos. Sólo tienes que arrastrar y soltar tu imagen en su sitio web y cargarla con un solo clic. Este proceso de compresión te proporciona una URL de descarga.
Además de TinyPNG, existen muchas otras herramientas para optimizar imágenes en línea. Algunas de ellas son
ImageOptimizer – servicio gratuito en línea, puede cambiar el tamaño, comprimir y optimizar sus archivos de imagen.
ImageKit – Una herramienta que reduce el tamaño de las imágenes hasta en un 70%.
Image Optim – Herramienta en línea que optimiza imágenes jpeg y png para la web.
El SEO (Search Engine Optimization, optimización para motores de búsqueda) incluye la optimización de imágenes porque puede ayudar a que un sitio web aparezca mejor clasificado en los resultados de los motores de búsqueda. Al optimizar las imágenes de un sitio web, las empresas y las personas pueden mejorar su velocidad y rendimiento, lo que puede ayudar a mejorar su posición en los resultados de los motores de búsqueda.
Cuando un usuario realiza una búsqueda en un motor de búsqueda, éste rastrea la web para encontrar sitios web relevantes y de alta calidad que mostrar en los resultados de búsqueda. Como parte de este proceso, el motor de búsqueda también examina las imágenes de un sitio web y tiene en cuenta su tamaño, calidad y relevancia a la hora de decidir cómo clasificar el sitio web.
Si las imágenes de un sitio web no están optimizadas, pueden hacer que tarde más en cargarse, lo que puede perjudicar la posición del sitio web en los resultados del motor de búsqueda. Las imágenes grandes y de alta resolución pueden tardar más en cargarse, lo que puede hacer que un sitio web parezca lento y no responda a los usuarios. Esto puede hacer que la gente abandone el sitio y busque otro más rápido y fácil de usar.
Por otro lado, si las imágenes de un sitio web están optimizadas, pueden ayudar a que el sitio funcione mejor y más rápido. Las imágenes que han sido optimizadas son más pequeñas y de mayor calidad, lo que puede ayudar a que un sitio web cargue más rápido y ofrezca al usuario una mejor experiencia. Esto puede ayudar a que el sitio web se posicione mejor en los resultados de los motores de búsqueda, lo que aumenta las probabilidades de que la gente lo encuentre y lo visite.
La optimización de imágenes es una parte fundamental del SEO porque puede ayudar a que un sitio web aparezca mejor en los resultados de los motores de búsqueda. Al optimizar las imágenes de un sitio web, las empresas y las personas pueden acelerar y mejorar el rendimiento de su sitio web. Esto puede ayudar a su clasificación y atraer a más personas a su sitio web.
Otros artículos de nuestro blog
6 Top Places to Hire WordPress Developers
Sometimes you need the help of a WordPress Professional. As WordPress is so widely used, there is no shortage of
Top 10 Mistakes Small Business Owners Make When Using SEO
Know Which Common SEO Mistakes to Avoid to Grow Your Local Business In spite of the importance of search engine