浏览器图像调整大小，优于最高的PIL质量

Question

序言

我正在将来自Django后端的图像显示到26 x 26px大小（css）<img>标签中。

我可以通过两种方式做到这一点：

1. 将后端（枕头）的大小调整为26x26（裁剪以保持宽高比）
2. 发送完整尺寸的图像，然后让CSS进行尺寸调整

---

问题

使用LANCZOS算法来调整大小并将结果保存为100％质量的Jpg，显示的图像看起来比浏览器调整大小的图像差很多。

那是为什么，有什么办法可以解决？

---

EDIT ：在视网膜显示屏上进行测试

编辑：Bicubic看上去与Lanczos非常相似

Answer 1

根据我的经验，PIL / Pillow（以下简称为“ Pillow”）在小图像上的行为与大图像上的行为大不相同-不仅在调整大小操作方面，而且在一般情况下，但是您最好对所有图像进行测试枕头提供的方法，例如：

# q.v. https://gist.github.com/fish2000/d85befaf289c664b6a9f44d1b56e57da#file-asscat-py-L129-L134

from PIL import Image

# q.v. PIL.Image constants of the same (yet uppercased) names:
interpolation_methods = frozenset({
                          "box",
                          "bilinear", "bicubic",
                          "hamming", "lanczos",
                          "nearest" })

def interpol(name):
    """ Return a PIL/Pillow image interpolation method constant by name """
    return getattr(Image, name.upper())

size    = (26, 26)
avatar  = Image.open(…) # load your source avatar image
methods = (interpol(method) for method in interpolation_methods)
scaled  = (avatar.resize(size, resample=method) for method in methods)

# you can save these out for more granular inspection:
previews = list(scaled)
for preview in previews:
    preview.show()

…请记住，Image.NEAREST可以在小尺寸的情况下产生出人意料的出色效果–并且Pillow绝不是Adobe®Photoshop™的事实，因此复制时实际上并不能承担任务结果可能与您不符。

但是，不管是否使用CSS（或任何其他基于客户端的方法）进行缩放：如果可能的话，最好通过网络发送更少的字节，但这并不意味着可以不能完成。我个人是个完美主义者，但是如果时间或金钱紧迫，我就不会那么着急。

Answer 2

本文[1]上的文章说，视网膜显示器（高DPI显示器）将试图在同一区域中多显示2倍的像素。面积也以像素为单位，即您在CSS中实际声明的像素。

所以这就是我困惑的地方。解决方案是生成两倍于显示大小的缩略图。