独立站图片怎么处理?独立站处理图片有哪些技巧?

2024-01-01 14:01:26
By 喃阿弥陀佛
有一些卖家朋友是自己建设的独立站,因为都是属于网店的性质,所以需要通过图片的视频向用户展示自己的产品质量和细节,那么独立站图片怎么处理?有哪些尺寸要求呢?
 
独立站图片怎么处理?有哪些技巧?
 
图片优化的技巧说少不少,我们先挑出最重要、最实用、易实现的6点来介绍。能真正做好这些的外贸网站,已经相当优秀。
 
1、制作与内容相关的图片
 
谷歌的AI技术,已经允许谷歌可以直接仅仅从图像就能识别到你要表达什么,不再像以前依靠爬虫文本才能理解了。
 
谷歌云视觉API(Google Cloud Vision API)——一个机器学习图像工具,可以从图像中提取实用信息,来检测图片内容和理解文本。
 
也就是说,图片要与内容高度相关,方便机器理解。不然机器检测是A,而你写的内容是B,不配对就会造成理解困难、不友好,自然会拖网站排名的后腿。
 
所以,我们建议无论是产品图片、工厂图片、设备图片、人物图片,乃至虚拟矢量图,都要与你的对应内容相关。图片相关性高,用户容易理解,机器也识别快,更易被认为是优质图片/内容。
 
而相关的图片,就需要从拍摄和设计方向着手。我们着重说说拍摄,有一个很快捷的技巧就是:谷歌图片搜索相关流量关键词,看看排在前面的同行怎么拍,拍的是什么,就大概知道该如何准备了。
 
2、选择合适的图片格式
 
比较常见的几种图片格式:
 
JPEG,文件相对较小而保证良好的色彩和清晰度,适合大照片和插图;
 
PNG,图像更高清,背景透明,但文件较大,适合高要求多层次图片;
 
GIF,展示动态图像,色彩细节稍差,适合动图和替代短视频;
 
SVG,基于XML的二维矢量图格式,可在不损失质量的情况下调整图像大小,不影响加载,适合icon、logo、动态艺术插图、动态信息图表等;
 
WebP,谷歌推出的图片格式,在相同质量下,体积比JPEG更小,但不被所有软硬件支持,目前只在Chrome浏览器能更友好展示。
 
JPEG、PNG、GIF是最主要的图像文件格式,占了互联网图像流量的96%。JPEG是有损格式,可以更好平衡图像质量和大小。PNG和GIF是无损格式,可以更好保证图像质量。他们之间也可以通过工具互相转换。
 
不同的格式用了不同的压缩方法,就会有不同的色彩、清晰度、大小等效果。综合起来,就会影响图像展示的质感,网站容量和速度。所以,要经过综合权衡需求和效果,选择当前最合适的图像格式。
 
譬如独立站首页的banner最好别用PNG或GIF而用JPEG,实在要用也要适当压缩,以免图像太大影响加载和体验。
 
3、控制图片尺寸,适当压缩
 
图片平均占据网页总容量的21%(Http Archive)。说明图片在网站的“重量”。
 
还有新谷歌排名因素「页面体验」里面的LCP(最大内容渲染:显示第一个最大内容元素所需时间,可反应出网站的读取速度),较多情况下就是图片。说明图片对网站速度影响大。
 
压缩图片大小,可以非常直接地提升网站的加载速度、稳定性、用户体验。譬如:http://increasingly、com这个网站通过压缩图像,加载速度加快了33%/2秒。用户能更快打开你独立站的每个页面,用着就是amazing(爽)啊。
 
因此,建议大家利用好各种压缩工具(插件/在线工具/软件……工具推荐后面有哦),适当压缩图片,但是也要确保图片质量和清晰度(分辨率)。
 
4、让图片能适应多种设备
 
Responsive,图片要自适应各种设备(台式电脑、手提电脑、平板、手机等)。在不同的设备上,图片大小、长宽、清晰度都正常,比例舒服,加载快。
 
怎么做到?如果你懂代码或有程序猿,可以:
 
上传不同尺寸图片,让代码实现不同的设备加载不同的图片;
 
上传一张原图,让代码实现不同的设备同比缩放这张图片。
 
如果你不懂代码,可以选择WordPress + Elementor插件,或者其他自动化建站工具,在后台上传一张原图,勾选你想在什么设备,按多少百分比同比缩放原图。
 
另外,还有个小tips:SVG格式的图片,在移动设备和桌面设备上都非常容易实现自适应,因为浏览器可以渲染任何大小的矢量图像,代码自动任意调整图片大小。
 
网店是没办法实物放在我们客户眼前,所以只能通过图片的方式去展现,如果你的图片拍摄的不清楚,那肯定是极大程度的会影响你的转化率的哦!

常见问答(FQAS)


图片如何上传?

独立站可以使用 FTP 或文件管理器进行图片上传,建议使用 CDN 进行图片加速。

图片如何优化?

可以对图片进行压缩、重构尺寸等优化操作,减小图片体积,优化加载速度。同时可以启用图片懒加载技术。

如何防止图片被展示成链接?

可以给图片添加 alt 属性,可以给图片添加 CSS 样式 display:block 避免图片表现为内联元素。

如何管理大量图片?

可以使用图床服务批量上传和管理图片,如七牛、又拍云等,实现图片集中管理。同时可以使用分类或者标签进行图片归类。

如何添加图片描述?

可以使用 alt 属性描述图片内容,使用 title 属性描述更详细信息。描述文字有助于图片被搜索引擎索引。