全网AI资源网站搭建

电脑端+手机端+微信端=数据同步管理

免费咨询热线:13114099110

网站内容页优化-(网站优化内容原创)

发布时间:2022-12-20 10:03   浏览次数:次   作者:派坤优化
网站内容页优化-(网站优化内容原创)

您知道图像对您网站的速度有巨大影响吗? 作为建站新手,这一点往往被忽视。 由于上传未经优化的原图,导致网站打开速度很慢,经常被认为是服务器不好。 这是很常见的事情。 小鲸鱼今天就针对这个问题,讲解如何优化网站图片,包括图片格式、文件大小、大小建议,以及自动批处理和图片优化插件教程。

1、什么是图片优化?

图像优化就是尽可能少地降低图像质量,同时尽可能地减小图像文件的大小。 看下图,优化前后的图片质量几乎没有区别,只是图片缩小了75%。

2、优化图片有什么好处?

1. 更快的网站速度

2.提高SEO排名

3.销售和潜在客户的整体转化率更高

4. 更少的存储空间和带宽(可以降低托管和CDN成本)

5. 更快的网站备份(也降低了备份存储成本)

3.如何优化图片?

网站内容页优化-(网站优化内容原创)(图1)

优化图像的三个关键要素:

1. 图片文件格式:JPG、PNG、GIF

2. 图像尺寸:高度和宽度

3.压缩率:压缩率越高=文件越小

通过组合不同的格式、大小、压缩率,您甚至可以将图像重量减少 80%。

1 图片格式

①JPG:照片或色彩丰富的图片请使用JPG格式。 JPG 是一种压缩文件格式,它会稍微降低图像质量,从而使文件大小更小。

②PNG:适用于简单图像或透明图像,PNG图像格式是未压缩的,意味着它是更高质量的图像,但缺点是文件体积较大。

③GIF:只适用于动画图片,GIF采用256色和无损压缩,是动画图片的最佳选择

网站内容页优化-(网站优化内容原创)(图2)

2 图像大小和文件大小

①外贸网站建设常用图片场景

(1) Logo:宽度不超过300px,尺寸建议在50K以内

(2)站点图标:大小控制在几K

如果只考虑浏览器页面卡片中显示的图标,不考虑页面保存后图标在手机端的效果,大小只需要16*16即可。

如果考虑移动端和浏览器页面卡片两种情况,尺寸为512px×512px,建议后台上传图标时上传尺寸为512的图标。

(3)/:广告图片或装饰背景图片,一般推荐宽度。 如果要做全宽,那么图片的宽度也是可以接受的,但是图片尽量不要太大,尽量不要超过200K,在不影响清晰度的前提下,越小越好.

② 产品图片

宽度建议600-,尺寸建议控制在150K以下。 有条件的尽量保证图片方向和大小的统一,避免图片有横有竖。

③其他照片,如证书、团队成员等。

宽度建议在150K以内,尺寸建议控制在150K以下。

4、如何判断图片是否需要优化?

根据以上建议检查图片格式、文件大小、上传图片大小

使用工具检测,如下图,提示分数很低(绿色代表优秀,红色代表差),也可以看到有很多图片需要优化

比如本站外贸建站教程页面就有200多张图片。 图片优化后,分数达到99分。

图片压缩

图像压缩有不同的工具和压缩效果。 可以使用免费的工具压缩图片然后上传到网站,例如,或者在线压缩工具:,,对于原图比较大的图片,在线压缩工具的文件体积最大 因此,如果图片太大,这样超过5M网站内容页优化,建议优先使用或进行本地压缩。

也可以采取简单省时省事的方法,比如使用以下插件上传时自动压缩图片

① 图片—— 每个月有免费压缩额度,如果购买一次性支付9.9美元,可以压缩10000张图片

②——由网站加速插件WP开发,每月有免费压缩额度,一次性付费9.9美元,可压缩1G图片(约1000张图片)

③.it image ——免费,但压缩效果不如上面两个付费的

下面,我们就一一介绍压缩图片的操作方法。

本地压缩图像

当图片数量较多时,使用自动批处理功能

1.打开,打开一张图片

2、在菜单栏中,点击“窗口”,勾选“动作”,点击新建按钮,命名动作名称,确认后自动开始录制

3.将图像大小更改为目标大小网站内容页优化,如或

4.图片保存为web格式,画质调整为90.jpg格式,另存到非原图的新文件夹中。 (PS:如果你的图片需要保留透明效果,一定要保留png格式,通常png格式的图片比jpg格式的图片要大)

5.关闭图片,点击不保存原图修改,

6、至此动作录制完成,点击动作录制结束按钮。

接下来,执行图像的批处理。

7. 单击文件>自动>批处理

8.选择动作,刚才录制的动作已经默认选中

9、选择源文件夹:选择存放待处理图片的文件夹

10、目标文件夹:选择需要存放处理过的图片的文件夹

11. 点击确定开始快速处理图片。 处理完成后,可以去文件夹验收

图片数量少时,用免费软件单独处理。 以下步骤将覆盖原始图片。 如需保留原图,请先复制原图。

1.打开图片

2、点击ctrl+r修改图片大小后回车确认

3、点击ctrl+s保存图片,设置质量为90,回车确认

在线手动压缩图片

下面以在线图片压缩为例,讲解图片压缩的操作步骤

打开,一般选择压缩,有损是最大压缩,图片可能会模糊; 它是最小压缩,画质损失越少。

将图片拖入虚线框内进行压缩

压缩成功后一张一张下载图片,也可以点击预览按钮查看压缩前后效果对比

插件自动压缩图片

下面以免费的.it图片插件为例,说明如何在线自动压缩图片

1. 确保插件 .it 图像已安装并启用。 如下图配置后,每次上传图片都会自动压缩图片。

2、安装插件前如需优化图片,请点击上图中的全部,或点击下图媒体库中的按钮进行手动优化。

禁止自动生成图像

对于收费压缩图片的插件,需要注意的是每张图片上传时,系统会自动生成多张不同尺寸的图片。

比如,两者都会这样做,那么如果你对这些自动生成的图片进行压缩,就会加速支付信用的消耗。 使用付费插件时,请进入插件设置页面,设置:不压缩缩略图,或者选择性压缩,也可以直接使用短代码,防止系统生成无用图片,不仅节省空间,也避免消耗压缩配额。 下面介绍如何使用短代码来防止系统生成图片。

你需要知道的是,这些自动生成的图片在媒体库中是看不到的,需要在服务器上查看。 下图是媒体库,只能看到原图

下图是后台查看图片文件的方法。 进入网站后请按图片顺序操作查看。 我们可以看到系统为同一张图片生成了多张不同尺寸的图片。

在网站页面设计完成和内容上传之前,我们首先禁用所有自动生成的图片; 如果内容可以立即上传,我们可以根据设计情况酌情放出部分图片的尺寸。

比如做一个商品列表页,我们用了一张300*300px的图片,那么在下面的代码中,在对应的代码行前加上//或者直接删除该行。

安装插件代码

输入 > 添加新页面

输入标题,例如:禁用所有缩略图

输入以下代码:

// 图像尺寸($sizes){ unset($sizes['']); // 未设置大小($sizes['']); // 未设置大小($sizes['large']); // 大尺寸 unset($sizes['']); // -large size unset($sizes['']); // 2x -large size unset($sizes['']); // 2x large size unset($sizes ['']); 取消设置($sizes['']); 取消设置($sizes['']); 取消设置($sizes['l']); 取消设置($sizes['']); 取消设置($大小['']); $尺码; } ('', ''); // 图片大小('hold', ''); // 其他图像尺寸 () { ('post-'); // 通过 ize() ('-size') 添加; // 任何其他添加的图像尺寸 } ('init', '');

选择运行

单击保存以保存。

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。