La mayor ganancia de rendimiento que jamás haya enviado en WP Adminify's sitio de marketing fue't un complemento de almacenamiento en caché o un ajuste de CDN. Estaba eliminando una imagen. Nuestro viejo héroe era una captura de pantalla PNG de 2400 px I'd exportado a " calidad total" porque creía obstinadamente que PNG significaba nítido. Ese archivo tenía 1,4 MB. En un Android de gama media sobre 4G, era el elemento de pintura con contenido más grande y arrastraba LCP a aproximadamente 4,1 segundos. Lo cambié por 84 KB webp en el ancho de visualización real y el LCP cayó por debajo de 1,9 la misma tarde. Sin código. Sólo una imagen más pequeña.
Eso' es lo frustrante del SEO de imágenes. It' no es exótico. Las imágenes suelen ser lo más pesado de la página (a menudo cerca de la mitad de los bytes totales) y, sin embargo, la mayoría de nosotros las tratamos como una ocurrencia tardía. Colocamos un original de cámara en el CMS, escribimos "captura de pantalla" en el campo alternativo y seguimos adelante. Entonces nos preguntamos por qué Vitales principales de la web el informe en Search Console está sangrando rojo en el móvil.
Esta guía es la lista de verificación que realmente ejecuto en Toolz.dev y los sitios de clientes, escrita desde la perspectiva de alguien que envía estas cosas. I' Seré honesto acerca de lo que hacen las herramientas gratuitas y, lo que es igualmente importante, de lo que hacen't. Cada herramienta de imagen activada Toolz.dev se ejecuta completamente en su navegador en un <canvas>, así que nada de lo que dejes se carga en ninguna parte. Eso tiene consecuencias reales para su flujo de trabajo, algunos buenos, uno molesto. Llegaremos a ambos.
TL;Dr: Cambie primero el tamaño de la imagen a su ancho de pantalla real, luego comprima y luego sirva un formato moderno. En la práctica, esos tres pases: Cambiar tamaño de imagen Para cortar las dimensiones de píxeles, comprimir imagen para exprimir los bytes y Convertidor de formato Para obtener webp.
width/heightatributos para detener el cambio de diseño, escribir texto alternativo que un humano diría en voz alta y cargar perezosamente cualquier cosa debajo de la página. Haga eso y su LCP y CLS mejorarán: los dos Core Web Vitals basados en imágenes en los que Google realmente se ubica.
¿Por qué las imágenes importan tanto para el SEO?
Dos de los tres Core Web Vitals son problemas de imagen disfrazados. La pintura contentful más grande es, en la mayoría de las páginas de contenido, la imagen del héroe que termina su descarga. El cambio de diseño acumulativo suele ser una imagen que se carga tarde y empuja el texto hacia abajo. Ambas son entradas de clasificación confirmadas, y ambas son cosas que se solucionan manejando mejor las imágenes, no escribiendo más contenido.
Allí' es un segundo canal de tráfico que la gente olvida: Google Images. Para muchos sitios de comercio electrónico, recetas, viajes y diseño, la búsqueda de imágenes es una porción significativa de visitas orgánicas, a veces una quinta parte. Ese tráfico depende completamente de las cosas que un rastreador puede leer: el nombre del archivo, el texto alternativo, la copia circundante y si la imagen es lo suficientemente pequeña como para indexarla rápidamente.
Y luego está la aburrida pero real: el ancho de banda cuesta dinero y paciencia. Una página que envía 3 MB de imágenes rebota a los usuarios móviles en conexiones dosificadas antes de que vean su título. Las páginas más rápidas mantienen a la gente alrededor, y el compromiso, sin embargo, Google lo mide, no está de más.
¿Qué formato de imagen deberías usar?
La elección de formato es donde viven la mayoría de los ahorros, y las reglas son más simples que las guerras de formato que los hacen sonar.
JPEG es para fotografías, cualquier cosa con gradientes suaves y miles de colores. It's pérdida, que es exactamente lo que quieres para una foto. Con calidad 75-85, la compresión es invisible para un visor normal y el archivo es una fracción del original. Don' No lo uses para nada con bordes duros, texto o transparencia.
PNG no tiene pérdidas. Úselo para capturas de pantalla, logotipos, diagramas y cualquier cosa con regiones de color planas o transparencia. El problema: para una fotografía, PNG produce un archivo cómicamente grande en comparación con JPEG. Mi error de héroe de 1,4 MB fue exactamente este: una captura de pantalla fotográfica forzada a PNG.
webp es el incumplimiento práctico en 2026. Tiene pérdida y sin pérdida, admite la transparencia y la animación, y generalmente aterriza entre un 25 y un 34 % más pequeño que el JPEG en la calidad de coincidencia. El soporte del navegador es universal ahora. Este es el formato al que convertí casi todo.
todoterreno se comprime aún más fuerte, a menudo significativamente más pequeño que WebP, porque 's construido sobre el códec de vídeo AV1. It' es un gran formato. Pero tengo que ser sincero contigo aquí, porque muchas guías (incluido el borrador que reemplazó este artículo) te dicen que " simplemente convierta a AVIF" con una herramienta en línea, y eso ' No es como funciona la codificación del lienzo del navegador.
SVG Es para vectores: iconos, logotipos, ilustraciones simples. Escala infinitamente y se mantiene diminuto. Es inútil para las fotos.
La advertencia de AVIF que nadie menciona
Aquí está la parte honesta. Toolz.dev's Convertidor de formato exportación PNG, JPEG o WebP- y sólo esos tres. Puede 't generar AVIF, y tampoco la mayoría de los convertidores en el navegador. La razón es técnica: la herramienta dibuja su imagen en un <canvas> y llama canvas.toBlob('image/webp', quality). El codificador de lienzo del navegador envía JPEG, PNG y WebP; no envía un codificador AVIF. Así que no hay forma de exprimir un AVIF de un lienzo, punto final.
todavía puedes pienso un archivo AVIF: el navegador decodifica AVIF felizmente a través de new Image(), por lo que un avif se renderiza en Canvas Fine. Simplemente no puedes volver a sacar uno. Es una asimetría de decodificación, codificación de salida, y hace que la gente gire constantemente.
Así que mi consejo del mundo real: use el convertidor de formato para el paso webp, que es el que cubre el 95% de la victoria. Si desea AVIF en la parte superior, genere en su canalización de compilación con sharp, avifenc, o codificador fuera de línea Squoosh's - that's donde pertenece AVIF de todos modos, porque su codificación es lenta y no lo haces'no quiero hacerlo a mano para cada imagen.
| formato | mejor para | ¿Perdido? | ¿El convertidor Toolz.dev puede generarlo? |
|---|---|---|---|
| JPEG | fotos | sí | sí |
| PNG | Capturas de pantalla, Logotipos, Transparencia | prohibido | sí |
| webp | Casi todo en la web | a la vez | sí |
| todoterreno | Compresión máxima en imágenes pesadas | sí | No, utilice una herramienta de compilación |
| SVG | Iconos, logotipos, arte vectorial | no está | No (vector, no lienzo) |
¿Cómo se comprimen las imágenes sin destrozar la calidad?
El error que más veo es comprimir lo incorrecto en el orden incorrecto. Comprimir una imagen de 4000 px que se muestra a 800 px es como sellar una maleta al vacío que nunca necesitas empacar. Redimensionar primero, comprimir el segundo. Siempre.
Entonces el flujo de trabajo es: Abrir Cambiar tamaño de imagen, establezca el ancho en el tamaño más grande en el que se representará la imagen (consulte su diseño; la imagen del cuerpo de un blog suele ser de 720-800px, no de 1920). El redimensionador cabe dentro de su caja objetivo y nunca se estira ni se recorta, por lo que la relación de aspecto es segura. Luego tome esa salida comprimir imagen y baje la calidad hasta que apenas pueda saberlo, generalmente 78-82 para las fotos. Vista previa con zoom completo antes de comprometerse; Los artefactos se esconden en gradientes y tonos de piel, no en la miniatura.
Un número para anclar: para contenido fotográfico, la calidad 80 es la respuesta aburrida y confiable. he A/B'D 80 contra 90 en tomas de productos reales y, al zoom 100% en un buen monitor, la mayoría de la gente no puede llamarlo. Pero 80 es a menudo un 40% más pequeño. Por debajo de los 60, comienzas a ver artefactos en bloques en áreas lisas, por lo que es el piso para cualquier cosa menos una pequeña uña.
Dos trampas del navegador que te confundirán
Ambos me cuestan tiempo de depuración real, así que aprendan gratis.
PNG transparente → JPEG convierte el fondo negro, no en blanco. Una vez convertí un logotipo transparente a JPEG y las áreas transparentes salieron en negro sólido. Supuse que la herramienta estaba rota y pasé veinte minutos mirándola. It' no es un error - it's la especificación HTML. Cuando serializa un lienzo en un formato sin canal alfa (JPEG), los píxeles transparentes se componen en negro sólido. Si necesita transparencia, mantenga PNG o use WebP, que admita alfa. Si desea específicamente un fondo blanco, primero coloque una capa blanca.
Cada re-codificada tira de EXIF y metadatos GPS. Debido a que estas herramientas vuelven a dibujar la imagen en un lienzo nuevo, la salida no tiene EXIF, ni información de cámara, ni coordenadas GPS integradas. Eso' es una verdadera victoria en privacidad - usted' no publican accidentalmente la latitud/longitud que su teléfono estampó en una foto. Pero es ' También es un problema si dependía de perfiles de color integrados o metadatos de derechos de autor; esos también van. Para SEO no es así ' No importa, pero lo sé ' está sucediendo.
¿Cómo funcionan las imágenes receptivas y srcset?
Un teléfono renderiza imágenes con un ancho de 390 px. Enviandolo, un archivo de 1920 px desperdicia la mayoría de los bytes que acaba de comprimir cuidadosamente. srcset Corrige eso entregando al navegador un menú de tamaños y dejándolo elegir.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
Para hacer esos tres archivos, ejecute la misma fuente a través de Cambiar tamaño de imagen a 400, 800 y 1200 px, luego convierta cada uno a WebP. sizes el atributo es la parte que la gente omite, y omitirlo silenciosamente rompe todo; sin él, el navegador asume que la imagen llena la ventana gráfica y atrapa al candidato más grande. Cuéntale qué tan ancha se representa realmente la imagen y descargará la correcta.
¿Cómo se escribe texto alternativo que realmente ayuda?
Alt Text es la otra mitad de Image SEO y es la mitad de los desarrolladores. Hace tres trabajos a la vez: es lo que un lector de pantalla lee en voz alta a un usuario ciego, así es como un rastreador entiende lo que muestra la imagen, y es el texto alternativo si la imagen no se carga. Hacerlo bien se trata principalmente de escribir como una persona, no un robot con palabras clave.
La regla que uso: describe la imagen de la misma manera que tú 'd descríbela a alguien en una llamada telefónica. Específico, natural, corto: menos de 125 caracteres para que los lectores de pantalla no lo hagan 't lo trunque torpemente. Saltar "imagen de " o "foto de, " porque el lector de pantalla ya anuncia que es ' es una imagen; liderar con eso desperdicia el tiempo del oyente '. Y si su palabra clave de destino realmente se ajusta a la imagen, inclúyala una vez, naturalmente. Si no es así ' no encaja, déjalo fuera - una foto de un teclado no es ' necesito " compre auriculares inalámbricos baratos " atascado en su alternativa.
Algunos antes/después de las críticas reales que he hecho:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(pellejo de palabras clave) →alt="Over-ear headphones with the carrying case open beside them"
Un matiz que la gente se equivoca: las imágenes puramente decorativas (un divisor, un fondo floreciente) deberían tener un verter alt="", no una descripción. Un alt vacío le dice al lector de pantalla que se lo salte por completo, que es exactamente lo que desea para la decoración. Reserve texto alternativo real para las imágenes que llevan información.
Mientras estás en ello, también nombre el archivo descriptivamente. wireless-headphones-matte-black.webp latidos IMG_4532.jpg Porque los motores de búsqueda leen el nombre del archivo como una señal, y los guiones (no guiones bajos) son el separador que Google analiza como se rompe palabras.
¿Cuánto cambia esto realmente centrales web vitales?
LCP (pintura más grande con contenido): tu héroe suele ser el elemento LCP. Sirva en las dimensiones correctas, en WebP, con una calidad de ~80 y, lo que es más importante, hágalo no cargarlo perezoso. Carga perezosa El héroe anterior es un clásico propio, que retrasa el elemento exacto que está midiendo LCP. Si es el héroe, <link rel="preload" as="image"> en su lugar.
CLS (cambio de diseño acumulativo): siempre poner width y height sobre el <img>. Esos dos atributos permiten que el navegador reserve el espacio antes de que llegue la imagen, por lo que el texto no salta cuando se carga. Esta es la solución CLS más barata que existe y todavía encuentro que los sitios se lo pierden.
INP (Interacción a la siguiente pintura): Las imágenes no conducen directamente a INP, pero una página ahogando en 3 MB de imágenes no optimizadas está matando de hambre el hilo principal y la red de la capacidad que necesita para responder su JavaScript. Imágenes más ligeras, interacciones más ágiles, indirectamente.
Algunas cosas que he aprendido de la manera molesta
Audite antes de optimizar. Ejecute la página a través de PageSpeed Insights y corrija primero el archivo más pesado: el infractor de 1,2 MB importa más que recortar 4 KB de un ícono. Nombra archivos como un humano: wireless-headphones-matte-black.webp latidos IMG_4532.jpg en la búsqueda de imágenes porque el rastreador lee el nombre del archivo como una señal de contenido. Escriba texto alternativo usted ' En realidad, le digo que le describa la foto a alguien en el teléfono (palabra clave natural, específica)encerrado sólo donde encaja, nunca relleno de palabras clave. Y don' No olvides tu Gráfico abierto compartir imagen; un 1200×630 del tamaño correcto que hiciste Cambiar tamaño de imagen Es lo que aparece en las vistas previas sociales y, a veces, en la búsqueda.
Preguntas frecuentes
¿La optimización de imágenes realmente afecta las clasificaciones de SEO?
Sí, a través de los principales web vitales. LCP y CLS son señales de clasificación de Google confirmadas, y ambas están en gran medida basadas en imágenes. Las imágenes optimizadas suelen mejorar las puntuaciones de la velocidad de la página móvil por un margen notable y en dispositivos móviles que pueden traducirse en movimiento de clasificación. También desbloquea Google Images como una fuente de tráfico independiente.
¿Puedo convertir imágenes a AVIF con una herramienta en línea gratuita?
Por lo general, no, y el convertidor de formato Toolz.dev no puede'T. Los convertidores en el navegador dibujan a un <canvas>, y el codificador de lienzo del navegador 's solo genera JPEG, PNG y WebP - allí 's no hay codificador AVIF disponible para él. Convierta a WebP en línea durante la mayor parte de la ganancia y genere AVIF en su proceso de compilación con herramientas como Sharp o Avifenc si lo necesita.
¿Debo usar webp o avif en 2026?
WebP es el valor predeterminado seguro y lo primero que busco: soporte universal, grandes ahorros y puedes hacerlo en el navegador. AVIF se comprime aún más fuerte y vale la pena agregarlo para imágenes grandes de héroes y galerías, pero generarlo en el momento de la compilación y servirlo a través de <picture> con una alternativa webp.
¿A qué configuración de calidad debo comprimir jpeg y webp?
Calidad 80 es la respuesta confiable para las fotos. Por lo general, es indistinguible del original en la visualización normal y es dramáticamente más pequeño. Previsualiza al 100% de zoom antes de comprometerte, ya que aparecen artefactos en degradados y tonos de piel. Por debajo de 60, la compresión se hace visible.
¿Por qué mi PNG transparente se volvió negro después de convertirlo a JPEG?
Porque JPEG no tiene canal alfa. La especificación de lienzo HTML dice que los píxeles transparentes se componen en negro sólido cuando se serializa a un formato no alfa. Es el comportamiento esperado, no un error. Mantenga la imagen como PNG o WebP para preservar la transparencia, o combínala en un fondo blanco primero si desea blanco.
¿Estas herramientas suben mis imágenes a un servidor?
No. Las herramientas de imagen en Toolz.dev procesan todo localmente en un lienzo de su navegador; el archivo nunca sale de su dispositivo. Un efecto secundario que vale la pena conocer: cada recodificación elimina los metadatos EXIF y GPS, lo cual es bueno para la privacidad pero significa que los datos de la cámara integrada y los perfiles de color también se eliminan.
¿Cuál es el tamaño de archivo ideal para una imagen web?
Como objetivo aproximado: imágenes de héroes de menos de ~200 KB, imágenes dentro del contenido de ~100 KB y miniaturas de menos de ~30 KB. Esos son muy alcanzables una vez que cambia el tamaño de la pantalla real y sirve WebP. El número exacto importa menos que el hábito de cambiar el tamaño de la compresión y luego de convertir.
Lectura y herramientas relacionadas:
- comprimir imagen- corte el tamaño del archivo después de cambiar el tamaño
- Cambiar tamaño de imagen- crear tamaños responsivos e imágenes sociales
- Convertidor de formato- exporte PNG, JPEG o WebP
- Guía de herramientas de imagen del desarrollador
- Explicación de la compresión de
