网站设计要避免的 8 个图像错误

大图片、画廊和大量照片的设计是网页设计的一大趋势。为了充分利用这种美感，您需要确保网站上的每个图像都适合显示屏并很好地代表您的品牌。

从技术问题到图像质量，设计师一路上犯了很多错误。但在处理网站图像时，您不必陷入这些陷阱之一。在这里，我们将了解图像错误以及如何纠正或完全避免它们。（作为这篇文章的奖励，我们提供了一系列有趣且精彩的图像，从死亡到 Stock Photo的最近对象集合。）

错误：上传大文件

当涉及到打印作业时，全尺寸图像很漂亮（并且是必要的），但当涉及到网络时可能会出现问题。大图片加载缓慢；缓慢的加载时间会导致用户放弃您的网站。

不幸的是，这是一个很容易掉入的陷阱。许多后端程序允许上传大图像，除非您注意，否则您甚至可能不知道文件正在以令人难以置信的大小上传。不同用途的不同图像需要不同的图像规格。请参阅您的品牌或网站指南，以便了解网站上常见图像区域的尺寸。

在考虑图像时，文件类型也很重要。请不要在网络上使用 tiff。最常见和可用的文件格式是 PNG（计算机生成的图像，如图表或徽标或需要透明度时）、JPG（照片）或 GIF（动画）。

解决方案：简单的解决方案是根据框架尺寸调整图像大小，使其以适当的网络分辨率显示。但还有更多内容。保存每张图像，以便在您的网站上实现最佳使用并进行社交共享。（例如，Pinterest 图像的宽度为 600 像素；如果您希望图像可共享，则应该是该大小。）

错误：忘记裁剪

虽然使用大文件可能会使网站陷入困境，但使用隐藏在屏幕上的全帧图像也会使网站陷入困境。裁剪通过创建全帧图像可能不存在的定义焦点来帮助展示您希望用户看到的视觉效果。

缺乏图像裁剪还会产生缺乏动态的视觉效果堆栈，这些视觉效果都具有相同的形状和纵横比。使用多种裁剪和有趣的图像形状可以为网站增添视觉吸引力。

解决方案：在上传之前将图像裁剪为适当的大小或尺寸，以便每个图像都按需要呈现。

错误：忘记缩略图

有多种方法可以处理缩略图大小和调整大小。（其中许多取决于您的后端功能，因此我们不会争论每个的优点。）但您确实需要记住更新并注意网站上的最小图像。

设计师常常忘记缩略图、图像预览和网站图标需要随着网站内容的更改而更新。

另一个重大错误是什么？使用缩略图大小的较差图像，因为它已经尽可能大了。如果图像不好，就不要使用它。没有任何图像比糟糕的图像更好。

解决方案：确保在图像更改时删除旧的缩略图或预览，并且您的网站图标是最新的。

错误：无法搜索的名称和元数据

数码相机在各种元字段中保存了大量信息，这些信息不会转换到网络上。从图像中剥离这些信息并将其交换为可用数据。搜索引擎无法读取图像的内容，因此要使图像可搜索，图像必须在标题、alt 标签和周围内容中包含描述性文字。

不良图像名称的示例：

• 图片1.jpg

• DSCN00023.jpg

• 眼镜%和%手表.jpg

更好的图像名称包括一些描述性单词，例如 glass-and-watch-and-plant.jpg。图像的替代标签参考应包含类似的描述，例如“柜台眼镜、手表和植物上的物品”。（并确保单词拼写正确。）

解决方案：对所有网站图像使用强命名约定，并将图像与与每个视觉效果相关的内容配对。图像名称应包含由连字符分隔的描述性单词。

错误：缩放或拉伸不当

没有什么比脸部拉长的人或缩放不当的图像更奇怪的了。图像的拉伸或非比例缩放（当主题或后端发生变化时尤其常见）是禁忌。每个图像都需要以 1 比 1 的比例进行垂直和水平缩放。任何其他行为都会损害照片的完整性。

解决方案：密切关注所有缩放比例并定期审核您的站点。

错误：没有规划多种设备尺寸

响应式设计框架对图像有一些影响。不同设备之间形状或大小或方向的变化使得决定图像如何跨设备渲染变得非常重要。

最常见的做法之一是使用媒体查询来按设备规划这些更改。CSS 允许根据屏幕尺寸将特定样式应用于图像，并帮助图像呈现良好效果而不会“破坏”设计。

解决方案：使用响应式框架的媒体查询并在多种设备上测试图像渲染。

错误：忽略视网膜屏幕

就在不久之前，曾经有一段时间，网站只需要 600 像素宽、72 ppi 的标准图像。但屏幕的改进速度已经不再是这样了。

根据您的框架，每个图像实际上可能包含为不同屏幕尺寸和分辨率（包括视网膜显示器）保存的多个图像。（视网膜显示器的分辨率可能因设备而异，但明显高于标准显示器。）

解决方案：包括专门用于视网膜显示的文件和媒体查询。（CSS 技巧可以提供帮助。）

错误：过度使用或通用艺术

图库摄影可以是一个很好的快速解决方案，但可能会导致一些意想不到的后果。在太多网站上使用的照片或仅具有通用外观和感觉的照片不会创建与用户建立联系的视觉效果。（您不希望您的网站看起来与其他网站一样，是吗？）

如果您打算使用图库摄影，请考虑可以以有趣的方式编辑或使用的图像。避免使用看起来像您在其他地方看到的图像（查看所有竞争对手或类似网站的图像）。

解决方案：考虑聘请一名摄影师来创建专门针对您的网站的精美图像文件。包括与您的公司或品牌相关的视觉效果，并以正确的方式反映您的网站。

结论

为网站项目选择和创建图像可能是设计过程中最有趣的部分之一。小心对待每一个图像和像素，以确保您的网站运行良好并包含能够吸引用户的图像。

在网站项目中使用图像时，您有什么提示或技巧吗？我们很想知道它们是什么。在评论中分享它们。