备忘!牢记!

上传前准备工作

1、确定好一种图片命名方式并一直沿用下去!

图片上传之前的命名方式有很多种,型号,日期,产品名等。

对于营销型网站,我倾向于用产品型号命名上传的产品图片,这样上传后的图片URL是有规律可言的。比如:/2019/05/141.jpg、/2019/05/142.jpg,等。而对于博客上里的图片,我习惯用日期命名。

总之,一定要考虑好命名方式,不要第一天用型号命名,第三天又用产品名称命名。

2、 制作适合且统一尺寸的图片格式!

比如我的产品图统一用350*350px,博客上的图片宽度一般是400-600px,这样能最大限度利用原图的尺寸。

3、一定提前压缩好!

每次把制作好的图片统一放到一个文件夹,统一到tinypng压缩之后再上传。

上传时注意事项

注意不要先统一上传图片再引用,应该要引用的时候在编辑页面再上传!!这样不会出现媒体文件未附加的情况!

上传后一定记得把图片的这四部分信息填写好!

写文章的时候也一定把这里填好! 否则可能就没有alt属性!

发生过这种情况!把alt文本写好后就可以了!

另外!如果两张尺寸适合的图片并列放一排,不用新建两个并排的栏目块,可以直接上传后把第一张图片设置为左对齐!这样前后两张图片便左右排列了!

图文布局也能这么操作!这样能减少代码!提高文本比!真实案例!相差快1%了!

上传后优化方式

插件:reSmush.it Image Optimizer

可对已经上传的旧照片进行无损压缩!记得在设置那里勾选上“不保存原图片”,

否则插件在执行压缩后会自动保存未压缩的原图片,会导致无用图片过多!

插件:Compress JPEG & PNG images

设置简单,每个月有500张免费压缩图片,对于图片量不大的站够用了,相当于免费使用。

添加图片效果

以现有的图片阴影效果为例,纯css实现,代码如下:

{	
  padding:10px;
  border:1px solid gray;
  box-shadow:2px 2px 3px gray;
}

删除未引用的媒体图片

插件:DNUI

注意最好勾选忽略原尺寸图片!

有个大的弊端:不知道具体是什么原因,清理后会出现很多图片加载不出来,所以慎用!!