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

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

1、什么是图片优化？

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

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

1. 更快的网站速度

2.提高SEO排名

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

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

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

3.如何优化图片？

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

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

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

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

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

1 图片格式

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

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

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

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', '');

选择运行

单击保存以保存。