图像在 WordPress 网页上加载时总是模糊，并且在 Safari 上无法加载

Question

我一直在为我父亲的咖啡馆开发网站（CMS：Wordpress） - www.barcaffecitta.it，但我在使图像清晰而不模糊并在所有浏览器上工作时遇到问题。该图像最初是分辨率为 7320 × 5484 (64 MB) 的 TIFF，我最初将其大小调整为分辨率为 2000 x 1498 的 TIFF，并设置 html 宽度：100% 和高度：90%，这使得它在 safari 中工作得很好，但是我发现其他浏览器不自动支持 TIFF。因此，我尝试将其转换为 PNG 和 JPEG，但每次图像都变得模糊或根本无法在 Safari 中加载。如果您现在查看该网站，会看到一个分辨率为 960 x 619 的 JPEG，其中 html 高度和宽度以 px 为单位精确设置为该分辨率。如果您可以建议从原始 TIFF 开始的路线或处理图像的惯例，请告诉我。 另外，上传图片时 HTML 高度和宽度应该以像素为单位，无论我选择什么，如果使用不同的显示器，它都会自动调整大小吗？！

谢谢！

Answer 1

<img src="http://www.barcaffecitta.it/wp-content/uploads/2013/12/Caffè-Città-JPEG-cropped960x619-300x193.jpg" width="900px" height="619px" class="alignnone size-medium wp-image-90" />

1. è 图像网址中的字母
2. à 图片网址中的字母
3. 宽度=“900px”
4. 高度=“619px”

这些就是图像模糊甚至无法在某些浏览器上加载的原因。它应该是这样的：（但是重新上传名称为“Caffe-Citta.jpg”的图像）

<img style="width:960px;" alt="Caffè-Città" src="http://www.barcaffecitta.it/wp-content/uploads/2013/12/Caffe-Citta.jpg" class="alignnone size-medium wp-image-90" />

Answer 2

对OP问题的回答很可能已经提到了 - 不要在命名中使用变音符号或任何特殊字符（仅使用a-zA-Z0-9_-）并确保以正确的大小上传并选择正确的大小.

我来回答WP在

wp_get_attachment_image

的帮助下从模板中显示模糊图像的第二个原因（因为这是一个编程问答）。

如果您这样做

object-fit: cover

（基本上是背景大小：封面，但对于

<img ...>

元素），就会发生这种冲突，因为 WP 根据您请求的尺寸向 img 添加“尺寸”HTML 属性 - 现在通常您不知道如何由于响应性，图像会很大，所以假设您请求尺寸

[400, 400]

WP 然后放在那里

sizes="(max-width: 400px) 100vw, 400px"

这 - 你猜对了 - 使浏览器永远不会渲染更大的尺寸，即使更大的尺寸在

srcset

属性中可用。

您可以创建一个包装函数，它将简单地将其删除，一个简单的实现可能如下所示：

function my_wp_get_attachment_image_no_sizes($attachment_id, $size = 'thumbnail', $icon = false, $attr = '') {
    $img = wp_get_attachment_image($attachment_id, $size, $icon, $attr);
    return \preg_replace('/(sizes="[^"]*")/', '', $img);
}

然后你只需使用

my_wp_get_attachment_image_no_sizes(...)

而不是

wp_get_attachment_image()

:-)