电子报里的一个版面是一张大图：长边 2000 像素，满是小号文字。读者常常在信号不稳的手机上一口气翻十几二十个版面。在开发自托管电子报平台 Inkfold 的 1.1 版本时，我们首先重写的就是版面加载速度。
每个版面保存三份
上传时，每个版面都会用 GD 重新编码成三个文件：完整版面、约 1100 像素宽的中等版本，以及用于版面条的缩略图。格式按服务器一次性决定：PHP 支持就用 WebP，否则用 JPEG。在我们的测试报纸上，同等画质下 WebP 让版面体积减少了约三分之一；对一个满是版面的网站来说，这比其他任何优化都重要。
重新编码还会去掉不需要的内容，比如嵌入的色彩配置和相机信息，并把透明背景铺成白色，这样排版软件导出的 PNG 不会出现黑底。
先用中等尺寸，需要时才加载原图
阅读器默认显示中等图片。在正常大小下它与原图看不出差别，体积却只有一小部分。读者放大时，脚本会把显示宽度乘以设备像素比，再与图片的实际宽度比较。一旦版面被放大到中等文件明显撑不住的程度，就在后台加载原图，加载完成后无缝替换。
从不放大的读者永远不会下载原图；放大的读者也不用等待，因为中等图片会一直显示，直到大图准备好。同一期的后续版面会以中等尺寸预加载，翻页几乎是瞬间完成的。
新闻截图只裁一次，然后缓存
每个新闻区域都可以作为独立图片打开，用于弹窗阅读和分享。过去这些裁剪图在每次请求时都要重新生成。现在第一次请求时裁剪并保存到媒体磁盘，文件名包含区域和版面图片的哈希值，所以重新绘制的区域或替换过的版面会自动得到新文件。响应带有一周的缓存头。
媒体放在任意磁盘，或放在 CDN 后面
所有文件访问都通过一个统一的辅助函数，而不是写死本地磁盘。设置 INKFOLD_DISK=s3 后，版面图片、PDF 和剪报会存到 Amazon S3、Cloudflare R2 或 DigitalOcean Spaces。想把文件留在本地的出版商，可以用 INKFOLD_MEDIA_URL 让图片地址走 Cloudflare、Bunny 等回源式 CDN。文件名保留 20 个字符的随机部分，无论用哪种存储，付费版面都无法被猜到。
要点
- 上传时一次编码成三种尺寸，服务器支持时使用 WebP。
- 先显示中等图片；只有缩放让差别变得可见时才加载原图。
- 生成的裁剪图要缓存，缓存键随源文件变化。
- 所有文件访问走同一层抽象，切换到 S3 或 CDN 只是改配置。
本系列下一篇：让左右两页保持同样高度的双页阅读视图。文中所有功能都可以在 Inkfold 在线演示 中体验，软件本身可在 Charming Theme 购买。
正在把报纸或杂志搬到网上，却被缓慢的页面困扰？和我们聊聊 — ArtinTech Solution 专门开发和优化这类出版软件。