Sharpen my tool...

How To Save Web-Optimized Images In Photoshop For WordPress SEO

Thanks Bjorn’s well explained tutorial.  Here is the notes I saved for myself in the future and anyone who maybe benefits from it.

剛開始做網站時,對圖像的比例,解析度,網站速度等問題總是一知半解.這個Bjorn’s的教學影片,解釋的很清楚,我練習我的英翻中,將筆記整理在這裡,你也可以練習你的英文,聽聽他的教學影片喔!

How To Save Web-Optimized Images In Photoshop For WordPress SEO

當優化影像圖檔給網站用時,有三個項目可以做的是:

  1. 將解析度(Resolution) 降低到72ppi
  2. 將圖檔裁到實際所需的尺寸(可參考下面的網站寬度建議)
  3. JPGPNG來存檔.通常JPGfile size是比PNG來得小的

通常數位相機或手機的照片的解析度會在300ppi,這樣常常它的檔案大小(file size)會相當龐大(2mb+…)

然而在網路裡,大部分的瀏覽器只能呈現到72ppi.這個意思是指即使你傳到300ppi的影像,也只有72ppi的品質,所以為何不存72ppi就好呢?還可以減低檔案的大小.(不過我的經驗告訴我,用72ppi可能你的設計師會哎哎叫失真問題,有時後可能也有商議空間的!)

還有,一些好的相機照出來的照片有很大的長與寬的尺寸(px).然而這這些尺寸對網站實際所需都太大,參考下面網站實際所需的尺寸,將圖像裁到實際所需的大小就夠了.

網站實際尺寸的大小,可參考以下的Width(寬度)來抓圖檔的比例:

1    Column = 1080px
3/4 Column = 795px
2/3 Column = 700px
1/2 Column = 510px
1/3 Column = 320px
1/4 Column = 225px

做到以上這些優化影像的步驟,減低圖檔大小,增快網站速度,更有利SEO

** 原文翻譯來自以下的教學影片

Exact Steps in Photoshop

Step 1:
Open the image in  Photoshop
Photoshop > File > Open  
Choose the image

Step 2:
Go to Image > Image Size

Step 3:
This image’s original size:
Width: 4896px
Height: 2752px        
Resolution: 350ppi

Step 4:
Change the Resolution to 72 ppi.
Once changed to 72 ppi. 
The Width and Height will automatically be changed too.

Step 5: 
Leave the Resolution in 72 ppi.
Change the Width back to be your exact need for the website. In this case, I need this image to be the background for the section, so I used 1280 px for the Width.

Step 6:
Now, save the file.
File > Export > Save for Web (Legacy) 

Step 7:
Often PNG file is smaller than JPEG. So choose JPEG and choose Medium or High for quality. And then <SAVE>

Finally, it’s done.  
We managed to change the file size from 6.4 MB to 435 KB.  

Yeah! Yeah!