Supuestos
- Solo se generan etiquetas <img>. El texto, las tablas y el vídeo del original no se conservan: únicamente se rehace la parte de imágenes.
- Los estilos se escriben en la propia imagen. Si el editor elimina también el atributo style, este método tampoco sobrevive.
- Construir desde archivos lee solo el nombre y las dimensiones. Las imágenes deben estar ya alojadas en algún sitio.
- El ancho máximo es una opción, no una recomendación. Sigue las indicaciones de la plataforma donde publiques.
- La vista previa carga las imágenes desde las direcciones indicadas. Nada más de lo que escribes se transmite.
Cómo se calcula
- display:block — quita a la vez el pegado a la izquierda y el hueco de espacio en blanco que vienen de ser un elemento en línea, y es lo que hace funcionar los márgenes automáticos.
- width:100% con max-width — se reduce para caber en pantalla estrecha y nunca crece más del ancho fijado.
- height:auto — el alto sigue al ancho, así que nada se aplasta.
- margin-left / margin-right: auto — reparte el espacio sobrante por igual, que es lo que centra.
- Sin div contenedor. Cada imagen mantiene su propia alineación, así que aguanta aunque el editor borre las etiquetas de alrededor.
Errores frecuentes
- Mira la vista previa antes de pegar. El ancho de móvil es el que detecta más problemas.
- Algunos editores eliminan también el atributo style. Guarda y revisa una vez la página publicada de verdad.
- No pongas un ancho mayor que el original. La imagen se estira y se ve borrosa. El modo de archivos avisa cuando esto ocurriría.
- Muchas imágenes hacen una página pesada. Deja la carga diferida activada y comprime antes de subir.
Preguntas frecuentes
¿Por qué las imágenes quedan pegadas a la izquierda?
Porque <img> es un elemento en línea y se coloca como si fuera una palabra dentro de un texto. Si nada a su alrededor centra ese texto, se queda a la izquierda. Esta herramienta pone display:block y márgenes automáticos a izquierda y derecha en la propia imagen. Envolverlo todo en un div con text-align:center también funciona, pero muchos editores eliminan las etiquetas contenedoras y los bloques style, así que ponerlo en la imagen aguanta mejor.
Las imágenes se salen de la pantalla en el móvil
Sin ancho definido se muestran a su tamaño real en píxeles, así que una imagen de 860px se sale de una pantalla de 375px. Combinar width:100% con max-width hace que se reduzca en pantallas estrechas y que nunca crezca más de lo previsto en las anchas. El height:auto es lo que mantiene la proporción.
Los huecos entre imágenes son desiguales
Los saltos de línea y los espacios entre tus etiquetas <img> se tratan como el espacio entre palabras y dejan un hueco bajo cada imagen. Añadir <br> suma otro salto encima. Al pasar las imágenes a display:block el hueco desaparece, y si quieres separación puedes fijarla en píxeles y obtener exactamente esa.
¿Puedo convertir archivos locales directamente en HTML?
En un HTML autónomo, no. Se pueden incrustar los datos de la imagen con una dirección data:, pero muchos editores de contenido lo rechazan y el archivo se vuelve inmanejable. Por eso esta herramienta cubre el último paso: sube las imágenes a tu alojamiento, pega la dirección de la carpeta y se une con cada nombre. De los archivos solo se leen el nombre y las dimensiones, y no se sube nada.
El orden de mis imágenes sale mal
Ordenar los nombres como texto pone el 10 antes que el 2. Esta herramienta compara las partes numéricas como números, así que 001, 002 … 010, 011 salen en el orden esperado. Si prefieres decidir tú el orden, usa el modo de pegar HTML: respeta el que le des.
¿Qué ancho máximo debo poner?
Depende por completo de dónde se vaya a publicar, así que se ofrece como opción y no como recomendación. Consulta las indicaciones de tu plataforma. Si no lo tienes claro, usa el ancho real de tus imágenes: poner un ancho mayor que el original solo las estira y las deja borrosas.
¿Se envía mi HTML a algún sitio?
No. Rehacer las etiquetas ocurre entero en tu navegador. La vista previa sí descarga las imágenes de donde las tengas alojadas, porque eso es lo que significa previsualizarlas, pero nada más sale de la página.