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
當優化影像圖檔給網站用時，有三個項目可以做的是：
- 將解析度(Resolution) 降低到72ppi
- 將圖檔裁到實際所需的尺寸(可參考下面的網站寬度建議)
- 用JPG或PNG來存檔．通常JPG的file 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!