电话咨询
QQ咨询
微信咨询
返回顶部

网站图片尺寸怎么选?收好这份指南!

有没有发现自己明明已经在网站内容方面费尽心思还是无济于事,网站在搜索引擎上的排名依旧不佳,而且浏览量与转化率也特别低?你知不知道其实这些问题很有可能是网站的图片尺寸惹的祸!事实上,网站图片尺寸会大大影响网站的加载速度以及在搜索引擎结果页的跳出率和排名高低。对于许多网站建设者来说,在网站置放合适的图片一直就是个艰钜任务。过大的图片(未经优化,原始图大小为 5000px 的图片)不仅会降低你网站的内容加载速度,影响用户体验,还会对你的SEO策略产生负面影响但是过小的图片又对观感不佳。别急,这篇文章将为你带来一份挑选最佳网站图片尺寸的详细指南。

文章纲要:

1. 为什么要挑选网站图片尺寸?

2. 最常用的网站图片尺寸

3. 如何选择最适合我的网站图片尺寸?

4. 文章总结

1. 为什么要挑选网站图片尺寸?

还未经过优化的图像会导致网站需要耗费更长的时间来加载。除了直接影响用户体验,还会导致网站在搜索引擎的排名不佳,流量和转化率自然也不可观;相反的,倘若根据情况以正确的比例优化照片后才将它们添置进网站将为你带来许多好处如:

  • 提升加载速度

根据Google研究,如果网页加载时间超过 5 秒,访客放弃浏览该页面的可能性会增加 90%。要避免访客流失,你可以透过缩小和降低图片尺寸来提高你网站页面的加载速度。

  • 用户体验

如果你使用高品质,尺寸合适且切题的图片,访客在浏览你的网站时将获得更佳的体验。所以,你应该为网站图片尺寸做好详细策划,避免网站看起来格式繁杂。经过优化的图片加载速度也可更快,可以帮助你为访客提供流畅的浏览体验,鼓励他们在你的网站上花费更多时间并专注于你的内容。

你知道吗?一个企业的网站背景图片不仅仅是一张漂亮的图片,它对整体的用户体验有着重大的影响。点击这里,了解如何选择最佳的网站背景图片!

  • 搜索引擎优化

你的网站加载得越流畅,在搜索引擎上的排名就越高。记住!无论是在台式电脑或行动手机的搜索结果页上,具有优化图片的网页加载速度都要比未经优化的快得多。

  • 流量与转化率

更快的网站加载速度可帮助你提高搜索引擎对网站的青睐,从而吸引更多访客进入你的网站,增加网站的曝光率与转化率。

2. 最常用的网站图片尺寸

  • 背景图片

的背景照片编辑工具旨在为你的网站添置匹配各种萤幕尺寸的图片。为确保你的背景图片在所有设备萤幕上都以最佳状态呈现,我们建议你使用 1600 x 900 像素的图片。如果你要调整或对齐背景图片,你可以选择拉伸图片以让其填充整个萤幕(这也是系统默认设定,通常最适合用于调整背景图片)。请确保背景图片的内容不会太过靠近左右的边框,以避免图片里的重要内容无法完整呈现在行动段用户的设备上。其次,你也可以选择平铺——即显示整个图片,但不切割任何部分或将图片置放在版块的中心,需要注意的是这样图片的周围将留出空白部分。

除了背景图片,我们还有许多适合网站的图片尺寸,一起来看看吧!

  • 全宽图片

为获得最佳效果,它们的宽度至少应为1400像素,高度无影响。

  • 半宽图片

置放在头条的半宽图片至少应为700像素,以获得最佳品质,高度无影响。

  • 1/3宽图片

为了获得最佳品质的1/3宽度图像,推荐至少使用480像素宽度的图片,高度无影响。

  • 1/4宽图片

要获得最佳品质的1/4宽度图像,它们的宽度应至少为360像素,高度无影响。

  • 小图示或Logo

宽度至少应为100像素。

  • 图库图片

任何尺寸都适用于图库图片,访客只需点击图库则可查看完整图片。

3. 如何选择最适合我的网站图片尺寸?

你应该根据页面布局选择图片尺寸,大多数情况下,图片应尽可能适应其框架大小以获得最佳网站性能。例如,背景图片通常更大;部落格图片中等大小;缩略图更小等等。

  • 你首先需要确定网站用于置放图片的区域宽度,你可以点击滑鼠右键使用“页面标尺(Inspect)”浏览器扩充程式来帮助你获取相关资讯。

  • 然后,在弹出的工具栏中,点击左上角的元素选择器并将滑鼠悬停在你感兴趣的网站图片或内容部分上,出现的资讯箱子就会显示该图片或内容的尺寸。

小提醒: 想要获取最高品质的网站视觉效果,建议你在网站使用的全宽图片显示宽度为2560像素( 27'' 和 30'' 显示器的常用分辨率宽度)。 你可以自由调配高度,以达到你期望的纵横比。例如,婚礼摄影网站上常见的全宽图片会保持照片的原始纵横比,而其他网站则通常使用覆蓋整个页面宽度但高度较小的图片(纵横比约为 3:1)。以上是来自摄影网站的“全景”图片示例。

除了背景与全款图片,其余的图片尺寸无需占据页面的整个宽度。也许你会好奇部落格网站图片尺寸又该怎么选,是不是与其他网站的选择方式一样呢?别着急,下面我会向你推荐适合部落格文章的图片尺寸。

如果你的部落格内容不需要用户手动缩放,则应根据列或内容区域的宽度调整图片的大小。你可以透过使用上面提到的“页面标尺(Inspect)”方法测量任何文本段落来确定内容区域的实际宽度,例如:

有了这些资讯(例如 568 像素),你现在可以将尺寸加倍以匹配Retina显示器(568像素×2=1650 像素),然后根据你网站的主题和你对图片盗窃的风险承受能力,你可以将该数量减少到更合理的最长边 1200 像素(因此水平图像应为 1200 像素宽,垂直图像应为 1200 像素高,同时保留其原始外观比率)。 用作缩略图的较小照片(无需展开)也遵循相同的调整过程。

4. 文章总结

这份网站图片尺寸指南并不一定适用于 PhotoShelter 或 SmugMug 等照片存档服务,因为它们具有内置的设定与措施,会根据网站的需要将你的原始高分辨率文件生成低分辨率缩略图。但如果你有一个内置图片编辑工具的专业网站托管平台(比如),你就可以遵循这份网站图片尺寸指南来完成网站图片编辑。选择合适的图片是建设具有视觉吸引力且加载速度快的网站的重要元素之一,希望这篇文章能为你提供一些相关方面的知识与帮助。如果对内容有疑问,可以透过 support@strikingly.com 与我们联络。

上一篇
寻找免费的网站托管服务
下一篇
如何建立一个能赚钱的会员网站?