Tumblr页面与帖子图片URL规则差异及帖子图片懒加载咨询

安全阿岳

2026-6-30

Tumblr帖子图片尺寸URL推导及适配方案

问题核心

你提到的帖子图片URL格式是Tumblr的**NPF（New Post Format）**标准，这类图片确实支持多种小尺寸变体，可通过修改URL中的尺寸标识段来获取。

1. 小尺寸版本是否存在？

是，Tumblr会为上传的每张图片自动生成多分辨率变体，涵盖从缩略图到原始尺寸的多种规格。

2. URL推导方法

以你提供的示例URL为例：
https://64.media.tumblr.com/8bb2edad047e9fbe8fcd2484064ddcfb/c16d798313ac9970-1e/s2048x3072/a422c651ec6c093d3a5ae0634bc84f91e7793b24.jpg

其中的/s2048x3072/是尺寸标识段，格式为/s{宽度}x{高度}/，替换这个片段即可切换到对应尺寸的图片。

常用尺寸标识（直接替换即可）：

/s128x128/：极小正方形缩略图
/s250x250/：小正方形缩略图
/s500x500/：中等尺寸（和你页面上传的默认500px规格匹配）
/s1280x1920/：大尺寸（适合lazy load加载）
/raw/：原始上传尺寸（无压缩）

注意：如果原图宽高小于目标尺寸，Tumblr会返回原图而非拉伸后的图片，无需担心变形问题。

3. 适配你的Lazy Load函数

针对NPF帖子图片的URL结构，修改现有代码即可兼容两种图片格式（页面旧格式+帖子NPF格式）：

const setImageSource = () => {
    const images = document.querySelectorAll('#posts img');
    images.forEach(item => {
        let defaultSrc;
        const lazySrc = item.src.replace(/\/s\d+x\d+\//, '/s1280x1920/');
        
        if (item.src.includes('/s')) {
            // 处理NPF帖子图片，默认加载500px尺寸
            defaultSrc = item.src.replace(/\/s\d+x\d+\//, '/s500x500/');
        } else {
            // 处理页面旧格式图片，沿用原有逻辑
            defaultSrc = item.src.replace('500', '1280');
        }
        
        item.src = defaultSrc;
        item.setAttribute('data-src', lazySrc);
    });
    observeImages();
};