跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
images

45 篇文章
{
,

}
文章“您的图片可能不是装饰性的”的直链
无障碍 alt 文本 图片

您的图片可能不是装饰性的

Eric 毫不客气,尤其是在标题中,以及结论中

在现代网页设计和开发中,显示图片是一个高度有意的行为。替代描述允许我们解释图片的内容,并且在

…
Avatar of Chris Coyier
Chris Coyier 于 2021年7月20日
文章“图片很难”的直链
图片

图片很难。

在网站上放置图片非常简单,对吧?实际上,是的,很简单。您使用<img>并将它链接到src属性中的有效源,就完成了。除了(数手指)有 927 件您可以(并且…

Avatar of Chris Coyier
Chris Coyier 于 2021年7月22日
文章“简单的`img`元素和核心 Web 指标”的直链
图片 性能

简单的`img`元素和核心 Web 指标

Addy Osmani 关于 HTML 中的图片

简单的 <img> 元素多年来获得了一些超能力。鉴于它在网络图像优化中的核心地位,让我们了解一下它能做什么以及它如何

…
Avatar of Chris Coyier
Chris Coyier 于 2021年5月17日
文章“2021 年最大限度地优化 Web 图像加载”的直链
图片优化 图片 性能

2021 年最大限度地优化 Web 图像加载

Malte Ubl 的 列表 用于

8 种图像加载优化技术,以最大限度地减少用于在 Web 上加载图像的带宽和用于图像显示的 CPU 使用率。

…
Avatar of Chris Coyier
Chris Coyier 于 2021年2月18日
文章“使用 Unsplash API 添加漂亮的图片”的直链
图片

使用 Unsplash API 添加漂亮的图片

也许您知道 Unsplash?我敢打赌,它是目前最受欢迎的免费图片网站,原因有两个

  1. 那里的每张照片都非常漂亮
  2. 每张照片都是完全免费的,即使用于商业用途。您不需要
…
❥ 赞助
文章“执行此操作以改善网站上的图像加载”的直链
纵横比 图片 性能

执行此操作以改善网站上的图像加载

在下面嵌入的视频中,Jen Simmons 解释了如何通过使用宽度和高度属性来改善图像加载。问题在于,当图像首次加载时,会有很多卡顿,因为img自然会…

Avatar of Robin Rendle
Robin Rendle 于 2020年2月19日
文章“使用 SVG 创建简单的图像占位符”的直链
图片 SVG

使用 SVG 创建简单的图像占位符

Tyler Sticka 的一个小型开源 实用程序,它返回一个 SVG 的数据 URL,根据需要用作图像占位符。

我喜欢这种自运行实用程序的想法,而不是依赖某些第三方服务,例如 placekitten…

Avatar of Chris Coyier
Chris Coyier 于 2020年1月27日
文章“CSS 中的宽度/高度与 HTML 属性中的宽度/高度有什么区别?”的直链
属性 图片 特异性

CSS 中的宽度/高度与 HTML 属性中的宽度/高度有什么区别?

某些 HTML 元素接受宽度和高度作为属性。有些则没有。这些属性有时被称为表现性属性。需要注意的是,它们会被任何其他样式信息覆盖。这使得它们成为理想的回退方案。
Avatar of Chris Coyier
Chris Coyier 于 2020年1月24日
文章“怪旗”的直链
旗帜 图片 精灵图

怪旗

我不太常看到使用图片精灵了,但它仍然是一种很好的技术,可以在页面上有多个装饰性图片资产时减少下载量。主要思想是将所有图形组合成一个,然后…

Avatar of Chris Coyier
Chris Coyier 于 2019年12月11日
  • 更新
  • 1
  • 2
  • 3
  • ...
  • 5
  • 旧版

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.