CH5 格式化圖片



一、最佳化圖片


網頁適用的圖片就那大三元:gif, jpeg, png。當然其各有優缺點,網路參考資料很多。
名詞解釋:
抖動(Dithering)」:gif利用影像連續區段的色調模擬出調色盤以外的顏色。原本就很適合用gif儲存的圖形(如商標和平色調的作品)並不需要用這個選項,但是如果必須把照片存在gif格式,這個選項就有很大的作用。
交錯(interlace)」:建立一個當高解析度資料尚未完整下載前,會以低解析度先顯示的gif檔。
漸進(progressive)」:和交錯式gif很像,漸進式jpeg會在資料未完全下載之前先以低解析度顯示。

二、建立適合網頁使用的商標


●確定商標符合你的公司形象
●保持簡潔
●保持輕小
●使用網域字尾展現獨特性

參考資訊:「客製化商標GotLogos.com

三、分割與組合複雜的圖形


使用舊式的table來組合圖片對新的HTML4.01可能行不通,必須加上一些CSS的幫忙。
td img{ display: block;}
否則就放棄DOCTYPE宣告或改用過渡時期的宣告也是可行。

Netscape Navigator 4.x須注意這個問題
<td>
  <img src="xxx.jpg" width="xx" height="xx" alt="">
</td>
這麼寫是有問題的,因為原始碼中包含了空白字元(tab, 換行, 空白)
改這這樣就行了
<td><img src="xxx.jpg" width="xx" height="xx" alt=""></td>

四、挑選插圖和素材照片


●版權和使用限制
●風格要一致
●盡力做到獨特性
●選擇正確的檔案格式和解析度

參考資訊:「線上找素材照片目錄Fotosearch

五、關閉圖檔下載


●關閉滑鼠右鍵功能:Google一下「JavaScript disable right click」就有解答。
●關閉IE的影像工具列:加上下列兩行
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
●使用圖層在圖片上放置一個透明的區域:用<div>加上z-index來將真正的圖片壓在透明圖片後面,例如
<div id="L2" style="position: absolute; z-index: 10"><img src="透明圖片" width="xx" height="xx"></div>
<div id="L1" style="position: absolute; z-index:  5"><img src="真實圖片" width="xx" height="xx"></div>
透明圖片可用一個1x1像素的圖片即可,瀏覽器會自動放大他。
●限制檔案列表和連結:將要被保護的圖片放在獨立的目錄,該目錄的.htaccess加上描述
Options -Indexes  //關閉索引功能
限制只有你網站裡的網頁可以連結到這個目錄裡的檔案,修改.htaccess
Rewriteengine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://domain.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.domain.com/.*$ [NC]
RewriteRule .*\.(gif|GIF|jpg|JPG|png|PNG)$ - [F]
●商業解決方式:
DigiMarc公司」利用演算法來加密圖片,該圖片加密後肉眼看與一般無異,但可利用演算法再還原回來。就算圖片被改過也是一樣。
Artistscope保護線上內容版權的應用程式

六、即時建立具有浮水印的圖片


將原始圖片與浮水印於使用者瀏覽時合成新的圖片。使用到GD模組。
<?
$src_path="/images";
$src_file="$src_path."/".$src;
$wm_file="watermark.png";
$src_file=imagecreatefromjpeg($src_file);
$wm_file=imagecreatefrompng($wm_file);
$src_w=imagesx($src_file);
$src_h=imagesy($src_file);
$wm_w=imagesx($wm_file);
$wm_h=imagesy($wm_file);
$output_x=($src_w/2)-($wm_w/2);
$output_y=($src_h/2)-($wm_h/2);
imagecopy($src_file, $wm_file, $output_x, $output_y, 0, 0, $wm_w, $wm_h);
header("Content-type: image/jpg");
header("Content-disposition: filename=".$src);
imagejpeg($src_file);
imagedestroy($src_file);
imagedestroy($wm_file);
?>

參考資訊:「GD圖形函式庫
arrow
arrow
    全站熱搜

    jck11 發表在 痞客邦 留言(0) 人氣()