跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

提高主页图像的质量 #139

关闭
美洲虎已打开此问题2022年10月21日·13条评论
关闭

提高主页图像的质量 #139

美洲虎已打开此问题2022年10月21日·13条评论
标签
[组件]内容 与页面内容相关的错误或问题

评论

@杰维拉尔斯
复制链接
合作者

主页上的图像有点模糊,如果能提高分辨率就好了。

我已经添加了一个新版本的“强大和授权”插图。在展示区的情况下,我认为我们可以使用图像网格,而不是加载一个大图片。为了探索这个解决方案,我创建了一个临时页面在这里(可以找到单个图像在这个Figma文件上)

它似乎工作得很好,除了在平板电脑和手机版本中,在该部分周围添加了填充。这种方法有意义吗?可以去掉那个衬垫吗?

@莱尔
复制链接
贡献者

图像网格是一个好主意。将组嵌套在另一个全宽组中是主页上已经使用的解决方法,所以我在该页面上更新了它,它正在工作👍🏻

当我同步内容时,我看不到更新的“强大而有力量”的图像,所以只要确保在图像网格中交换时保存更新即可。

@莱尔 莱尔补充这个[组件]内容 与页面内容相关的错误或问题标签2022年10月21日
@杰维拉尔斯
复制链接
合作者 作者

美洲虎 评论2022年10月27日

谢谢你的帮助!

我正要用新的网格更新主页,但我恢复了更改,因为我注意到在预览中,网格内的图像有时会随机更改高度(在Chrome和Firefox中都会发生这种情况)。

2007年7月11日2022-10-27截图

11 01 08截图2022-10-27

@莱尔
复制链接
贡献者

当我预览帖子时,它仍然是一个大图像-你能用行更新帖子以便我测试它吗?在我同步并部署它之前,我不会被公开部署。

@杰维拉尔斯
复制链接
合作者 作者

是的,对不起,主页现在更新了,有一堆图片。

@莱尔
复制链接
贡献者

我看到的唯一奇怪的尺寸问题是这个图像,左边有一些额外的透明度。图像是在你做了一些事情(滚动、悬停)后改变大小,还是在页面加载时改变大小?

在部署之前,这些图像需要alt文本。此外,对于键盘用户或屏幕阅读器用户来说,拥有10个指向相同内容的链接并不太好,你认为还有其他方法可以链接到展示区吗?

@杰维拉尔斯
复制链接
合作者 作者

美洲虎 评论2022年11月1日

我看到的唯一奇怪的尺寸问题是这个图像,左边有一些额外的透明度。

好的,它被移除了。

图像是在你做了一些事情(滚动、悬停)后改变大小,还是在页面加载时改变大小?

它发生在页面加载时,并且不一致。有时我觉得一切都很完美,有时看起来很糟糕。

截图2022-11-01,10 45 01

与其他人谈论这一点并进行一些测试时,我们怀疑这可能是由于图像的宽度差异,所以我要看看我是否可以在本地复制这个错误,如果可以的话,在古腾堡回购中打开一个问题。

在部署之前,这些图像需要alt文本。此外,对于键盘用户或屏幕阅读器用户来说,拥有10个指向相同内容的链接并不太好,你认为还有其他方法可以链接到展示区吗?

你是对的。我删除了链接并添加了备选文本。我们可以将整个堆栈链接到Showcase吗?

@莱尔
复制链接
贡献者

我们可以将整个堆栈链接到Showcase吗?

我认为古腾堡不允许这样😕

我注意到这个部分也被删除了,是故意的吗?如果保留下来,“寻找灵感”可以成为展示链接,那么就不需要链接所有图像。

上午10 55 55时截屏2022-11-01

@杰维拉尔斯
复制链接
合作者 作者

我注意到这个部分也被删除了,是故意的吗?如果它保持不变,“寻找灵感”可以成为展示环节,那么就不需要链接所有的图片了。

哦,不,我想我是不小心把它拿走的,对不起😞

@杰维拉尔斯
复制链接
合作者 作者

我再次调查了这个问题,发现问题可能是由插件(可能是Jetpack或延迟加载插件)引起的。

我用三幅尺寸完全相同的图片在一个本地网站上进行了测试:

屏幕截图2022-11-04,13 46 04

但如果我启用Jetpack,我会得到以下信息:

屏幕截图2022-11-04,13 45 59

有时我只得到一个不同尺寸的图像,有时我得到两个或更多,但这是随机发生的(在Chrome和Firefox中,Safari似乎表现良好)。我认为这可能是由于插件的原因,因为启用Jetpack后,图像会加载一个数据重计算dims属性。

我不确定我们能不能做点什么。

我唯一想解决这个问题的方法是尝试上传三个水平图像(每行一个缩略图)。接下来我会试试。

@杰维拉尔斯
复制链接
合作者 作者

美洲虎 评论2022年11月4日

这看起来不错,但我很难显示清晰的图像。大的原始图像看起来比三个独立的图像更好。你能检查一下吗,@莱尔?

如果您需要,可以从以下位置导出单个图像在这里.

@莱尔
复制链接
贡献者

我认为页面预览的工作方式与真实内容的加载方式略有不同。我已经同步了三张不同的图像,它们看起来很好(不模糊,我使用的是高pi显示器)。不过,它们看起来要大得多,分别是1.55MB、2.18MB和1.66MB,而之前的图片是194KB的压缩webp。

我已经部署了更改(因为我还需要部署另一个更改),但也许这些更改仍然可以在不降低质量的情况下进行优化。

@杰维拉尔斯
复制链接
合作者 作者

哦,我明白了,一旦出版,它们看起来很棒。减小图像的大小会很好,我会看看是否可以稍微降低质量。

@莱尔
复制链接
贡献者

我在中优化了一些展示图像b8fd776这些图像是测试不同图像质量的结果,这是压缩图像中几乎看不到差异的级别。

我现在要结束这个问题。

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论
标签
[组件]内容 与页面内容相关的错误或问题
项目
还没有
开发

没有分支或拉请求

2名参与者