wordpress图片插件
如何让网站的图片快速加载？
你一定知道图片对于读者来说，增加了绝大部分的阅读体验，它们可以保持读者的阅读兴趣。
一篇全文字的文章与一篇图文结合的文章，我更喜欢看图文结合。在看文章的同时，图片能有效地起到放松大脑，让阅读者更加愿意读到结尾。这对网站建设者来说，也是有利于搜索引擎的SEO优化。因为搜索引擎的蜘蛛更加偏爱图文并茂。
但是有一个问题就，图片太多会大大拖慢网站的速度。文字确实非常容易展现，但是图片会通过下载才能展现到阅读者的眼中。
图像加载优化的重要性减少图片的大小，并且保持在阅读者可接受的范围。这便是图片优化，每一张图片都是用高清，或者超清，这绝对会给服务器带来很大的压力。我们要做的就是将图片压缩，压缩图片之后还要能让图片信息直观地传递给阅读者。
研究表明：网页的访客，最关心的是网页打开的速度。随着互联网快速发展，有40%甚至更多的人选择放弃网页加载超过3秒的网站。换句话来说，我可能不在意你文章的质量，但是网站必须快速展现到我的面前。
也有统计，如果你的网站每天能为你带来100,000元的收入，没延迟一秒会导致你每年少收入250万元。
所以优化图片的大小，对于网站主来说可以节约服务器的硬盘和带宽，对于者访问者来说会加快访问速度，增加用户体验，对两者都有益。
优化图像减少页面加载的6种方法1.使用图片压缩工具压缩工具可以删除某些部分来减小图片的大小，这种压缩可以为“无损压缩”或者“有损压缩”。
建议对照片等高质量的视觉效果进行无损压缩，更简单的图像，您可能希望选择有损压缩。这样可以更好地提升服务器的性能。
这里我推荐使用tinypng，这个网站的压缩我在之前关于微博的文章中有使用到（微信聊天记录那张长图），他将我10M的图片压缩至3M，并且还能保持很好的一个呈现。
另外如果你使用的是WordPress，tinypng还提供了对应的插件，可以快速的将图片上传到你的Wordpress网站。
2.启用浏览器缓存因为网站无缓存，会导致用户每次访问都会下载一次图片。使用浏览器缓存，将图片下载至用户的电脑保存，当用户再次访问的时候，可以最快的速度打开网站。
WordPress用户也有相关的插件：（例如W3 Total Cache 或WP Super Cache）
3.禁止图片盗链有些文章被他人转载，复制并且保存过去，他们不会将图片下载到服务器，而是直接使用你的图片。这样当用户访问时，也是通过下载你服务器的图片而展现到对方网页上。
这里我们就要禁止图片盗链，盗链发现外部网站链接该图片而直接屏蔽。
WordPress使用者也有相关插件：All In One WP Security＆Firewall。激活插件后，您可以通过导航到WP Security>防火墙> Prevent Hotlinks来找到此功能 。
当然如果你使用的是阿里云OSS或者CDN，七牛云等第三方储存，也可以在他们的后台设置防盗链，具体的可咨询第三方储存平台客服。
4.使用CDN内容分发服务举个例子：如果你的网站在国外，下载图片巨慢。你可以将图片使用CDN分发到国内的服务器，当用户打开网页，就可以从距离自己最近的服务器下载获得图片。当然现在CDN服务都有备案的要求。
CDN原理：如果你网站的服务器在北京，北京用户加载网页下载图片飞快，而西藏的用户却需要很长的时间下载。CDN将图片分发到距离西藏最近的地方。这样西藏用户也能最快的下载到图片。
5.文件的格式可以使用合适的图片文件格式来控制来提高图片的加载。
如：JPEG XR和WebP。
JPEG或JPG图像可以同时使用有损和无损优化（通常使其成为具有多种颜色的图像的最佳文件格式），PNG文件可产生更高质量的图像，但尺寸更大（文件大小不会失控。但是常会避免使用PNG获得复杂的视觉效果）。
6.使用延迟加载延时加载也称为惰性加载。
一般的网站打开页面，会向服务器请求下载，而请求是请求整个页面的下载地址。
而延时加载，只请求当前屏幕所能展示页面范围的的图片，当用户通过下滑到某个点，才会开始执行下载图片。
延时加载可以大大地减小对服务器带来的压力。
WordPress 也有延时加载的相关插件：Ajax Load More、A3 Lazy Load、Lazy Loader、Lazy Load by WP Rocket、Lazy Load for Videos、Speed Up – Lazy Load等插件….
总结这里给出了6种图片加载方案，另外本次主要使用了Wordpress做列举。其他相关程序，如dedecms，帝国，Discuz，ecshop等在网上也有相关的教程。希望这6种方法能对站长有用。
本文由星空星空站长网 – 站长技术交流分享平台（）原创，作者五车二。转载请注明出处。
WP主题开发03：如何制作wordpress主题的效果图？
在我们开发wordpress主题模板时，我们首先要有一个参照物，这个参照物可以是一个word描述文档，可以是一个网站，也可以是一个制作好的效果图。一般情况下，客户会通过word文档的形式来描述他对wordpress主题的功能需求，但这并不能够给人以形象化，也就是说，开发者并不能具体了解到——这处wordpress主题到底长得是个什么样子。这时，我们就要有一个主题效果图或参照网站来作为我们开发的参照物，这样，我们才可以有的放矢，而不会毫无头绪。
那么，我们该怎样来制作wordpress主题模板的效果图呢？这就要看具体情况了，如：团队联合开发、个人开发等等情况。主要分为以下三种方式来制作效果图。
方法一：通过专业的设计软件来设计wordpress主题的效果图。如果你是IT团队来开发wordpress主题，团队中一般都会有一个专业的美工人员，这时，就可以通过美工人员来通过专业的设计软件来设计wordpress主题的效果图。
或者，你是一个个人开发者，而同时，你也精通photoshop这类效果图设计软件，那么，也可以自己通过软件来设计wordpress主题的效果图。
photoshop设计效果图
再或者，你不擅长这类设计软件，你也可以在淘宝或其它类似网站，花钱请别人来设计这个wordpress主题模板的效果图，其它所花的费用也不是很高，网上，几十元到几百元的都有。总之，最终的目的，是要获取一个漂亮的wordpress主题效果。
方法二：通过网站截图来制作wordpress主题的效果图。这种方法，主要针对的是这样一类客户：1、很中意一个网站的整体布局，觉得正是自己所要的；2、要求不高的客户。对于这类客户，我们就没必要再去请美工人员去专门设计wordpress效果图了，我们只需要有针对性地截取他们所提供的网站的截图就可以了。
怎么截取网站的网页？大家都知道，一般情况下，一个网页往往都很长的，需要拉动滚动条，才能看完整个网页。这时，如果只用普通的截图软件（如：QQ截图）是截取不了整个网页的。那我们使用什么来截取整个网页呢？
长网页截取效果图
嗯，曾经为了拷贝别人的网站，我就使用搜狗浏览器的一个网页截图功能，来截取整个网站的所有需要的页面：首页、分类页、文章页、单页面、搜索页等等。至于其它浏览器，我不知道有没有这个功能，但我一直在使用搜狗浏览器的这个功能，这也是使用它的一个意外发现。我们只需要点击搜狗浏览器 “文件”菜单下的“另存为图片”，就可以把当前浏览的网页保存为一张图片（如上图）。
方法三：通过手绘来制作wordpress主题的效果图。如果不会photoshop这类设计软件，也没有看中的网站作为参照，这时，如果你有手绘的功底，也可以自己来手绘wordpress主题的效果图。如果你有画画的功底，你可以通过手中的笔来手绘效果；如果你没有画画的天赋，你也可以通过 笔和尺子在白纸上画出一个网站的基本轮廓，也就是我们经常说的草图。作为经验丰富的wordpress主题的开发者，完全可以根据一个草图来开发主题的。当然，如果想进行下一步中的切图，也可以通过扫描仪把草图扫描到我们的电脑中。
手绘草图 效果图
通过上面的三种方法，我们可以制作出不同情况不同需求下的wordpress主题效果图。当然，如果你够专业，或者你们是一个团队开发，那么肯定是选择第一种方法来制作wordpress主题模板的效果图了。而针对个人开发者来说，就不是那么回事了，并不是每一个开发者都是美工高手，有的开发者，可能从来都没有碰过设计软件。选择哪种方式来制作效果图，你可以根据具体的情况来做决定。
您的网站图片也不显示？禁用响应式图片加载属性srcset和sizes吧
可能因为第一次有自己的网站所以更新网站兴趣比较高，没想到今天刚打开网站突然发现所有网站文章里的图片全部不能显示了，如图1
图一
但文章的预览图都还可以显示，而且进wordpress网站文章编辑后台也可以看到图片如图二
图二
甚至看到文章编辑源代码模式里图片路径地址也是对的，用的是又拍云存储的如图三所示
图三
但进网站前台页面的文章详情页面“勿忘初心，我第一个网站的第一篇文章”点击显示不了的图片属性右键路径却是wordpress本地地址路径的/wp-content/uploads/如图4所示，
但我明明本地电脑并没有图片存储，而是已经存在了又拍云存储服务器里，我的wordpress网站用的是又拍云的官网Hacklog Remote Attachment Upyun插件,上次文章封面图片无法显示找了很久才发现是又拍云存储我开启了Token防盗链的原因，后来关了就可以显示了，这次我又以为是这个原因，结果发现不是，要不然前几天为什么文章内部的图片可以显示为什么现在不显示了。一直觉得又拍云Hacklog Remote Attachment Upyun插件有很大的问题，不过一直没有能力升级，插件作者好像也不更新了。
为找不到wordpress前台文章显示不了图片而焦虑之际查看文章“勿忘初心，我第一个网站的第一篇文章”前端代码才发现图片路径后面莫名其妙了多了几种尺寸的属性如图5所示
图5
我是第一次见到这种情况，原来右键图片属性的路径在这里可以看到，一直搞不懂为什么会出现这种图片地址，后来才知道这2个是WordPress响应式图片属性srcset和sizes。为什么会出现这种情况，我想起来我在设置又拍云存储的开启了“WebP自适应”这种最新的图片格式，是这个原因导致的吗，生成自适应图片，还是因为我用的是最新版的wordpress导致的，到现在我还不知道。请网友帮我解答原因，谢谢。
找到了莫名其妙出现的WordPress响应式图片属性srcset和sizes怀疑就是他导致的网站前台显示不了图片的原因，那我如果去掉这个自动生成的WordPress响应式图片属性srcset和sizes是不是就可以显示网站图片了？修改wordpress我一直使用万能的主题Functions.php文件，当然主题Functions.php文件操作不当也很危险，我以后一定要写一篇wordpress主题Functions.php文件大全，它的功能太强大了，我在主题Functions.php文件中去掉响应式图片属性srcset和sizes的代码如下：
//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）
function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );
或者用代码：
//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）
add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );
保存，备份原来的functiaons.php文件有时候备份也没用已经永久修改了网站，所有要特别小心操作这个文件，刷新缓存后果然图片可以在网站显示了。
我不知道这算不算从根本上解决WordPress响应式图片属性srcset和sizes导致网站显示不了图片的问题，毕竟不管是又拍云存储“WebP自适应”还是响应式图片都是最新流行的图片应用，如今为了解决图片不了的问题而去掉这个属性功能是不是因人费事，还是有根本的解决之道？我这个半桶水希望专业的网友能帮我永久解决这个问题。希望高手跟我联系帮我解决这个问题。