Una página de periódico en una edición digital es una imagen grande: 2.000 píxeles en el lado largo y llena de letra pequeña. Un lector pasa diez o veinte, a menudo en el móvil y con mala conexión. Cuando construimos la versión 1.1 de Inkfold, nuestra plataforma de e-paper autoalojada, lo primero que reescribimos fue la velocidad de las páginas.
Guardar cada página tres veces
Al subirla, cada página se recodifica con GD en tres archivos: la página completa, una versión media de unos 1.100 píxeles de ancho y una miniatura para la tira de páginas. El formato se elige una vez por servidor: WebP si PHP lo admite y JPEG en caso contrario. En nuestras ediciones de prueba, WebP redujo el peso de cada página en torno a un tercio con la misma calidad visual, y en un sitio lleno de páginas eso importa más que cualquier otra optimización.
La recodificación también elimina lo que nadie pidió, como perfiles de color incrustados y metadatos de cámara, y aplana la transparencia sobre blanco para que una exportación PNG del programa de maquetación nunca muestre un fondo negro.
Primero el tamaño medio, el completo solo cuando hace falta
El lector muestra por defecto la imagen media. A tamaño normal no se distingue del original y pesa una fracción. Cuando el lector amplía, el script compara el ancho mostrado, multiplicado por la densidad de píxeles del dispositivo, con el ancho real de la imagen. En cuanto la página se ve claramente más grande de lo que el archivo medio permite, carga en segundo plano la imagen completa y la sustituye cuando ha llegado.
Quien nunca amplía nunca descarga la página completa. Quien amplía obtiene una página nítida sin esperar, porque la imagen media sigue en pantalla hasta que la grande está lista. Las páginas siguientes de la edición se precargan en tamaño medio, así que pasar página es instantáneo.
Recortar las noticias una vez y guardarlas en caché
Cada zona de noticia puede abrirse como imagen propia, para la ventana emergente y para compartir. Antes, esos recortes se generaban en cada petición. Ahora la primera petición recorta la zona y la guarda en el disco de medios con un nombre que incluye un hash de la zona y de la imagen de la página, de modo que una zona redibujada o una página sustituida obtienen automáticamente un archivo nuevo. Las respuestas llevan una cabecera de caché de una semana.
Archivos en cualquier disco o detrás de una CDN
Todo acceso a archivos pasa por una única función en lugar de un disco local fijo. Con INKFOLD_DISK=s3, las imágenes, los PDF y los recortes pasan a Amazon S3, Cloudflare R2 o DigitalOcean Spaces. Quien prefiera mantener los archivos en local puede usar INKFOLD_MEDIA_URL para servir las imágenes a través de una CDN de tipo pull, como Cloudflare o Bunny, con el sitio como origen. Los nombres conservan una parte aleatoria de 20 caracteres, así que las páginas premium no pueden adivinarse sea cual sea el almacenamiento.
Ideas clave
- Codificar una sola vez al subir, en tres tamaños, y usar WebP cuando el servidor pueda.
- Mostrar primero una imagen media y cargar la completa solo cuando el zoom hace visible la diferencia.
- Guardar en caché los recortes con una clave que cambie cuando cambia el origen.
- Centralizar el acceso a archivos para que S3 o una CDN sean solo configuración.
Próximo artículo de la serie: un visor de doble página que iguala la altura de ambas páginas. Puedes probar todo lo descrito en la demo en vivo de Inkfold, y el software está disponible en Charming Theme.
¿Publicas un periódico o una revista en línea y luchas con páginas lentas? Hablemos — ArtinTech Solution desarrolla y ajusta justo este tipo de software editorial.