Post view

insoler相簿的照片全部支援Apple高解析度的Retina Display「視網膜螢幕」技術

我在去年的04/19/2016寫了一篇文章,發表insoler網站正式支援Apple高解析度的Retina Display「視網膜螢幕」:

insoler正式支援Apple高解析度的Retina Display「視網膜螢幕」

雖然insoler支援Apple高解析度的Retina Display「視網膜螢幕」,但其實只有「網站首頁」、「照片首頁」瀏覽的縮圖,才支援Retina Display「視網膜螢幕」技術。如果點選其中一張照片,會看到比較大的800x533點大小的照片,但是這裡並沒有支援Retina Display「視網膜螢幕」技術。這是因為insoler目前使用的海豚系統Dolphin-v.7.3.3,只有「瀏覽圖片」才支援Retina Display「視網膜螢幕」技術。

在支援Retina Display「視網膜螢幕」的MacBook Pro或是iPhone上,當會員使用兩點放大的手勢,想要看更大的圖片的時候,會因為照片的大小只有800x533畫素的關係,只能看到更模糊的照片,無法看到照片上更清晰的細節!

網站上的照片想要支援Apple高解析度的Retina Display「視網膜螢幕」的話,事實上網站必須同時提供兩種解析度的照片,一種是標準的800x533點大小的圖片,另外一種是Retina Display「視網膜螢幕」專用的1600x1067點大小的照片。

不過,如果你的螢幕並不是Retina Display「視網膜螢幕」,而是標準的2K螢幕,也就是1920x1080的Full HD螢幕,甚至是解析度更低的普通螢幕的話,就只能看到「800x533點大小」的照片,無法看到「1600x1067點大小」的照片。這是因為螢幕畫素的解析度比較低的關係,如果在低解析度螢幕上顯示「1600x1067點大小」的照片,反而需要「縮圖」才能在螢幕上看到相同的「顯示面積」大小相同的照片。

雖然「1600x1067點大小」好像是「800x533點大小」的2倍大,其實是4倍大的照片!因為以「照片面積大小」來看,水平大小從800點提高到1600點,垂直也從533點提高到1067點。水平與垂直同時增加2倍,所以其實是需要提供4倍大的照片!

到底普通的「800x533點大小的照片」與「1600x1067點大小的照片」有什麼差異?讓我們來看一些實例。例如這張照片:

其實實際上看到的是「800x533點大小」的照片,就像這樣:

如果你是使用Retina Display「視網膜螢幕」的話,在瀏覽器上會看到這樣的照片,或許與前面的瀏覽器畫面相比,並沒有太大的差異。

事實上,你看到的是「1600x1067點大小的照片」的照片,照片有這麼大!大4倍的照片,就可以呈現更多的照片細節:

不過,也不是任何照片從「800x533點大小的照片」放大4倍到「1600x1067點大小的照片」就能看出明顯的差異!例如這樣的「午後咖啡」的照片:

在Full HD與普通螢幕上,雖然只能看到「800x533點大小」的照片:

但是就算把這樣的照片放大4倍到「1600x1067點大小」,看起來並不會有太大的差異。

這張照片雖然是「1600x1067點大小」,但因為午後咖啡・鬆餅的照片,並沒有眼睛、毛髮、文字等,只是普通的咖啡・鬆餅,所以就算是放大4倍的「1600x1067點大小」照片,看起來與「800x533點大小」的照片,畫質上並沒有太大的差異。

想要看到比較明顯的差異,最好是照片上有「細微」的部分。例如這張硬碟的照片:

標準的「800x533點大小」的照片就像這樣:

這是「1600x1067點大小」的照片,在瀏覽器上或許看不出太大的差異。

但其實在Retina Display「視網膜螢幕」可以看到「1600x1067點大小」的照片,細節比「800x533點照片」更清楚許多,特別是IC晶片上的「印刷文字」。

因為「印刷文字」比較容易區別標準的「800x533點大小」與Retina Display「視網膜螢幕」專用的「1600x1067點大小」差異,所以我另外找了這張Mac mini記憶體的照片,這是「800x533點大小」:

實際的「800x533點照片」就像這樣:

在高解析度Retina Display「視網膜螢幕」專用螢幕上,就可以在瀏覽器上看到「1600x1067點大小」的照片,你不需要「選擇照片的大小,或是解析度高低」,瀏覽器會自動判別你使用的螢幕是不是Retina Display「視網膜螢幕」。

原始的「1600x1067點大小」的照片就像這樣,你可以看到更清楚的文字。除了「印刷標籤」上的文字以外,「IC晶片上的印刷文字」也比較容易看的清楚,特別是上面的DRAM記憶體晶片上的印刷文字。

對美食寫真來說,低解析度的「800x533點照片」:

實際上的較低解析度的「800x533點照片」大小就像你看到的這樣:

在Retina Display「視網膜螢幕」專用螢幕上,雖然可以在瀏覽器上看到「1600x1067點大小」的照片:

但是在高解析度Retina Display「視網膜螢幕」螢幕上,看到的「1600x1067點大小」的照片,細節差異並不會比較低解析度的「800x533點照片」有很大的差異。

對insoler網站的Web Server網站伺服器主機而言,除了低解析度的「800x533點照片」以外,還必須同時提供「1600x1067點大小照片」的檔案才行!以目前網站上有大約14萬張照片,提供14萬張「1600x1067點大小照片」大約需要20GB左右的儲存容量。

也許很多人會認為,在硬碟容量已經超過10TB,也就是10000GB的年代,就算佔用20GB左右的儲存容量,也沒什麼關係吧?

但其實為了提升照片的瀏覽速度,網頁的顯示速度,我把照片縮圖都放在高速的SSD硬碟上。SSD固態硬碟的容量就會比傳統的HDD硬碟少很多。普通的SSD固態硬碟只有256GB、512GB。如果是1TB硬碟,就要NT$2萬左右(雖然也有比較廉價的SSD)。對一個沒有營業收入,單純的「免費網站」來說,其實對我而言,只會不斷的增加負債,並不會增加收入!所以就算是佔用20GB左右的儲存容量,對我來說,其實還是相當在意。

另外,我使用PHP的微秒功能,計算使用ImageMagick將大約1200萬畫素的JPEG原始照片,縮小到「1600x1067點縮圖」,大約需要1秒〜1.5秒左右的時間,如果是2400萬畫素的話,就會需要將近2秒左右的縮圖時間,另外還要再加上同樣是從JPEG原始圖片製作「800x533點縮圖」以及更小的瀏覽專用縮圖,大約需要2秒左右的縮圖時間。換句話說,光是JPEG縮圖的話,大約就需要3〜4秒左右的時間。

然而,如果上傳的照片只有「RAW檔案」的話,網站系統還必須先從RAW轉成JPEG。這個轉檔的動作就會需要2-3秒左右的時間。之後,才能用轉換好的JPEG原始圖片,再透過ImageMagick製作其他的更小的JPEG縮圖,所以在「RAW檔案」上傳完成之後,後續的RAW轉換JPEG、縮圖的處理時間,一張照片就大約需要4-6秒左右的時間。2400萬畫素的照片會需要比1200萬畫素的照片花更多時間才能處理完成。

為了可以證實我說的事情,我在「非同步處理上傳照片」的PHP程式碼裡面追加「$time_start = microtime(true);」的指令,用來記錄從「非同步處理上傳照片」的開始與結束的時間。

底下是直接上傳JPEG照片時,「非同步處理上傳照片」大約需要5-6秒左右的後續處理時間,包括產生各種大小的縮圖,以及製作EXIF資訊、產生色階分布圖等。從記錄的時間你可以上傳JPEG的速度很快,在100Mbps的網路上,一秒內可以上傳大約4張左右的JPEG照片。

2017-09-08 01:02:07、產生各種大小縮圖所需時間:6.5688309669495
2017-09-08 01:02:07、產生各種大小縮圖所需時間:6.5881719589233
2017-09-08 01:02:07、產生各種大小縮圖所需時間:6.649307012558
2017-09-08 01:02:07、產生各種大小縮圖所需時間:6.7784671783447
2017-09-08 01:02:08、產生各種大小縮圖所需時間:6.8925712108612
2017-09-08 01:02:08、產生各種大小縮圖所需時間:6.7210879325867
2017-09-08 01:02:08、產生各種大小縮圖所需時間:6.5631039142609
2017-09-08 01:02:08、產生各種大小縮圖所需時間:6.2404320240021
2017-09-08 01:02:09、產生各種大小縮圖所需時間:5.3947570323944
2017-09-08 01:02:09、產生各種大小縮圖所需時間:5.3955249786377

底下是直接上傳RWA照片檔案時,「非同步處理上傳照片PHP程式碼」大約也是需要5-6秒的時間。這是因為上傳的RAW照片只有1200萬畫素左右,從RAW轉JPEG的速度很快。如果上傳的照片是2400萬畫素以上的RAW檔案,應該就會需要6-8秒左右的後續轉檔處理時間。

雖然是使用100Mbps網路,但是因為RAW檔案比JPEG大很多,所以上傳一張RAW照片,需要1-2秒左右的時間。

2017-09-08 15:38:53、產生各種大小縮圖所需時間:6.4803528785706
2017-09-08 15:38:55、產生各種大小縮圖所需時間:6.8321800231934
2017-09-08 15:38:55、產生各種大小縮圖所需時間:5.4359278678894
2017-09-08 15:38:57、產生各種大小縮圖所需時間:5.7121610641479
2017-09-08 15:38:58、產生各種大小縮圖所需時間:5.5172810554504
2017-09-08 15:38:59、產生各種大小縮圖所需時間:5.634871006012
2017-09-08 15:39:00、產生各種大小縮圖所需時間:5.3848400115967

為了追求更好的照片品質,提供更優質的服務,我還是想辦法設計出海豚原廠並沒有支援的功能,希望你會喜歡這樣的設計。

蘇言霖 2017/09/05 0 731
Comments
Order by: 
Per page:
 
  • There are no comments yet
Rate
0 votes
Post info
蘇言霖
「超級懶貓級」社群網站站長
2017/09/05 (2397 days ago)
Actions