Optimización de imágenes CMS: WebP, AVIF, srcset

AliothPress optimiza cada imagen en el momento de subirla. Una sola subida produce variantes responsivas WebP y AVIF en cuatro anchos, un recorte de 1200×630 para compartir en redes, un marcador de posición con el color dominante y una URL pública limpia. Los metadatos EXIF se eliminan, la orientación se corrige y los archivos SVG se sanean. Los documentos viven en un File Manager aparte con URL de descarga cortas, y el gestor de favicons genera todos los tamaños de icono necesarios a partir de una sola imagen. Todo funciona en tu propio servidor, y ninguna imagen pasa jamás por un CDN externo.

Qué ocurre cuando subes una imagen

La cadena de procesamiento se ejecuta automáticamente en cada subida:

1. Rotación automática. Se aplican los datos de orientación de la cámara, así que las fotos se ven derechas en todas partes.
2. Limpieza EXIF. Los metadatos de ubicación, dispositivo y marca de tiempo se eliminan del archivo publicado. Los visitantes descargan la foto, nunca las coordenadas GPS de tu cámara.
3. Redimensionado a la dimensión máxima configurada.
4. Variantes responsivas. Se generan versiones WebP y AVIF de 400, 800, 1200 y 1920 píxeles de ancho, afinadas al punto óptimo de calidad frente a tamaño de cada formato.
5. Recorte social. Se produce un recorte centrado de 1200×630 en WebP, AVIF y JPG para las vistas previas de enlaces en redes sociales y mensajería.
6. Extracción del color dominante. El color medio de la imagen se convierte en un marcador de posición CSS, así que el diseño reserva el espacio y el color correctos antes de que llegue la imagen. Esto protege directamente la puntuación de Cumulative Layout Shift.

AVIF y WebP mediante picture y srcset

Las páginas públicas insertan las imágenes con elementos picture y atributos srcset completos. Cada navegador elige la mejor combinación que soporta: AVIF donde está disponible, WebP como siguiente opción, y el ancho exacto que necesita el viewport. Un móvil con datos descarga el AVIF de 400px. Un escritorio 4K recibe la variante de 1920px. El servidor lo prepara todo una vez en la subida. La entrega no cuesta procesamiento en tiempo de ejecución.

URL públicas limpias

Cada imagen recibe una URL corta basada en slug en la raíz del sitio:

/sunset.jpg          el original procesado

/sunset-800w.webp    variante WebP de 800px

/sunset-1200w.avif   variante AVIF de 1200px

/sunset-og.jpg       recorte social de 1200×630

Estas URL cortas se usan de forma consistente en el HTML de las páginas, los tags Open Graph, los datos estructurados, el sitemap y los feeds RSS. Las rutas internas de almacenamiento nunca aparecen en el marcado público, y el clic derecho sobre cualquier imagen copia una dirección limpia.

Seguridad de los SVG

Los archivos SVG subidos se sanean en el servidor: las etiquetas de script, los manejadores de eventos, las URL javascript: y las referencias externas se eliminan antes de guardar el archivo. El SVG sigue siendo un formato de primera para logotipos e iconos sin convertirse en un vector de ataque.

Metadatos y organización

Cada imagen lleva título, leyenda, descripción y texto alternativo, editables en la biblioteca. La vista en cuadrícula admite búsqueda y paginación, y un selector de imágenes compartido pone toda la biblioteca a disposición dentro de las entradas, las páginas y el Page Builder.

File Manager para documentos

Los documentos y descargas tienen su propio gestor, separado de las imágenes. Acepta PDF, DOC, DOCX, XLS, XLSX, ZIP, RAR, TXT y CSV, cada uno con título y descripción. Los archivos se sirven mediante URL cortas de slug como tusitio.com/informe-anual.pdf. PDF, TXT y CSV se abren directamente en el navegador. Los formatos de archivo comprimido y de ofimática se descargan. La vista de lista muestra iconos por tipo de archivo y tamaños legibles, con búsqueda y paginación.

Gestor de favicons

Sube una imagen y AliothPress genera el juego completo de favicons: un favicon.ico multitamaño (16, 32 y 48 píxeles), iconos PNG de 96, 192 y 512 píxeles para Android y PWA, un apple-touch-icon.png de 180 píxeles para iOS y un manifiesto web. Una fuente SVG se sanea y se sirve como favicon vectorial junto a los tamaños rasterizados generados. Se aceptan orígenes ICO, PNG y SVG.

Funciones clave del manejo de imágenes y archivos en AliothPress

El sistema de medios de AliothPress cubre el ciclo de vida completo de los recursos del sitio: variantes WebP y AVIF automáticas en cuatro anchos, recortes para redes sociales, marcadores de posición con el color dominante, limpieza EXIF, saneamiento de SVG, URL limpias de slug, un gestor de documentos con enlaces de descarga cortos y generación de favicons con una sola subida. Todo se procesa y se sirve desde tu propio dominio.