一般响应式网站建设中所使用的图片,我们都会先建议「压缩」后,再放置于网页中。然而所谓的图片压缩并非指将图片使用压缩软体(例如RAR、ZIP…)加以封装,而是要帮图片「瘦身」,也就是说压缩(瘦身)后的图片格式仍然不变,依旧是JPG或GIF的格式。一般而言未经瘦身前的图片档案都很大,即使将该图片比例缩小,档案虽然有变小,但若是要放罝于网页上,还是稍嫌过大,若您网页上有许多未经瘦身的图片将会造成网友浏览该页面时速度变慢,进而影响网站效能及搜寻引擎收录该网页的意愿,因此无论您是要自行制作网页或是要将图片透过后端管理系统,上传至网站并于网站前台显示时,务必先确认该图片是否压缩(瘦身)过再行上传。
图片压缩的原理其实是把图片中一些相近的色阶,用同样的颜色来取代,如此可以大幅减少档案大小,然而若色阶数过少将造成该图片品质不佳(例如变模糊、出现锯齿状…等),因此在压缩图片时,最好能做到将图片档案变小,但肉眼看到的压缩后图片与压缩前的一样或是可接受的范围,一般我们建议压缩的图片品质介于70~90%,通常压缩后的图片大小约只有原来的十分之一左右。
目前市面上的美工软体,几乎都有图片压缩的功能,例如PhotoShop、PhotoImpact…等,我们就这两套美工软体压缩图片的流程及方式列举如下:
PhotoShop
1.先以PhotoShop开启要瘦身的图片
2.点选「档案/储存为网页用」(或直接按键盘Alt+Shift+Ctrl+S)
3.此时将出现一个「储存为网页用」的视窗,您可直接调整压缩品质(建议70~90),并于预览视窗预浏压缩后的图片,最后选择您要另存图档的格式(一般照片可存成JPEG)。
4.按储存钮后,选择另存的图片位置即完成。
PhotoImpact
1.先以PhotoImpact开启要瘦身的图片
2.直接按键盘F4键
3.此时将出现一个「影像最佳化程式」的视窗,您可先选择您要另存图档的格式(一般照片可存成JPEG),接下来调整压缩品质(建议70~90)或图片色彩,并于预览视窗预浏压缩后的图片。
4.按另储新档钮后,选择另存的图片位置即完成。
网站中上传的图片多大合适?原则上是越小越好,当然还是不失真的前提下才能不影响美观!响应式网站建设这些都是需要注意的问题!