Cómo optimizar imágenes con Photoshop para tu web (peso, tamaño y formato)

Durante años, antes de subir cualquier imagen a WordPress, la pasaba por Adobe Photoshop para dejarla en su punto: el tamaño justo, el menor peso posible y el formato correcto. De ese flujo de trabajo diario nació este artículo. No es un manual enciclopédico de Photoshop —para retoque avanzado hay gente que sabe muchísimo más que yo—, sino la guía práctica que a mí me habría gustado tener: lo mínimo que necesitas saber para que tus imágenes no ralenticen tu web.

Y ojo, porque esto no es un capricho estético. Una imagen mal optimizada es una de las causas más habituales de que una página cargue lenta, y la velocidad de carga afecta directamente a tu SEO y a la experiencia de quien te visita.

Por qué optimizar tus imágenes antes de subirlas

Cuando subes una foto de 3.000 píxeles y 4 MB a un hueco que en tu web se muestra a 800 píxeles, estás obligando al navegador de cada visitante a descargar cuatro megas para luego encogerlos. Es un desperdicio enorme, y se paga en tres frentes:

• Velocidad de carga. Las imágenes suelen ser el elemento más pesado de una página. Optimizarlas es, casi siempre, la forma más rápida de acelerar un sitio.
• Core Web Vitals y SEO. Google mide la experiencia de carga con métricas como el LCP (Largest Contentful Paint), y en la mayoría de páginas ese «elemento más grande» es precisamente una imagen. Imágenes ligeras = mejor LCP = mejor señal para Google.
• Consumo de datos y conversión. Quien te visita desde el móvil con datos limitados agradece que la página no le devore la tarifa. Y una web lenta pierde visitas antes incluso de mostrarse.

Un consejo que me encuentro constantemente: muchos diseñadores entregan webs preciosas con imágenes de altísima calidad, pero sin pensar en el SEO. Esas imágenes pesan demasiado y ralentizan el sitio. Revisa si es tu caso.

Los tres pilares de una imagen bien optimizada

Optimizar una imagen para web se reduce a controlar tres cosas. Si dominas estas tres, tienes el 95% del trabajo hecho:

1. Dimensiones — el ancho y alto en píxeles.
2. Peso — cuántos KB o MB ocupa el archivo.
3. Formato — JPG, PNG o WebP, según el tipo de imagen.

Vamos una por una y luego con los pasos concretos en Photoshop.

1. Dimensiones (ancho y alto)

La dimensión es el ancho y el alto de la imagen, expresados en píxeles. La regla es sencilla: una imagen no debería ser más grande que el espacio en el que se va a mostrar.

Si en tu plantilla el ancho del contenido es de 800 píxeles, no tiene ningún sentido subir una imagen de 3.000. Antes de nada, averigua a qué ancho máximo se muestran las imágenes en tu tema (normalmente entre 700 y 1200 px para el cuerpo del artículo) y redimensiona a ese valor.

Truco: si dudas del ancho real, haz clic derecho sobre una imagen ya publicada en tu web y usa «Inspeccionar» en el navegador para ver a cuántos píxeles se está mostrando.

2. Peso

El peso es cuánto ocupa el archivo en disco (KB o MB). Cuanto menos pese, más rápido carga. Como referencia práctica:

• Imágenes de contenido dentro de un artículo: por debajo de 100 KB siempre que puedas.
• Imágenes destacadas o de cabecera a ancho completo: intenta no pasar de 150–200 KB.

El peso baja de dos formas: reduciendo las dimensiones (ya liberas muchísimo) y aumentando la compresión. La compresión es la forma en que se codifica la imagen: cuanto más comprimes, menos pesa… pero también baja la calidad. El arte está en encontrar el equilibrio donde la imagen sigue viéndose bien y ocupa lo mínimo.

3. Formato

El formato determina cómo se guarda y comprime la imagen. Los tres que te interesan:

Formato	Cuándo usarlo	Notas
JPG / JPEG	Fotografías y cualquier imagen sin zonas transparentes	Comprime muy bien, es la opción por defecto para fotos
PNG	Logos, iconos, capturas con texto o transparencias	Pesa más que JPG; úsalo solo si necesitas transparencia o bordes muy nítidos
WebP	Casi todo, si tu web lo admite	Formato moderno de Google: mismo aspecto que JPG/PNG con un 25–35% menos de peso

Si tu imagen no necesita transparencia, usa JPG. Si la necesita, PNG. Y si tu WordPress admite WebP (hoy la mayoría de temas y navegadores lo hacen), es la mejor opción de todas para peso.

Cómo redimensionar una imagen en Photoshop (paso a paso)

Este es el primer paso y el que más peso te ahorra. Imagina que has comprado una imagen en un banco y viene a 3000×3000 px con máxima calidad. Para dejarla lista para web:

1. Abre Adobe Photoshop y carga la imagen (Archivo → Abrir).
2. Ve al menú Imagen → Tamaño de imagen (o Alt + Ctrl + I).
3. En la ventana emergente, asegúrate de que el icono de la cadena (mantener proporciones) esté activado, para que al cambiar el ancho el alto se ajuste solo.
4. Cambia la anchura al ancho que debe tener en tu web (por ejemplo, 1000 px).
5. Sobre la resolución: para web solo importan los píxeles, no los DPI. El clásico «72 ppp» es una convención inofensiva; lo que de verdad reduce el peso es bajar las dimensiones en píxeles, no tocar los DPI.
6. Acepta y pasa a exportar.

Cómo reducir el peso y exportar para web

Con las dimensiones ya ajustadas, toca comprimir y guardar en el formato correcto. Photoshop te da dos caminos.

Opción A: Guardar para web (heredado)

Es la herramienta de toda la vida y sigue siendo la más cómoda para ver el peso en tiempo real:

1. Ve a Archivo → Exportar → Guardar para web (heredado) o pulsa Alt + Shift + Ctrl + S.
2. Arriba a la derecha, elige el formato: JPEG para fotos, PNG si necesitas transparencia.
3. Ajusta la Calidad. Bájala poco a poco (prueba con 60–70) y observa la previsualización: en cuanto empieces a ver pérdida fea de calidad, sube un poco. En la esquina inferior izquierda ves el peso final en tiempo real, que es lo que te guía.
4. Marca Convertir en sRGB. Además de que la imagen se verá bien en cualquier pantalla, ayuda a reducir peso.
5. Comprueba que el peso está donde quieres y pulsa Guardar.

Opción B: Exportar como (y WebP)

En versiones modernas de Photoshop:

1. Ve a Archivo → Exportar → Exportar como (Alt + Shift + Ctrl + W).
2. En «Formato», elige JPG, PNG o WebP.
3. Ajusta la calidad y, si quieres, redimensiona ahí mismo con «Tamaño de imagen».
4. Exporta.

Si tu web admite WebP, aquí es donde consigues el mejor resultado: misma imagen, bastante menos peso.

Recortar lo que sobra: tamaño de lienzo y herramienta Recortar

A veces la imagen tiene espacio extra que no aporta nada, y recortarla es una forma directa de quitar peso y mejorar el encuadre.

Con Tamaño de lienzo (para recortes precisos por lados):

1. Imagen → Tamaño de lienzo.
2. Trabaja en píxeles y usa el ancla para decidir por dónde recortas (por igual en todos los lados o solo por abajo, por ejemplo).
3. Introduce las nuevas medidas y acepta.

Con la herramienta Recortar (más libre): selecciónala en la barra de herramientas y ajusta el marco con el ratón donde quieras. Muy útil cuando quieres reencuadrar a ojo.

¿Cuánto debe pesar y medir una imagen para web? (guía rápida)

Para que no tengas que pensarlo cada vez, estas son mis referencias:

• Ancho: al ancho real de tu plantilla (habitualmente 800–1200 px para el cuerpo).
• Peso: por debajo de 100 KB en imágenes de contenido; 150–200 KB como techo en destacadas grandes.
• Formato: WebP si puedes; si no, JPG para fotos y PNG solo para transparencias.
• Espacio de color: sRGB siempre.
• Nombre del archivo: descriptivo y con guiones (optimizar-imagen-photoshop.jpg), no IMG_2043.jpg. Ayuda al SEO de imágenes.

¿Photoshop o un plugin de WordPress? Mi opinión honesta

Aquí toca ser sincero: hoy no siempre hace falta abrir Photoshop para esto. Yo lo usaba porque lo tenía delante y me daba control total, y sigue siendo la mejor opción cuando quieres cuidar una imagen concreta al detalle (una cabecera, una portada, una foto destacada).

Pero si subes decenas de imágenes al mes, un plugin de optimización automática te ahorrará muchísimo tiempo. Herramientas como ShortPixel, Imagify o TinyPNG comprimen y convierten a WebP automáticamente al subir. Lo ideal suele ser combinar ambos: redimensionar al ancho correcto en Photoshop (esto ningún plugin lo adivina por ti) y dejar la compresión final al plugin.

Lo que nunca deberías hacer es subir el archivo original tal cual sale de la cámara o del banco de imágenes. Ese es el error que cuesta velocidad.

Checklist rápido antes de subir una imagen

• Redimensionada al ancho real de tu web
• Peso por debajo de 100 KB (o 150–200 KB si es grande)
• Formato correcto: WebP > JPG (fotos) > PNG (transparencias)
• Convertida a sRGB
• Nombre de archivo descriptivo con guiones
• Texto alternativo (alt) escrito al subirla a WordPress

Preguntas frecuentes