我是从 photoshop 转换为 CSS 的新手，希望有人可以帮助我。
我在 Photoshop 中有很多图层，我需要将它们转换为 CSS。许多图层包含大约 2500 像素宽度的图像。
我正在使用引导程序，所以我的网站自然是响应式的。现在我应该保留 2500px 的宽度并添加一个“img-responsive”类吗？它似乎有效（该类缩小了图像），但是图像大小仍然很大，并且需要很长时间才能加载。我应该减少这些图像的宽度和高度吗？这会影响更大屏幕上的用户界面吗？
谢谢！
【问题讨论】：
标签： html css twitter-bootstrap photoshop
程序是建立一个符合设计的网站。
不要简单地获取一个 PSD 图层，将其转储为一张巨大的图像，然后将其放在您的页面上。 解释设计并决定如何构建您的页面。您需要决定哪些应该动态调整大小，哪些应该保持静态。您可以根据设计和您的技能找出最有效的方法。
【讨论】：
如果您希望您的图片流畅（响应式在此处不那么重要），您可以为图片设置宽度，但保持高度为自动；他们将调整到该宽度。所以：
img{width:100%; height:auto /*default*/; max-width:2500px;}
请看这里：jsfiddle
【讨论】：
你有很多问题，所以我会以列表的形式回答：
问：“我应该留下2500px的宽度吗……”
答：Bootstrap 当前版本 3.2 的最大容器宽度为 1170 像素，所以我不知道为什么你的图像是 2500 像素，除非它们是背景或类似的东西。您应该调整图像大小以适合您支持的最大桌面尺寸的布局。
问：使用 CSS 类缩小 img 后，尺寸会很大……“我应该减小这些图像的 w 和 h 吗？”
A：缩放图像以适应最大的桌面布局，然后在 Photoshop 中使用“保存为网络”来正确压缩图像大小。对于 JPG，我通常使用 65 的质量。如果是 bg img，您可以使用较低的质量设置 (40-50)，随便玩玩。
问：“这会影响更大屏幕上的用户界面吗？”
答：是的，它会对更大的屏幕产生负面影响。例如，如果您将全角标题图像保存为 768 像素以适应平板电脑，则它在桌面上看起来会像素化（模糊）。
【讨论】：
关于图像，有几种方法可以避免为小型设备加载大图像，这里有两种。
使用服务器端检测，例如https://github.com/serbanghita/Mobile-Detect/ 或http://adaptive-images.com/，并提供适当大小的图像。后者为你做了很多工作。两者都是php，可能还有其他语言的fork。
然后，即使使用这种 IMO 最佳解决方案，您也可以使用一个可以流畅地调整图像大小的类，例如“img-responsive”或您自己的制作以使其流畅。
使用移动优先的 css 并使用背景图片，您可以在容器上使用百分比或 vh（或组合作为后备）并使用 background-size:cover，然后从最小到最大的媒体查询开始。将图像设置为 600 像素、1000 像素、1600 像素和 2500 像素或其他大小，然后进行最小宽度媒体查询以加载背景图像。使用 Modernizr 为无法理解 background-size css 的浏览器创建后备方案（如果您支持 IE8 或其他旧版浏览器）。
【讨论】：