您有没有注意到上面这张预览图加载到您的手机屏幕上时有什么奇怪的地方?
为什么这张图片需要那么长时间才最终填满整个预览框?
那是因为它是一张非常大的图片!
那么,为什么一张大图片需要吞噬用户的数据流量,花费那么长时间,而一张小小的预览图却能在您注意到之前就显示出来呢?
不,我也不确定该怪谁。
不。这不是一个 bug。图片迟早会加载出来。我只是说这是糟糕的用户体验。用户会觉得没有人关心他们的数据流量,而且页面加载速度不如其他页面快。
您有没有注意到上面这张预览图加载到您的手机屏幕上时有什么奇怪的地方?
为什么这张图片需要那么长时间才最终填满整个预览框?
那是因为它是一张非常大的图片!
那么,为什么一张大图片需要吞噬用户的数据流量,花费那么长时间,而一张小小的预览图却能在您注意到之前就显示出来呢?
不,我也不确定该怪谁。
不。这不是一个 bug。图片迟早会加载出来。我只是说这是糟糕的用户体验。用户会觉得没有人关心他们的数据流量,而且页面加载速度不如其他页面快。
我并没有真正注意到加载时间,这表明是你的浏览器或网络问题。
第一次从不同的设备上尝试:
那个是 Chrome 浏览器在 iOS 上的情况。
没那么快。你坐在发达国家的象牙塔里,永远不会知道其中的区别。但我就不同了,我不在象牙塔里,我所在的国家不是发达国家,我非常清楚其中的区别!
使用开发者工具,将国家设置为第二或第三世界,
,关闭缓存,然后重新加载页面。
您的投诉是针对您的 ISP 及其对等互连的吗?
需要明确的是,原始图片为 3.4MB,该缩略图是从 Cloudfront 提供服务的,尺寸为 690x460,大小为 164KB。
无论如何,您有什么提议?Cloudfront 对您所在地区的用户的 CDN 效果不佳?Discourse 没有足够快地下载和创建优化后的图片?
我只知道那些尺寸比整个手机屏幕还要大!
我有一部小型智能手机(4.6英寸 | 720 x 1.280像素)。我的屏幕并不比缩略图小。你的屏幕有多小?
在你那个数据比美国便宜8倍,仍然比欧洲便宜2.5倍的非象牙塔国家?(来源)还是你那个拥有世界最快宽带互联网的非象牙塔国家?(来源)?或者你是指你的非象牙塔国家,其移动数据仍然排名第28位,远高于许多发达国家?(来源)?
听起来你只是需要一个更大的手机。
根据以往的帖子判断,Jidanni 拥有 Galaxy A13 5G 和 Zenfone 3:
Galaxy A13 5G:6.5 英寸,1600 x 720
Asus Zenfone 3:5.5 英寸,1920 x 1080
由于优化后的缩略图尺寸为 690x460,并且其尺寸受到 onebox 的进一步限制,因此它并不比他们的屏幕大。他们确实使用了浏览器缩放,所以谁知道呢 ![]()
这里可能有些蹊跷。
在桌面视图中,onebox 加载的是一个 690x460px, 160 KB 的图片,而在移动设备上加载的是一个 1380x920, 500 KB 的图片。![]()
我将话题移至 #bug。在我看来,这 似乎 是一个 bug,也许之后会被重新分类 ![]()
我可能错了,但我觉得有道理。
如果您查看 HTML srcset,以下图像将根据设备像素比(x1、x1.5、x2)提供。
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x
通常,移动设备的 x2 比例(或更高)因为它们具有更高的像素密度。
所以您需要提供更高分辨率的图像。
设备像素比 (DPR) 是设备制造商给出的一个数字,用于 HiDPI(高每英寸点数)或 Retina(苹果商标)显示屏,它们是现代智能手机、平板电脑甚至一些笔记本电脑和显示器的一部分。
DPR 与显示屏的像素密度直接相关,密度越高,DPR 值越大。DPR 是屏幕的水平(宽度)或垂直(高度)方向上物理(设备)像素与逻辑(CSS)像素的比率。
换句话说,DPR 是一个用于计算屏幕 CSS 分辨率的数字。从 DPR 我们可以直接看到有多少实际的物理硬件像素构成一个 CSS 像素。示例:
Apple iPhone 12
分辨率(设备像素):1170 x 2532
DPR:3
宽度:1170/3 = 390,高度:2532/3 = 844
因此,CSS 分辨率:390 x 844由于 DPR 为 3,在像素网格中:3(宽度)x 3(高度)= 9;9 个物理像素用于形成一个 CSS 像素。
是的,我不认为这是一个错误。我的 iPad 在移动视图下加载的照片比我的桌面设备分辨率更高,因为它能够做到。我可能是错的,但我的理解是,这取决于设备的性能,而不是屏幕尺寸。
另外,我仍然不清楚这个话题是关于“one box”缩略图本身,还是关于点击“one box”链接时实际加载的照片?
抓得好。
由于智能手机的屏幕尺寸较小,你可能不会注意到分辨率较低的图像,而且我认为,总的来说,它们通过移动网络连接互联网的速度可能比家庭互联网连接慢。在这方面,我不认为移动体验会比桌面电脑加载更大的图像。
但是 scrset 规定了为哪个像素比加载哪个图像。![]()
这绝对不是一个 bug,我会把它移回 UX ![]()
缩略图。
确实,我们在 Kiwi 浏览器中看到了开发者工具的结果,
是的,我们说的是 500 千字节的缩略图。
蒂姆·伯纳斯-李会怎么想?
好的,我搜索了一下,确实,对于缩略图来说,这是一个合理的大小——如果你要将它上传到 YouTube 的话。
我的意思是,它一定是一个相当棒的全息图,一个 50 维的缩略图之类的。你确定不能把它做得大约 5000 字节吗?用户能分辨出任何区别吗?不,我不是在指责任何人造成能源危机或拖慢网络。我只是觉得,目的地是小型手机,有些事情可以做得更好。
我的意思是,总得有个点,无论他们有什么样的手机大小的设备,仅仅增加字节数都不会对人类产生任何影响,除非他们有鹰眼,但他们是人,不是鹰。
我同意这里肯定有什么不对劲……这张图片太大了。我们的 onebox 实现要求提供一张超大图片,而一张小得多的图片就足够了。
我们将在未来一两个月内进行查看。
已为所有 onebox 创建了一个更通用的修复程序:
为了进行测试,我使用了来自这个非维基媒体网站的文章:https://www.hagerty.com/media/category/great-reads/,因为它们有相当大的图片可以 onebox。
之前:
之后:
在此更改之前,onebox 图片大约为 400kb。在此更改之后,它们大约为 100kb。
这是一个使用减小缩略图尺寸的 onebox 示例
https://www.hagerty.com/media/car-profiles/driving-the-prodrive-p25-brought-out-my-inner-car-crazy-kid/
该主题已在 41 小时后自动关闭。不再允许回复。