网站加速图片优化插件 Smush

smush plugin如果要推荐一款网站加速图片优化插件，出现在我的推荐名单中应该有 Smush 的身影。别误会，这款插件没用给我广告费用，这篇文章也不是吹捧Smush插件的马屁文章。在之前的建站教程中，Jack老师一直偏好的是用tinypng来对图片进行优化压缩，但tinypng最大的问题在于它是在线压缩软件，没有配套的wordpress插件版本。为了便于一站式集成化操作，所以我在亲测了多款图像压缩优化插件，最终Smush获得了我的好感，以至于我今天专门写一篇文章来讲解它的各项好处。废话不多说，我们来看具体的实操情况。

一.Smush插件的安装与激活

sumsh插件安装如上图所示，在我们自己的网站后台的插件菜单中点击安装插件，在搜索框中输入“Smush”，选中这个“丑女人”然后进行安装，安装完成后激启用该插件即可。

二.Smush插件的相关设置

我们看到Smush插件主要有7大板块功能，分别为bulk smush，directory smush，integrations，lazy load，CDN，tools, settings,我们分别对每一个板块都进行详细的讲解，首先是Bulk Smush（批量蓝精灵，这里不要把bulk简单粗暴的理解为散装啊！）

1.Bulk Smush

smush设置3首先Bulk Smush部分对我们网站的图像信息进行了整体性批量扫描，分析出我们网站上目前有265个需要优化的图像内容，它建议我们用它的升级版本进行一次性批量图像优化处理（免费试用，如果是做图像站点的同学建议开启该功能，数量不多的还是算了），当然我们也可以使用免费版本的，只不过功能上有限制，一次性只能优化50张图像。smush设置

区块一：

Image Size（图像大小）：WordPress为你上传的每个图像生成多个图像缩略图。选择批量优化时要包括的缩略图大小。默认情况下是选择全部图像，点击“Custom”按钮后，Smush插件会给出6个压缩格式，分别是80*80px，300*300px，1030*1030px，1536*1536px，2048*2048px，medium_large；我们根据自己的需要进行选择。

区块二：

Automatic compression（自动压缩）：当我们将图像上传到自己站点的时候，Smush可以自动为我们优化和压缩图像（注意：Smush只会自动压缩区块一中我们自行选择的图像尺寸，如果我们选择的是“All”，那么默认全格式压缩）

区块三：

Metadata（元数据）：不知道大家有没有注意到过一个有趣的现象，在胶片相机时代，经常能够在照片上看到拍摄日期，而进入数码相机时代后，这些照片的信息反而不见了（事实上他们只是隐藏在了数字格式中没有在前端显示，当我们上传图像数据的时候这些元数据会上传到网站上），这些元数据对我们并没有太大的用处建议进行删除。

区块四：（ps的时候我忘记把这块区域内容做到上图上了，请各位观众老爷见谅）

Image Resizing（图像调整大小）：这个功能是wordpress升级到5.3版本之后Smush插件新增的，因为从WordPress 5.3开始，将大图像上传大小调整为指定的最大宽度和高度。如果在页面上检测到了不必要的大尺寸图像，Smush插件会以减小其尺寸从而减少加载时间。注意：gif格式的动画不会调整大小，否则会导致动画无法正常加载

2.Director Smush

smush设置这部分内容讲的是目录优化，除了优化我们上传的图像资源外，我们网站上还存在很多图像不是我们自己上传但已经存在的，比方说原有的主题Demo中的图像或者背景等，为了方便我们优化这些内容，Smush插件采用目录优化的方式，点击上图中蓝色的“Choose Directory”插件，会出现一个列表框，里面是我们的网站根目录文件夹列表（不好意思，我忘记截图进行说明了，同学们根据我的操作过程应该能在自己网站上看到这些根目录中的文件夹），然后我们有针对性的选择一些需要优化的文件夹即可。

3.Integrations

smush设置

区块一:

Gutenberg Support(古腾堡支持):古腾堡是wordpress官方现在主推图的编辑器(不过受欢迎程度并不是很高)，它的功能是为显示图像的古腾堡块添加统计信息和手动拖尾按钮。因为我的网站没有使用古腾堡编辑插件所以这个对我来说并没有太大作用。

区块二：

WPBakery Page Builder：允许在WPBakery Page Builder编辑器插件中调整大小的图像，这个功能也需要安装WPBakery Page Builder这个插件的，我的心头好是Elementor编辑器，所以我再次选择性的忽略了

区块三：

Amazon S3和NextGen Gallery这两个功能区块是需要Smush Pro版本才能使用的，我没有开通pro版本，此处略过不讲解

4.Lazy Load

smush设置

区块一：

Media Types：选择要延迟加载的媒体类型，对应的选项媒体文件类型有.jpeg  .png   .gif   .svg   iframe，我们根据自己的前端页面展示效果和网站加载速度提升的两方面综合考虑来进行选择，某些情况下这些媒体文件并不是很适合lazy load（也就是我们传说的懒惰加载）Output Locations（输出位置）：默认情况下，Smush将延迟加载所有图像，但是我们也可以将其优化为特定的媒体输出，比方说内容，小部件，文章缩略图等等

区块二：

Display & Animation（显示和位置）：选择要如何显示预加载的图像，以及如何将其设置为动画Display（显示）：在这里Smush插件给了4中图像预加载的方式：淡入，微调，占位符，没有显示；这四种显示方式分别有4种不同的动画显示方式以供我们进行选择设置和跳转smush设置

区块三

Include/Exclude（包含/排除）：对希望防止延迟加载的特定页面，帖子或图像类禁用延迟加载，因为某些原因，网站上的一些特定页面我们并不想用lazy load的方式来显示加载媒体文件和图像，所以我们可以针对这些页面进行选择性排除，这样Smush插件就知道了哪些页面上的图像和媒体文件是不需要lazy load，在上图中的左侧部分，我们根据自己的需要进行选择性排除即可。如果你觉得这样的选择范围太广无法达到你需要的目标，那么右边的url方式就很实用了，比方说有一篇文章我不想用lazy load方式来显示，那么就可以在右上角的方框中输入其对应的url：www.example.com/abc.com.html如果上面的url方式还是打击面太广，你还想要进一步定义不需要加载的图像和媒体文件，那么上图右边的Classes ＆IDs选项就更实用了，不过这个设置需要一定的代码基础，特别是CSS语言也就是叠层样式表中的类选择器部分的相关知识当然了lazy lado不是一定非要进行安装设置，如果你的网站框架和语言代码足够精简，完全可以不用lazy load设置，点击该项目的底部的Deactivate按钮即可禁止该功能

5.CDN

smush设置这部分不做重点讲解，因为它需要配套的WPMU DEV会员身份。大体的工作原理就是用批量Smush自动压缩和调整图像大小，或通过多遍有损压缩和自动调整大小功能将它们上传到WPMU DEV的超快CDN，通过减轻服务器负担来提高页面速度。（不是很建议这种操作！）

6.Tools

smush设置

区块一

Image Resize Detection（图像调整大小检测）：它可以为我们的网站添加功能，以突出显示对于容器而言太大或太小的图像， 

区块二

Bulk Restore（批量还原）：某些情况下我们不想让图像进行压缩，反而想让图片恢复成原始状态，有些同学可能会担心，之前已经压缩过一次不管是有损还是无损优化，对图像画质多多少少应该会有一些影响。事实上Smush插件的强大之处就在于它的图像还原技术是很牛逼的，即便是压缩过的图像也能恢复到原始状态，这是市面上很多图像优化插件所做不到的事情

7.Setting

smush设置

区块一

Translations（翻译）：默认情况下，如果有匹配的翻译可用，Smush将使用您在WordPress管理员设置中设置的语言，如果我们再wordpress后台设置的默认语言是中文，那么smush插件的编辑语言就是中文Color Accessibility：启用高对比度模式

区块二

Data（数据）：数据部分包含三个子项目，分别是还原图像，卸载，恢复出厂设置；这个版块内容没什么好说的，根据自己的需要进行设置就好

区块三

API Status：这个版块功能是针对Smush Pro版本的付费功能来说的，如果你在启用专业版本的相关功能时遇到问题，可以强制API在此处更新你的会员资格，从而恢复对专业版本功能的使用权限！好了，以上就是本章关于网站加速图片优化插件Smush的全部实操内容，如果有不理解的地方，没关系，解决方案如下：点击此处，查看更多外贸建站和谷歌SEO优化免费教程QQ:3233269705QQ群：645296397微信公众号：微信公众号二维码
WordPress建站教程

37 回复

  2. Greetings from Idaho! I’m bored to death at work so
    I decided to check out your blog on my iphone during lunch break.
    I really like the information you present here and can’t wait to take
    a look when I get home. I’m surprised at how fast your blog
    loaded on my cell phone .. I’m not even using WIFI, just 3G ..
    Anyhow, excellent blog!

  4. I’m very happy to uncover this great site. I wanted to
    thank you for ones time for this particularly wonderful read!!

    I definitely liked every bit of it and I have you saved
    to fav to check out new stuff on your web
    site.

  7. Hello there! Do you know if they make any plugins to
    help with SEO? I’m trying to get my blog to
    rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Thank you!

    1. yes, of course，you can fine this kind of content in my blogs.
      Or，you can contact with me I will tell you more about it

  8. Pretty section of content. I just stumbled upon your weblog and in accession capital
    to assert that I acquire actually enjoyed account your blog posts.
    Anyway I will be subscribing to your feeds and even I achievement you access consistently fast.

  10. hey there and thank you for your info – I’ve definitely picked up something new from right here.
    I did however expertise some technical issues using this site, as I experienced to reload
    the site a lot of times previous to I could get it to
    load correctly. I had been wondering if your web host is OK?

    Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and could damage your
    high-quality score if advertising and marketing with Adwords.
    Well I am adding this RSS to my email and could look out for
    a lot more of your respective interesting content. Make sure you
    update this again very soon.

  11. Fascinating blog! Is your theme custom made or
    did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog stand out.
    Please let me know where you got your design. Bless you

  12. Hello, i think that i saw you visited my weblog so
    i came to “return the favor”.I’m trying to find things to enhance my web site!I suppose its ok to
    use a few of your ideas!!

  13. I am extremely inspired with your writing skills and also with the layout to your blog.
    Is that this a paid subject or did you customize it your self?
    Either way stay up the excellent high quality writing, it is uncommon to
    look a nice blog like this one these days..

    1. thankyou, my friend! This website’s theme is Astra.
      Do you need me to tell you how to use it?

  14. I’m curious to find out what blog system you are using?
    I’m having some small security problems with my latest website and I would
    like to find something more safe. Do you have any solutions?

    1. of course, you can！please do it！
      my website hosting is siteground，but it is a little expensive！

  17. We’re a group of volunteers and opening a new scheme in our
    community. Your website offered us with valuable
    information to work on. You have done a formidable job and our entire
    community will be grateful to you.

  18. Hi! Would you mind if I share your blog with my zynga group?
    There’s a lot of people that I think would really enjoy your content.
    Please let me know. Many thanks

  19. Wow, fantastic blog format! How lengthy have you ever been blogging for? you made blogging look easy. The total look of your web site is wonderful, let alone the content material!

评论被关闭。