Guías/Crear contenido/Medios/Optimización de imágenes

Optimización de imágenes

Para ofrecer a los visitantes de tu web la mejor experiencia, es importante que las imágenes de tu web se carguen rápido. En esta guía, podrás aprender cómo optimizar tus imágenes reduciendo el tamaño del archivo, pero conservando la calidad de la imagen.

Tamaño de imagen recomendado

Una web de WordPress puede tener una infinidad de temas, diseños y otros factores que determinan el tamaño de imagen recomendado. Por lo tanto, no hay un tamaño único que podamos recomendarte. Por lo general, puedes configurar los tamaños de tus imágenes para que sean tan grandes como necesites y que no superen ese tamaño.

Las cámaras digitales y los smartphones modernos capturan imágenes de alta calidad con archivos de gran tamaño. Al mostrar estas imágenes en una web, puedes reducir el tamaño del archivo un 50 % o más y mantener la calidad para los espectadores.

Puedes comprobar el tamaño del archivo y las dimensiones en el panel Editar imagen de la biblioteca de medios. Para ello, sigue estos pasos:

  1. Accede a la biblioteca de medios del escritorio de tu sitio.
  2. Haz clic en la miniatura de la imagen de la que quieres comprobar el tamaño del archivo y las dimensiones.
  3. La miniatura aparecerá con un borde alrededor y verás un número en la esquina inferior derecha.
  4. Haz clic en el botón «Editar».
  5. Verás el tamaño del archivo y las dimensiones en el panel Editar.
Captura de pantalla del panel Editar imagen, donde se muestran el tamaño del archivo, las dimensiones y otros detalles de la imagen.

Echa un vistazo a la imagen en tu sitio. ¿Se ve en alta calidad, pero tarda en cargarse? Por ejemplo, si tiene 5000 px de ancho, te recomendamos que la reduzcas a 2500 px. Si aun así se ve bien, intenta reducir aún más el tamaño de la imagen, a 2000 px o 1800 px de ancho, hasta que encuentres el equilibrio perfecto entre calidad y tamaño de la imagen.

Las siguientes secciones de esta guía te mostrarán cómo reducir el tamaño de la imagen con diferentes herramientas.

Reducción del tamaño de las imágenes con software gratuito

Hay muchos métodos que puedes usar para cambiar el tamaño de las imágenes. En las siguientes secciones, trataremos tanto herramientas disponibles en tu ordenador como programas en línea y software más avanzado.

Windows

En un ordenador Windows, puedes utilizar Microsoft Paint. Abre la imagen con ese programa y haz clic en Cambiar tamaño en la parte superior de la ventana de Paint. Puedes reducir el tamaño de la imagen usando porcentajes y guardar la nueva versión más pequeña.

Mac

En un ordenador Mac, puedes utilizar la aplicación Preview. Abre la imagen con la aplicación, haz clic en Herramientas y, a continuación, en «Ajustar tamaño».

Herramientas en línea

Si estás buscando una manera rápida de reducir el tamaño de las imágenes, puedes usar una de las muchas herramientas gratuitas que hay en Internet, como las siguientes:

Con estos servicios, puedes subir tu imagen, elegir un nuevo tamaño y exportar la nueva versión. Ten en cuenta que estos servicios no están asociados con WordPress.com.

Aplicación móvil Jetpack

Si publicas contenido en tu sitio con la aplicación de Jetpack, esta aplicación puede optimizar las imágenes. Por defecto, la opción «Optimizar imágenes» está activada. Puedes establecer el «Tamaño máximo de subida de imágenes» para que el archivo original se ajuste automáticamente cuando lo subas.

En la aplicación Jetpack para iPhone y la aplicación Jetpack para Android, si quieres modificar los ajustes, puedes seguir estos pasos:

  1. Accede a la aplicación de Jetpack en tu teléfono.
  2. Haz clic en el icono de tu perfil en la parte inferior derecha.
  3. Haz clic en «Ajustes de la aplicación».

Puedes desactivar la opción «Optimizar imágenes» (aunque no lo recomendamos) o ajustar el «Tamaño máximo de subida de imágenes». El valor por defecto es de 2000 x 2000 px.

El ajuste Tamaño máximo de subida de imágenes está resaltado.
Ajustes de iOS
El ajuste Optimizar imágenes está activado.
Ajustes de Android

Editor de imágenes GIMP

Si quieres tener más control sobre cómo se optimiza la imagen, puedes reducir el tamaño de la imagen usando GNU Image Manipulation Program (GIMP), una alternativa gratuita a Photoshop que se puede instalar en Windows, Mac, Linux y otros sistemas operativos.

Para reducir el tamaño de la imagen, haz lo siguiente:

  1. Abre la imagen en GIMP.
  2. Haz clic en Imagen en la barra de herramientas y selecciona «Escalar la imagen».
  3. En el tamaño de la imagen, cambia el valor del ancho al tamaño que quieras.
  4. Haz clic en Escalar.
  5. Selecciona Archivo en la barra de herramientas. A continuación, elige «Exportar como».
  6. Dale un nombre al archivo que acabe en «.jpg».
  7. Selecciona Exportar.
  8. En el cuadro de diálogo que se abre, cambia la calidad a 60 (o el valor que quieras).
  9. Haz clic en Opciones avanzadas.
  10. Cambia el Submuestreo a 4:2:0 (un cuarto del croma).
  11. Haz clic en Exportar.

A continuación, te mostramos una comparación de los resultados. Usa el control deslizante para ver cada imagen al completo:

The left image has a file size of 1,072KB. The right image has a file size of just 384KB, yet there is no noticeable loss of quality!

Otro software de edición de imágenes

Hay otras herramientas de software de edición de imágenes que pueden tener opciones sencillas para cambiar el tamaño y comprimir fotos rápidamente por lotes:

También puedes utilizar servicios web:

Sitios con plugins activados

Si tu plan de WordPress.com es compatible con plugins, puedes aprovechar nuestro acelerador de sitios de Jetpack (CDN) integrado para acelerar automáticamente los tiempos de carga de las imágenes.

  1. Dirígete al escritorio de tu sitio.
  2. Ve a Jetpack → Ajustes.
  3. Haz clic en la pestaña «Rendimiento».
  4. Desplázate hacia abajo hasta la sección «Rendimiento y velocidad».
La sección «Rendimiento y velocidad» de los ajustes de rendimiento de Jetpack.
Acelerador de sitios

Pantallas Retina

Las pantallas Retina tienen una densidad de píxeles mucho mayor que las pantallas normales, lo que puede hacer que las imágenes con una densidad de píxeles normal se muestren borrosas. Para evitarlo, si detectamos una pantalla Retina, servimos la imagen al doble del tamaño para que se muestre con la máxima nitidez. Esto solo funciona si la imagen tiene un tamaño mayor en la biblioteca de medios que en tu sitio.

Aunque se muestre al doble del tamaño máximo de tu sitio, un archivo de imagen debe ser considerablemente más pequeño que la resolución completa utilizada por tu cámara para que puedas optimizar tus imágenes y hacer que se vean bien en las pantallas Retina.

Copied to clipboard!