https://kb.pathosting.co.th/index.php?action=history&feed=atom&title=Optimizing_Images_for_the_Web 2026-04-06T20:05:27Z Revision history for this page on the wiki MediaWiki 1.39.7 https://kb.pathosting.co.th/index.php?title=Optimizing_Images_for_the_Web&diff=440&oldid=prev 2011-07-06T23:54:35Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 06:54, 7 July 2011</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6">Line 6:</td> <td colspan="2" class="diff-lineno">Line 6:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== 2. เลือกประเภทของไฟล์รูปให้เหมาะสม (.jpg/.gif/.png) ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== 2. เลือกประเภทของไฟล์รูปให้เหมาะสม (.jpg/.gif/.png) ==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* '''.jpg (image/jpeg)''' เหมาะสำหรับรูปภาพทั่วๆ ไป ที่มีสีสัน และรายละเอียดมากๆ เช่น ภาพถ่าย, ภายวาด เป็นต้น</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* '''.jpg (image/jpeg)''' เหมาะสำหรับรูปภาพทั่วๆ ไป ที่มีสีสัน และรายละเอียดมากๆ เช่น ภาพถ่าย, ภายวาด เป็นต้น</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* '''.gif (image/gif)''' เหมาะสำหรับภาพขนาดเล็ก จำนวนสีและรายละเอียดไม่มาก เช่น Icon หรือ Banner เล็กๆ ส่วนใหญ่จะใช้ทำ animation รูปตัวการ์ตูนเล็กๆ ขยับไปมา, ที่ไม่ควรระวังอย่างยิ่งคืออย่าใช้พวกรูปภาพถ่ายหรือภาพที่มีรายละเอียดมากๆ มาใช้เป็น .gif <del style="font-weight: bold; text-decoration: none;">เด็ดขนาด </del>ไม่ว่าจะเป็นภาพนิ่งๆ หรือภาพขยับได้ก็ตาม เพราะไฟล์ GIF เก็บข้อมูลภาพเป็นเวกเตอร์ ซึ่งจะทำให้รูปแบบภาพถ่ายมีขนาดใหญ่มากๆ</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* '''.gif (image/gif)''' เหมาะสำหรับภาพขนาดเล็ก จำนวนสีและรายละเอียดไม่มาก เช่น Icon หรือ Banner เล็กๆ ส่วนใหญ่จะใช้ทำ animation รูปตัวการ์ตูนเล็กๆ ขยับไปมา, ที่ไม่ควรระวังอย่างยิ่งคืออย่าใช้พวกรูปภาพถ่ายหรือภาพที่มีรายละเอียดมากๆ มาใช้เป็น .gif <ins style="font-weight: bold; text-decoration: none;">เด็ดขาด </ins>ไม่ว่าจะเป็นภาพนิ่งๆ หรือภาพขยับได้ก็ตาม เพราะไฟล์ GIF เก็บข้อมูลภาพเป็นเวกเตอร์ ซึ่งจะทำให้รูปแบบภาพถ่ายมีขนาดใหญ่มากๆ</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* '''.png (image/png)''' เป็นไฟล์ภาพเวกเตอร์เหมือน GIF เช่นกัน ต่างกันตรงที่ PNG มีคุณสมบัติโปร่งใสได้ (RGBA Colors) และไม่สามารถทำ Animation ได้. เหมาะสำหรับทำ Icon ทำปุ่ม เป็นต้น</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* '''.png (image/png)''' เป็นไฟล์ภาพเวกเตอร์เหมือน GIF เช่นกัน ต่างกันตรงที่ PNG มีคุณสมบัติโปร่งใสได้ (RGBA Colors) และไม่สามารถทำ Animation ได้. เหมาะสำหรับทำ Icon ทำปุ่ม เป็นต้น</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr> </table>

Admin https://kb.pathosting.co.th/index.php?title=Optimizing_Images_for_the_Web&diff=409&oldid=prev 2011-04-30T18:10:52Z

<p>Created page with &quot;<a href="/Category:Tips" title="Category:Tips">Category:Tips</a> มีหลายเว็บไซต์ที่นำรูปภาพที่ยังไม่ได้ผ่านการบีบขนาดไฟ...&quot;</p> <p><b>New page</b></p><div>[[Category:Tips]]<br /> มีหลายเว็บไซต์ที่นำรูปภาพที่ยังไม่ได้ผ่านการบีบขนาดไฟล์มาใช้บนเว็บไซต์ ทำให้มีปัญหาปริมาณการรับส่งข้อมูลสูงเกินที่ควรจะเป็น. บทความนี้จะแนะนำเกี่ยวกับวิธี เลือก/ปรับ ไฟล์รูปให้เหมาะสมกับการใช้งานการแสดงผลบนหน้าเว็บ นอกจากจะเป็นการประหยัดปริมาณการรับส่งข้อมูลที่ต้องใช้แล้ว ที่สำคัญกว่านั้น คือ มันจะทำให้เว็บของคุณโหลดเร็ว ผู้ที่เข้ามาชมเว็บก็จะรู้สึกดีอีกด้วย ^^. สำหรับวิธีการไม่ก็ไม่ยากเลย มี 3 ข้อง่ายๆ ดังนี้<br /> == 1. ย่อขนาดรูป (กว้างxสูง) ให้ตรงกับการใช้งาน ==<br /> ถึงแม้แท็ก img ของภาษา HTML มี attribute ที่ใช้สำหรับกำหนดความกว้างและความสูง ของรูปภาพได้ก็จริง. แต่จริงๆ แล้วเราไม่ควรจะใช้มัน, เพราะว่าถ้าหากรูปต้นฉบับมีขนาดใหญ่มาก แต่คุณต้องการให้มันแสดงในหน้าเว็บเพียง 120x120 ไม่ควรทำอย่างยิ่งที่จะนำรูปต้นฉบับขนาดใหญ่มาใช้ แล้วใส่ width=&quot;120 height=&quot;120&quot;. สิ่งที่ควรจะทำก็คือ ให้นำรูปภาพต้นฉบับไปย่อในโปรแกรมแก้ไขรูปภาพ เช่น Adobe Photoshop หรือโปรแกรมอื่นๆ ที่คุณมี ย่อขนาดรูปให้เหลือเท่าที่จะใช้งานก็พอ<br /> <br /> == 2. เลือกประเภทของไฟล์รูปให้เหมาะสม (.jpg/.gif/.png) ==<br /> * '''.jpg (image/jpeg)''' เหมาะสำหรับรูปภาพทั่วๆ ไป ที่มีสีสัน และรายละเอียดมากๆ เช่น ภาพถ่าย, ภายวาด เป็นต้น<br /> * '''.gif (image/gif)''' เหมาะสำหรับภาพขนาดเล็ก จำนวนสีและรายละเอียดไม่มาก เช่น Icon หรือ Banner เล็กๆ ส่วนใหญ่จะใช้ทำ animation รูปตัวการ์ตูนเล็กๆ ขยับไปมา, ที่ไม่ควรระวังอย่างยิ่งคืออย่าใช้พวกรูปภาพถ่ายหรือภาพที่มีรายละเอียดมากๆ มาใช้เป็น .gif เด็ดขนาด ไม่ว่าจะเป็นภาพนิ่งๆ หรือภาพขยับได้ก็ตาม เพราะไฟล์ GIF เก็บข้อมูลภาพเป็นเวกเตอร์ ซึ่งจะทำให้รูปแบบภาพถ่ายมีขนาดใหญ่มากๆ<br /> * '''.png (image/png)''' เป็นไฟล์ภาพเวกเตอร์เหมือน GIF เช่นกัน ต่างกันตรงที่ PNG มีคุณสมบัติโปร่งใสได้ (RGBA Colors) และไม่สามารถทำ Animation ได้. เหมาะสำหรับทำ Icon ทำปุ่ม เป็นต้น<br /> <br /> == 3. Save for web (Photoshop) ==<br /> ไม่รู้ว่าโปรแกรมอื่นๆ มีฟังก์ชั่นนี้ให้ใช้หรือไม่ หรือเรียกใช้อย่างไร เพราะผู้เขียนเคยใช้แต่ '''Save for Web &amp; Devices...''' ของ Adobe Photoshop เท่านั้น. ประโยชน์ของการใช้ Save for web คือเราจะได้รูปที่มีขนาดไฟล์เล็กลงมาจากการเซฟปรกติมาก โดยที่เสียความคมชัดของภาพนิดเดียวเท่านั้น. ซึ่งมีขั้นตอนง่ายๆ ดังนี้ (ขออธิบายเฉพาะขั้นตอนของโปรแกรม Photoshop)<br /> # เปิดไฟล์ภาพที่ต้องการแก้ไข<br /> # ย่อขนาดรูป หรือ Crop ให้ตรงกับที่ต้องการใช้งาน ถ้าขนาดตรงอยู่แล้วก็ไม่ต้องทำอะไร<br /> # คลิกเมนู '''File''' ในเมนูบาร์<br /> # เลือก '''Save for Web &amp; Devices...'''<br /> # เลือกชนิดของไฟล์ภาพ (พิจารณาตามหลักใน[[#2. เลือกประเภทของไฟล์รูปให้เหมาะสม (.jpg/.gif/.png)|ข้อ 2.]] ด้านบน) ถ้าเป็นพวกไฟล์รูปภาพให้เลือก JPEG ส่วนคุณภาพแล้วแต่ที่คุณต้องการเลย มันจะมีตัวอย่างภาพผลลัพท์ให้ดูที่ด้านซ้ายมือด้วย ปรกติผู้เขียนจะใช้ JPEG,MEDIUM&lt;br/&gt;&lt;br/&gt;{{fullurl:Img/0001/2011-05-01_0058.png}}&lt;br/&gt;&lt;br/&gt;<br /> # พอเลือกเรียบร้อยแล้ว ก็คลิกปุ่ม '''Save''' ได้เลย. เพียงเท่านี้ก็จะได้ไฟล์ภาพ ที่ขนาดไฟล์เล็ก เหมาะสำหรับใช้แสดงในหน้าเว็บแล้ว</div>

Admin