html - PSD 到 HTML 元素尺寸

Question

我有一位设计师使用 Photoshop (.psd) 设计我的网站。

现在我是将其转换为 html/css 的人。 在设计中，有尺寸为 70x55 的图标(图像)(用 photoshop 标尺测量)

我的问题是，当我将这些图像编码成 html/css 时，我应该使用以下代码吗？

<img src="img1.png" width="70px" height="55px"/>

这是将 psd 转换为 html 的方式吗？按照设计师设计的实际psd上的大小，间距，距离是什么？

我对此一窍不通，因此非常感谢您的帮助。

-更新-

顺便说一句，当我将其编码为 html/css 时，我使用的是高分辨率桌面显示器(不是标准显示器笔记本电脑屏幕)，我遵循了 psd 中设计的所有尺寸，从图像到容器 div &对话框(设计者设计了对话框)。

现在，在我完成编码后，遵循设计(遵循我在 psd 上看到的内容)，当我使用当前使用的大屏幕在浏览器中查看它时，它看起来不错。我看到的 View 是页面在 psd 和很多空间中看起来相同，并且看起来不太紧凑。所以这里的一切看起来都不错。

现在，当我在我 friend 的带有标准显示器屏幕的笔记本电脑上查看它时，页面看起来非常紧凑，图像(来自 psd，我遵循尺寸并在 html/css 中编码)看起来很大，一些我编码的元素不适合浏览器屏幕。我确定这背后的原因是因为我使用的是较小的屏幕。

现在我想知道，我是按照设计师在psd中设计的。我跟踪了距离、图像尺寸等……谁在这里做错了？设计师因为他设计的 psd 中的元素对于较小的显示器屏幕来说太大了吗？或者我在这里不知道什么或者可能错过了什么？

任何指导都会有很大的帮助

Answer 1

使用 Photoshop 中的切片工具剪切图像并保存到网络以优化图像。

图像的宽度和高度属性不是必需的，尽管它们可以节省浏览器读取图像以计算尺寸的少量时间。使用CSS控制图片大小；但显然你应该避免将图像拉伸(stretch)到大于其原始尺寸，否则它会变得像素化。

默认情况下，图像将以其原始大小呈现在浏览器中。