网站设计上应避免的5个图片错误方式
大图像、画廊和照片繁重的设计是网站设计中的大趋势。为了充分利用这种美感，你需要确保网站上的每个图像都适合显示并很好地代表你的品牌。从技术问题到图像质量，设计师在制作过程中会犯很多错误。但是在使用网站图像时，你不必陷入这些陷阱之一。本期专业的网站设计公司Angle将给大家带来图像错误的几个形式以及如何完全纠正或避免它们。
完整尺寸的图像在打印作业时很漂亮（并且是必需的），但在网络上可能会出现问题。大图像加载缓慢；缓慢的加载时间会导致用户放弃你的网站。不幸的是，这是一个容易陷入的陷阱。许多后端程序都允许上传大图像，除非你引起注意，否则你甚至可能不知道文件正在以令人难以置信的大小上传。不同用途的不同图像需要不同的图像规格。请参阅你的品牌或网站指南，以便你了解网站设计上常见图片区域的尺寸。考虑图像时，文件类型也很重要。请不要在网上使用tiff。最常见和可用的文件格式是PNG（计算机生成的图像，如图表或徽标，或需要透明时），JPG（照片）或GIF（动画）。
解决方案：简单的解决方案是按照适当的网站分辨率将图像的尺寸调整为框架的尺寸。但是还有更多。保存每个图像，以便在你的网站上最佳使用和进行社交共享。（例如，Pinterest图片的宽度为600像素；如果您希望图片可共享，则该尺寸应为该尺寸。）
解决方案：当图像更改并且您的收藏夹图标为最新时，请确保删除旧的缩略图或预览。
错误3：缩放或拉伸不当
没有人会看到张着脸或缩放比例不合适的图像。图像的拉伸或非比例缩放（在发生主题或后端更改时尤其常见）是禁止的。每个图像都需要在垂直和水平方向上以1到1的比例缩放。否则会损坏照片的完整性。
解决方案：密切注意所有扩展比例，并定期审核你的站点。
错误4：不计划多个设备大小
响应式网站设计框架会对图像产生一些影响。不同设备之间或按方向的形状或大小的变化使得决定图像在不同设备之间的渲染方式非常重要。最常见的做法之一是使用媒体查询按设备计划这些更改。CSS允许根据屏幕尺寸将特定样式应用于图像，并帮助图像很好地渲染而不会“破坏”设计。
解决方案：将媒体查询用于响应式框架，并在许多设备上测试图像渲染。
错误5：过度使用或通用艺术
股票摄影可能是一个很好的快速解决方案，但可能导致一些意想不到的后果。在太多网站上使用的照片或仅具有通用外观的照片不会创建与用户建立联系的视觉效果。（你不希望自己的网站看起来像其他网站一样吗？）如果你打算使用股票摄影，请考虑以有趣的方式可以编辑或使用的图像。避免使用看起来像你在其他地方看到的图像的图片（查看所有竞争对手或类似网站的图像）。
解决方案：考虑雇用摄影师为你的网站创建精美的图像文件。包括与你的公司或品牌有关的视觉效果，并以正确的方式反映你的网站。
为网站设计项目选择和创建图像可能是设计过程中最有趣的部分之一。请注意每张图片和像素，以确保你的网站正常运行，并包含吸引用户的图片。本期专业的网站设计公司Angle就为你分享到这里。
完整尺寸的图像在打印作业时很漂亮（并且是必需的），但在网络上可能会出现问题。大图像加载缓慢；缓慢的加载时间会导致用户放弃你的网站。不幸的是，这是一个容易陷入的陷阱。许多后端程序都允许上传大图像，除非你引起注意，否则你甚至可能不知道文件正在以令人难以置信的大小上传。不同用途的不同图像需要不同的图像规格。请参阅你的品牌或网站指南，以便你了解网站设计上常见图片区域的尺寸。考虑图像时，文件类型也很重要。请不要在网上使用tiff。最常见和可用的文件格式是PNG（计算机生成的图像，如图表或徽标，或需要透明时），JPG（照片）或GIF（动画）。
解决方案：简单的解决方案是按照适当的网站分辨率将图像的尺寸调整为框架的尺寸。但是还有更多。保存每个图像，以便在你的网站上最佳使用和进行社交共享。（例如，Pinterest图片的宽度为600像素；如果您希望图片可共享，则该尺寸应为该尺寸。）
错误2：忘记缩略图
有许多方法可以处理缩略图的大小和调整大小。（许多功能取决于你的后端功能，因此我们不会争论每种功能的优缺点。）但是你确实需要记住更新并注意站点上的最小图像。网站设计人员常常忘记，缩略图，图像预览和网站图标将需要通过更改网站内容进行更新。另一个重大错误？使用缩略图大小的较差图像，因为它会尽可能大。如果图像不好，请不要使用它。没有图像比不良图像更好。解决方案：当图像更改并且您的收藏夹图标为最新时，请确保删除旧的缩略图或预览。
错误3：缩放或拉伸不当
没有人会看到张着脸或缩放比例不合适的图像。图像的拉伸或非比例缩放（在发生主题或后端更改时尤其常见）是禁止的。每个图像都需要在垂直和水平方向上以1到1的比例缩放。否则会损坏照片的完整性。
解决方案：密切注意所有扩展比例，并定期审核你的站点。
错误4：不计划多个设备大小
响应式网站设计框架会对图像产生一些影响。不同设备之间或按方向的形状或大小的变化使得决定图像在不同设备之间的渲染方式非常重要。最常见的做法之一是使用媒体查询按设备计划这些更改。CSS允许根据屏幕尺寸将特定样式应用于图像，并帮助图像很好地渲染而不会“破坏”设计。
解决方案：将媒体查询用于响应式框架，并在许多设备上测试图像渲染。
错误5：过度使用或通用艺术
股票摄影可能是一个很好的快速解决方案，但可能导致一些意想不到的后果。在太多网站上使用的照片或仅具有通用外观的照片不会创建与用户建立联系的视觉效果。（你不希望自己的网站看起来像其他网站一样吗？）如果你打算使用股票摄影，请考虑以有趣的方式可以编辑或使用的图像。避免使用看起来像你在其他地方看到的图像的图片（查看所有竞争对手或类似网站的图像）。
解决方案：考虑雇用摄影师为你的网站创建精美的图像文件。包括与你的公司或品牌有关的视觉效果，并以正确的方式反映你的网站。
为网站设计项目选择和创建图像可能是设计过程中最有趣的部分之一。请注意每张图片和像素，以确保你的网站正常运行，并包含吸引用户的图片。本期专业的网站设计公司Angle就为你分享到这里。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
