随着网络应用普及，企业网站越来越多参与到企业营销工作中。如何使网站承担起这一重要责任，其中有许多细节需要深入研究。今天新龙与大家讨论网站中的图片优化策略。
一图胜千言，好的图片使用能为文章增色：不仅添加阅读乐趣和可用性，还能升华文本内容，令人印象深刻。
对于网页来说，图片文件大小占整个网页文件大小的比例重大。比如，一篇含有3000个纯文字的网页一般在20K左右大小，而一张300X300像素的JPG格式的图片优化之后的文件大小可能在20至30K左右。如果你采用一张1800X600像素的图片其文件体积可能在200K左右。
如果在网页上尽可能较少的使用图像元素则可以大幅度降低网页文件体积，加快下载，提高网页访问速度。那么我们如何平衡图像的使用呢？
善用CSS 效果
CSS 称为层叠样式表，采用CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS可以帮助我们完善图片，例如给图片加边框，加阴影……同时极大减少用图片实现同样效果的文件体积。
下面一张图片：
CSS可以为图片做修饰，例如：
- 加边框，如下图：
[fusion_imageframe image_id=”15020″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”3″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 修饰图片为圆角，如下图：
[fusion_imageframe image_id=”15020″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”15px” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 变为圆形图显示（如果是张正方形图将显示为正圆），如下图：
[fusion_imageframe image_id=”15020″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”round” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 图片下部两边翘起效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”bottomshadow” stylecolor=”” hover_type=”none” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 图片边缘发光效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”glow” stylecolor=”#f98b36″ hover_type=”none” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 阴影效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”dropshadow” stylecolor=”” hover_type=”none” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
实现以上效果所增加的字节数极少，远小于用图片制作产生的文件字节数。
CSS不仅修饰图片外边，还可制造图片动效。比如：
- 鼠标移动到图片上的放大效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”none” stylecolor=”” hover_type=”zoomin” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 鼠标移动到图片上的缩小效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”none” stylecolor=”” hover_type=”zoomout” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]
- 鼠标移动到图片上的抬起效果，如下图：
[fusion_imageframe image_id=”15028″ style_type=”none” stylecolor=”” hover_type=”liftup” bordersize=”1″ bordercolor=”#d6d6d6″ borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]https://newloong.com/app/uploads/2018/08/newloong-tupianyouhua-yangli.jpg[/fusion_imageframe]