รูปแบบกราฟิกเว็บใดที่จะใช้

เว็บไซต์สามารถมีกราฟิกรูปแบบ JPEG, GIF, PNG, SVG ควรใช้อันไหนและเมื่อใด

ควรใช้ JPG เมื่อใด

• ภาพถ่ายภาพถ่าย
• เมื่อการบีบอัดไม่สำคัญ

ควรใช้ PNG เมื่อใด

• เมื่อคุณต้องการความโปร่งใส
• เมื่อคุณมีลวดลาย (พื้นหลัง)

ควรใช้ GIF เมื่อใด

• เมื่อคุณต้องการภาพเคลื่อนไหวที่เข้ากันได้ย้อนหลัง *
• เมื่อรูปภาพประกอบด้วยสีเพียงไม่กี่สี (2-16) **
• เมื่อคุณไม่ต้องการความโปร่งใสและมีการจัดรูปแบบ (แม้ว่าจะต้องการ png ก็ตาม)

_{* ด้วยการเพิ่มขึ้นของภาพเคลื่อนไหว CSS เป็นตัวเลือกที่ทำงานได้สำหรับเบราว์เซอร์เกือบทั้งหมดการใช้รูปแบบ. GIF จะน้อยลงและน้อยลงรูปแบบไปสู่การเคลื่อนไหวของเว็บ .jpg, .pngและ.gifทั้งหมดสามารถตั้งค่าให้มีคุณสมบัติ "ภาพเคลื่อนไหว" ด้วยการใช้ CSS แม้ว่า gifs แบบเคลื่อนไหวอาจถูกใช้อย่างมีเสน่ห์ในการออกแบบเว็บในบางกรณี แต่มีข้อยกเว้นน้อยมากดังนั้นจึงควรหลีกเลี่ยง}

_{** ( .gifรูปภาพ จำกัด เฉพาะ 256 สีภายในจานสีของพวกเขา)}

(ย้ายจากคำถามที่ซ้ำกัน)

ทั้งหมดนี้ขึ้นอยู่กับประเภทของภาพที่คุณต้องการจัดเก็บ

• PNGเป็นรูปแบบการบีบอัดแบบไม่มีการสูญเสียที่เหมาะสมที่สุดสำหรับกราฟิกบิตแมป "แบบเวกเตอร์" (เช่นกราฟิกที่มีพื้นที่ขนาดใหญ่พื้นที่ปกติที่มีสีเดียวกันและขอบที่กำหนดอย่างชัดเจน; กราฟิกที่มีข้อความที่ชัดเจน)

• SVGเป็นรูปแบบเวกเตอร์เหมาะที่สุดที่จะมีกราฟิกแบบเวกเตอร์ (กล่าวโดยย่อคือชุดขององค์ประกอบทางเรขาคณิตแทนที่จะเป็นชุดของพิกเซล) SVG สามารถปรับขยายได้อย่างไม่ จำกัด ในขณะที่กราฟิกบิตแมปจะสูญเสียคุณภาพเมื่อขยาย

• JPGเป็นรูปแบบการบีบอัดแบบ lossy (เหนือสิ่งอื่นใดมันจะลบความแตกต่างในภาพที่มองไม่เห็นด้วยตามนุษย์เพื่อประหยัดพื้นที่เก็บข้อมูล) เหมาะที่สุดสำหรับภาพถ่าย เนื่องจากวิธีการบีบอัดจึงไม่เหมาะสำหรับภาพประกอบหรือข้อความของเวกเตอร์

ความเข้ากันได้ของเบราว์เซอร์:

• PNG Graphics รองรับข้ามเบราว์เซอร์ยกเว้น IE 6 หาก PNG มีตัวอักษรโปร่งแสง (ส่วนโปร่งใสจะกลายเป็นสีเทาทึบ) และ IE ทุกเวอร์ชันถ้า PNG อยู่ในองค์ประกอบ HTML ที่มีความทึบน้อยกว่า 100 % (แต่นั่นเป็นกรณีที่เป็นขอบ)

• SVG ยังไม่เป็นตัวเลือกเสมอไปเนื่องจากการสนับสนุนเบราว์เซอร์ไม่ได้ 100% ในขณะนี้ อาจมีความแตกต่างด้านพฤติกรรมอื่น ๆ กับ<img>แท็กปกติ ใช้สิ่งนี้เฉพาะเมื่อคุณรู้ว่าคุณกำลังทำอะไรอยู่

• JPG มาตรฐานได้รับการสนับสนุนในทุกเบราว์เซอร์ตราบเท่าที่บันทึกในโหมด RGB แทนที่จะเป็น CMYK (หากโปรแกรมของคุณไม่แยกความแตกต่างอาจเป็นค่าเริ่มต้น)

คุณควรตระหนักถึงปัจจัยสำคัญบางประการ ...

แรกมีสองประเภทของการบีบอัด: LosslessและLossy

• หมายถึงการสูญเสียภาพที่ทำให้มีขนาดเล็กลง แต่ไม่มีความเสียหายต่อคุณภาพ
• การสูญเสียหมายถึงภาพถูกสร้างขึ้น (แม้) เล็กกว่า แต่มีความเสียหายกับคุณภาพ หากคุณบันทึกภาพในรูปแบบ Lossy ซ้ำแล้วซ้ำอีกคุณภาพของภาพจะแย่ลงเรื่อย ๆ

นอกจากนี้ยังมีความลึกสีที่แตกต่างกัน (จานสี): สีที่จัดทำดัชนีและสีโดยตรง

• การจัดทำดัชนีหมายความว่าภาพสามารถเก็บสีได้ในจำนวน จำกัด เท่านั้น (โดยปกติคือ 256) ซึ่งควบคุมโดยผู้แต่งในบางสิ่งที่เรียกว่า Color Map
• Directหมายความว่าคุณสามารถจัดเก็บหลายพันสีที่ยังไม่ได้เลือกโดยตรงโดยผู้เขียน

BMP - Lossless / ดัชนีและโดยตรง

นี่เป็นรูปแบบเก่า มันเป็นแบบไม่สูญเสีย (ไม่มีข้อมูลภาพสูญหายในการบันทึก) แต่ก็มีการบีบอัดข้อมูลน้อยมากถึงไม่มีเลยหมายความว่าการบันทึกเนื่องจาก BMP มีขนาดไฟล์ใหญ่มาก มันสามารถมีจานสีทั้งแบบดัชนีและแบบตรง แต่นั่นเป็นคำปลอบใจเล็กน้อย ขนาดไฟล์มีขนาดใหญ่เกินความจำเป็นโดยที่ไม่มีใครใช้รูปแบบนี้จริงๆ

ดีสำหรับ: ไม่มีอะไรจริงๆ ไม่มีสิ่งใดที่ BMP ดีกว่าหรือทำได้ดีกว่าในรูปแบบอื่น

GIF - ไม่สูญเสีย / ทำดัชนีเท่านั้น

GIF ใช้การบีบอัดแบบไม่สูญเสียซึ่งหมายความว่าคุณสามารถบันทึกภาพซ้ำแล้วซ้ำอีกและไม่สูญเสียข้อมูลใด ๆ ขนาดไฟล์เล็กกว่า BMP มากเนื่องจากการบีบอัดที่ดีนั้นใช้จริง แต่สามารถเก็บจานสีแบบดัชนีได้เท่านั้น ซึ่งหมายความว่าสำหรับกรณีการใช้งานส่วนใหญ่จะมีได้สูงสุด 256 สีที่ต่างกันในไฟล์ นั่นฟังดูค่อนข้างน้อยและเป็น

ภาพ GIF สามารถเคลื่อนไหวและมีความโปร่งใส

เหมาะสำหรับ: โลโก้ภาพวาดลายเส้นและรูปภาพที่เรียบง่ายอื่น ๆ ที่จำเป็นต้องมีขนาดเล็ก ใช้สำหรับเว็บไซต์จริงๆเท่านั้น

JPEG - สูญเสีย / โดยตรง

รูปภาพ JPEG ได้รับการออกแบบมาเพื่อสร้างรายละเอียดของภาพถ่ายขนาดเล็กที่สุดเท่าที่จะทำได้โดยการลบข้อมูลที่สายตามนุษย์จะไม่สังเกตเห็น ผลก็คือรูปแบบ Lossy และการบันทึกไฟล์เดิมซ้ำไปซ้ำมาจะส่งผลให้ข้อมูลสูญหายตลอดเวลา มันมีจานสีหลายพันสีและยอดเยี่ยมสำหรับการถ่ายภาพ แต่การบีบอัดแบบสูญเสียหมายความว่าไม่ดีสำหรับโลโก้และการวาดเส้น: ไม่เพียง แต่พวกเขาจะดูคลุมเครือ แต่รูปภาพเหล่านั้นจะมีขนาดไฟล์ที่ใหญ่กว่าเมื่อเทียบกับ GIF!

เหมาะสำหรับ: ภาพถ่าย นอกจากนี้การไล่ระดับสี

PNG-8 - แบบไม่สูญเสีย / ทำดัชนี

PNG เป็นรูปแบบที่ใหม่กว่าและ PNG-8 (รุ่นที่จัดทำดัชนีของ PNG) เป็นตัวทดแทนที่ดีสำหรับ GIF แต่น่าเสียดายที่มันมีข้อเสียเล็กน้อย: ประการแรกมันไม่สามารถรองรับภาพเคลื่อนไหวอย่าง GIF ได้ (ทำได้ดี แต่มีเพียง Firefox เท่านั้นที่ดูเหมือนจะรองรับซึ่งแตกต่างจากภาพเคลื่อนไหว GIF ที่เบราว์เซอร์ทุกตัวรองรับ) ประการที่สองมีปัญหาการสนับสนุนบางอย่างกับเบราว์เซอร์รุ่นเก่าเช่น IE6 ประการที่สามซอฟต์แวร์ที่สำคัญเช่น Photoshop มีการใช้รูปแบบที่ไม่ดีมาก (Damn you, Adobe!) PNG-8 สามารถเก็บได้ 256 สีเท่านั้นเช่น GIF

เหมาะสำหรับ: สิ่งสำคัญที่ PNG-8 ทำได้ดีกว่า GIF คือการสนับสนุนอัลฟ่าโปร่งใส

หมายเหตุสำคัญ:ในที่สุด Photoshop ได้เพิ่มการรองรับความโปร่งใสอัลฟ่าในเวอร์ชันล่าสุด หากคุณมีรุ่นเก่ากว่ามีวิธีการแปลงไฟล์ Photoshop PNG-24 เป็น PNG-8 ในขณะที่ยังคงความโปร่งใสอยู่ วิธีหนึ่งคือPNGQuantอีกคือการบันทึกไฟล์ของคุณด้วยดอกไม้ไฟ

PNG-24 - Lossless / Direct

PNG-24 เป็นรูปแบบที่ยอดเยี่ยมที่รวมการเข้ารหัสแบบไม่สูญเสียสีเข้ากับสีโดยตรง (หลายพันสีเช่นเดียวกับ JPEG) มันคล้ายกับ BMP มากยกเว้น PNG ที่บีบอัดรูปภาพดังนั้นมันจึงส่งผลให้ไฟล์มีขนาดเล็กลงมาก น่าเสียดายที่ไฟล์ PNG-24 จะยังคงมีขนาดใหญ่กว่า JPEG, GIF และ PNG-8 ดังนั้นคุณยังต้องพิจารณาหากคุณต้องการใช้งานจริง

แม้ว่า PNG-24s จะอนุญาตให้มีหลายพันสีในขณะที่มีการบีบอัด แต่ก็ไม่ได้มีวัตถุประสงค์เพื่อแทนที่ภาพ JPEG ภาพถ่ายที่ถูกบันทึกเป็น PNG-24 น่าจะมีขนาดใหญ่กว่าภาพ JPEG ที่เทียบเท่าอย่างน้อย 5 เท่าโดยมีการปรับปรุงคุณภาพที่มองเห็นได้น้อยมาก (แน่นอนว่าอาจเป็นผลลัพธ์ที่พึงประสงค์หากคุณไม่กังวลเกี่ยวกับขนาดไฟล์และต้องการได้ภาพที่มีคุณภาพดีที่สุดเท่าที่จะทำได้)

เช่นเดียวกับ PNG-8 PNG-24 รองรับอัลฟ่าโปร่งใสเช่นกัน

SVG - Lossless / Vector

filetype ที่กำลังเติบโตในความนิยมเป็น SVG ซึ่งจะแตกต่างจากทั้งหมดข้างต้นในการที่จะเป็นเวกเตอร์รูปแบบไฟล์ (ข้างต้นทั้งหมดแรสเตอร์ ) ซึ่งหมายความว่ามันประกอบด้วยเส้นและส่วนโค้งแทนที่จะเป็นพิกเซล เมื่อคุณซูมเข้าภาพเวกเตอร์คุณยังคงเห็นเส้นโค้งหรือเส้น เมื่อคุณขยายภาพแรสเตอร์คุณจะเห็นพิกเซล

ตัวอย่างเช่น:

นี่หมายความว่า SVG เหมาะสำหรับโลโก้และไอคอนที่คุณต้องการรักษาความคมชัดบนหน้าจอ Retina หรือขนาดต่าง ๆ

นอกจากนี้ไฟล์ SVG จะถูกเขียนโดยใช้ XML และสามารถเปิดและแก้ไขในโปรแกรมแก้ไขข้อความเพื่อให้สามารถจัดการได้ทันทีหากคุณต้องการ ตัวอย่างเช่นคุณสามารถใช้ JavaScript เพื่อเปลี่ยนสีของไอคอน SVG บนเว็บไซต์ได้เหมือนกับข้อความ (เช่นไม่ต้องการรูปภาพที่สอง)

ฉันหวังว่าจะช่วย!

JPG:

ข้อดี:

• มีระดับการบีบอัดที่แตกต่างกันมากมาย
• ง่ายต่อการจัดการกับโปรแกรมแก้ไขภาพทั้งหมด

ความไม่สะดวก:

• การบีบอัดสิ่งประดิษฐ์

ใช้:

• ภาพถ่ายหรือภาพขนาดใหญ่ที่มีสีมากมาย
• เมื่อต้องการบีบอัดสูง

PNG:

ข้อดี:

• โปร่งใสด้วยอัลฟ่า!
• มีหลายสี
• สามารถแทนที่ jpg

ความไม่สะดวก:

• บีบอัดน้อยกว่า JPG (แต่ไม่มาก)
• เข้ากันไม่ได้กับ IE6 (และ 7 ฉันเชื่อว่า) - ต้องใช้แพทช์หรือแฮ็คสำหรับสิ่งนี้ แต่ใครจะสนล่ะ? ต้องใช้;)

ใช้:

• ภาพถ่าย / ภาพขนาดเล็กหรือขนาดกลางที่มีสีมากมาย
• ต้องใช้ถ้าคุณต้องการความโปร่งใสไล่ระดับสี
• ไอคอน
• โลโก้

GIF:

ข้อดี:

• สามารถเคลื่อนไหวได้
• เบามากถ้าคุณใช้เพียงบางสี (เช่น 8 - 16 หรือ 32 สีที่แตกต่างกัน)
• ความโปร่งใส

ความไม่สะดวก:

• ไม่สามารถมีได้มากกว่า 255 สี
• ภาพเคลื่อนไหว gif สามารถทำให้ผู้คนหนีไปได้
• ไม่มีอัลฟาเพื่อความโปร่งใส (มันโปร่งใสหรือไม่!)

ใช้:

• Animated gif (ฉันใช้ส่วนใหญ่ในจดหมายข่าว)
• ไอคอน
• favicon เคลื่อนไหว \ o /
• โลโก้

เว็บไซต์สามารถมีกราฟิกรูปแบบ JPEG, GIF, PNG, SVG ควรใช้อันไหนและเมื่อใด

สำหรับภาพถ่าย:

JPEG หากไม่ต้องการความโปร่งใส PNG สำหรับกราฟิกรูปภาพที่ต้องการความโปร่งใส

ในขณะที่ไม่จริง 100% มันเป็นกฎง่ายๆ ลองดูคำตอบสำหรับคำถามนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบอื่น ๆ นอกจากนี้ให้ตรวจสอบว่ารูปแบบภาพแรสเตอร์ใดที่ดีกว่าสำหรับการแสดงภาพแบบดิจิทัลเมื่อไม่มีความโปร่งใส JPEG หรือ PNG? และแท็กรูปแบบไฟล์ที่เราคัดสรรเช่นjpeg , png , gif & svgเพื่อหาข้อมูลเพิ่มเติม

สำหรับกราฟิก:

SVG พร้อม PNG / JPEG ทางเลือก

ไม่มีเหตุผลใดที่จะไม่ให้บริการ SVGs ในยุคนี้ ภาพเหล่านี้ถูกนำไปใช้งานในลักษณะเดียวกับภาพปกติและมีความหลากหลายมากขึ้น

ดังนั้นขั้นตอนการทำงานสำหรับนักออกแบบเว็บไซต์ที่ทันสมัยยังไม่ได้รับการเปลี่ยนแปลงอย่างสมบูรณ์มันได้รับการปรับปรุง คุณยังคงเตรียมและให้บริการ PNG และ JPEG สำหรับกราฟิก แต่เป็นเพียงทางเลือกสำหรับเมื่อ SVG ไม่ทำงาน

SVG คืออะไร

SVG Scalable Vector Graphicย่อมาจาก ความแตกต่างระหว่าง SVG และรูปแบบพิกเซลอื่น ๆ คือข้อมูลสำหรับองค์ประกอบของกราฟิกนั้นถูกจัดเก็บเป็นการคำนวณทางคณิตศาสตร์ เมื่อเบราว์เซอร์เปิด SVG จะต้องทำการคำนวณเพื่อแสดง SVG เบราว์เซอร์รุ่นเก่าไม่มีฟังก์ชั่นในการคำนวณหรือจัดการ SVG นอกจากนี้คอมพิวเตอร์รุ่นเก่าอาจมีปัญหาในการสร้างหน้าเว็บ SVG ที่หนักหน่วงแม้ว่าจะใช้งานได้เมื่อ 10 ปีที่แล้วก็ตาม (ซึ่งไม่สามารถทำได้) ข้อมูลสำหรับ SVG ถูกจัดเก็บในรูปแบบเลขฐานสิบหก (ฐาน 16) ทำให้สามารถปรับให้เหมาะสมกับขนาดไฟล์ที่เล็กมากเมื่อเปรียบเทียบกับที่เก็บข้อมูลไบนารีของข้อมูลพิกเซล

นี่คือแหล่งข้อมูลสำหรับการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้เทคนิคทางเลือก:

1. การเรียนรู้ SVG ใช้สำหรับเว็บเรตินา, ใช้ร่วมกับสคริปต์ PNG

2. revisiting เวิร์กโฟลว์ SVG สำหรับประสิทธิภาพและการพัฒนาที่ก้าวหน้าด้วย URI ข้อมูลที่โปร่งใส

3. CSS Tricks - SVG Fallbacks

ตัวอย่าง JavaScript ต่อไปนี้คัดลอกมาจากลิงค์แรกคือทั้งหมดที่คุณต้องตรวจหาการสนับสนุน SVG เป็นส่วนใหญ่หากไม่ใช่เบราว์เซอร์ทั้งหมดและเปลี่ยนชื่อไฟล์เพื่อให้ PNG ล้มเหลว

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

ควรใช้ SVG เมื่อใด

• เมื่อใดก็ตามที่คุณสามารถทำได้โดยปกติแล้วขนาดไฟล์ที่เล็กที่สุดและความละเอียดที่เป็นอิสระต่อความหมายมันสามารถจัดการอัตราส่วนพิกเซลของอุปกรณ์ (หน้าจอเรตินาเช่น)
• เมื่องานศิลปะของคุณเหมาะสำหรับรูปแบบไฟล์เวกเตอร์ (โดยเฉพาะไอคอน)
• เมื่อคุณมีความหรูหราเพียงแค่กำหนดเป้าหมายเบราว์เซอร์สมัยใหม่ (การสนับสนุน SVG นั้นค่อนข้างใหม่สำหรับเบราว์เซอร์บางตัว)

ควรใช้แบบอักษรของไอคอนเมื่อใด

• เมื่อคุณต้องการชุดไอคอนที่กว้างขวาง
• เมื่อเช่น SVG คุณต้องการประโยชน์ของรูปแบบไฟล์เวกเตอร์
• เมื่อคุณมีความหรูหราเพียงต้องกำหนดเป้าหมายเบราว์เซอร์สมัยใหม่ (การสนับสนุนแบบอักษรบนเว็บค่อนข้างใหม่สำหรับเบราว์เซอร์บางตัว)

</DA01>

ทำไม SVG เป็นตัวเลือกที่ดีที่สุด

• ปรับขนาดให้สวยงามได้ทุกขนาดจากไฟล์เดียว (ไม่จำเป็นต้องทำหน้าที่@2x.jpgสำหรับหน้าจอเรตินาหรือยืดกราฟิก)

• ขนาดไฟล์ที่เล็กกว่า JPEG และ PNG บ่อยมาก

• แทบจะไม่ต้องเสียสละคุณภาพในโลโก้

• ทำให้การออกแบบที่ตอบสนองง่ายขึ้นในหลาย ๆ ด้าน

หมายเหตุ

• การสนับสนุนเป็นเรื่องธรรมดาสำหรับ SVG แบบอินไลน์ดังนั้นเพื่อความปลอดภัยจึงเป็นการดีที่สุดที่จะเชื่อมโยงไปยังไฟล์ผ่านแท็กภาพในขณะนี้ (หากคุณจะใช้กราฟิกซ้ำที่ใดก็ได้เช่นไอคอนการนำทางคุณต้องการลิงก์ไปยังภายนอกเพื่อให้เบราว์เซอร์แคชและประหยัดเวลาในการโหลดหน้าอื่น ๆ )

• IE ไม่รองรับSVGZรูปแบบการบีบอัดที่มีอยู่สำหรับกราฟิก SVG เพื่อให้สามารถใช้งานร่วมกับเบราว์เซอร์และเวอร์ชันก่อนหน้านี้ได้ดีที่สุดควรใช้SVG 1.0ในเวลานี้

• คุณยังสามารถสร้าง sprite-sheet กับ SVG ได้ในลักษณะเดียวกับที่คุณใช้กับรูปแบบภาพอื่น ๆ แต่แทนที่จะใช้ค่าพิกเซลจริงเพื่อกำหนดพิกัด x และ y ของแต่ละภาพให้ใช้ค่าที่เป็นเปอร์เซ็นต์

  สิ่งที่เกี่ยวกับกรณีเหล่านั้นเมื่อค่าร้อยละไม่ถูกต้องเพียงพอ?

  คุณควรสร้างสไปรต์ชีทโดยมีเป้าหมายเพื่อให้สามารถหารทั้งความกว้างและความสูงได้ 100 และบรรลุตัวเลขทั้งหมดหรือตัวเลขที่มีทศนิยม 1 ตำแหน่งมากที่สุด ตัวอย่างเช่นถ้าคุณกำลังจัด 7 x ไอคอนร่วมกันในแผ่นผีไม่ได้สร้างผืนผ้าใบที่เป็น10px x 10px70px x 10px

  ทำไม? เพราะเมื่อคุณหาร 100 ด้วย 7 คุณจะได้14.285714285714285714285714285714เปอร์เซ็นต์ที่แน่นอนจะทำให้คณิตศาสตร์ไม่สมบูรณ์อยู่ที่ไหนสักแห่ง

  สร้าง80px x 10pxผืนผ้าใบแทนและไม่ต้องกังวลกับความว่างเปล่าของ 12.5% ไอคอนจะเพิ่มขึ้นอย่างแน่นอนที่ 12.5% ​​ซึ่งไม่จำเป็นต้องพูดเลยว่าทำได้ง่ายกว่ามาก

คุณควรใช้. jpeg สำหรับภาพถ่ายหรือภาพที่มีสีมากมาย ประเภทไฟล์. gif มีประโยชน์สำหรับภาพเคลื่อนไหวหรือในกรณีที่ต้องการความโปร่งใส แต่มีการใช้งานน้อยลง รูปแบบที่นิยมที่สุดคือ. png ซึ่งสามารถเสนอความโปร่งใสของตัวอักษรและช่วงของสีได้มากกว่าประเภทไฟล์. gif สำหรับภาพรวมรายละเอียดเพิ่มเติมโปรดดูบทความโจนาธานสนุ๊กของรูปแบบภาพที่ดีที่สุดคือ

สูตรที่ดีอาจใช้ JPEG สำหรับภาพถ่ายและ PNG สำหรับทุกอย่างอื่น

แน่นอนว่าถ้าคุณมีกราฟิกที่ไม่ต้องการความโปร่งใสอัลฟ่าและมีสีน้อยกว่า 256 สี GIF อาจช่วยให้คุณประหยัดแบนด์วิดท์ แต่ก็ใกล้จะหมดแล้ว

ฉันใช้ PNG สำหรับทุกสิ่งเพราะมันไม่มีสิ่งบีบอัดที่ JEPG ทำและมันเข้ากันได้ดีกับคนทั่วไปในทุกวันนี้ (ฉันเคยเห็นบรรณาธิการเว็บไซต์สองคนที่ไม่ชอบมันเช่น เวอร์ชันเดสก์ท็อปของซอฟต์แวร์ SiteBuilder ของ Homestead แต่นั่นเกี่ยวกับมัน)

คุณควรเลือกภาพในระดับฐานการบีบอัด / คุณภาพที่คุณต้องการ

เว็บเป็นข้อมูลเกี่ยวกับความเร็วในการดาวน์โหลดและมีขนาดเล็กกว่ารูปภาพโดยจะดีกว่าสำหรับความเร็วในการโหลดหน้าเว็บ

JPG : สำหรับภาพที่มีล้านสี (ถ่ายรูป)

PNG และ GIF : เพื่อความโปร่งใสและมีจำนวนสีน้อย ฉันใช้เฉพาะภายใต้สีที่ต่างกัน 64/128 เท่านั้น แต่โดยทั่วไปแล้วจะต่ำกว่า 256 (ไอคอนภาพเวกเตอร์ที่ต้องแรสเตอร์สีความคมชัดสูงการไล่ระดับสีไม่กี่สี)

วิธีเลือกระหว่าง PNG และ GIF

ก่อนอื่นตรวจสอบการบีบอัด / การปรับคุณภาพให้ดีที่สุดแล้วเลือกผู้ที่ให้ผลลัพธ์ที่ดีกว่าสำหรับการลดน้ำหนัก ฉันยังใช้ GIF ในวงกว้างและบางครั้งก็ดีกว่า PNG สำหรับภาพประเภทเดียวกัน อย่าแยกแยะรูปแบบอื่นสำหรับรูปแบบอื่นเพียงตรวจสอบรูปแบบที่เหมาะสมกับการเพิ่มประสิทธิภาพของคุณ

• เลือก GIF: สำหรับภาพเคลื่อนไหวที่มีสีไม่เกิน 256 สี
• หากคุณไม่ต้องการภาพเคลื่อนไหวคุณอาจเลือก PNG เลือก PNG ที่ถูกต้อง: มี 8 ชนิด 2 ชนิดและ 24 บิต 8 บิตมีแนวโน้มที่จะเป็นรุ่นที่ดีกว่าของ GIF โดยไม่มีภาพเคลื่อนไหวสำหรับคุณภาพ / การบีบอัด (แต่อย่างที่ฉันบอกว่าไม่เสมอไปลองดูเมื่อคุณบันทึกสำหรับเว็บ) 24 บิตไม่มีการบีบอัด (ดังนั้นให้ใช้งานได้เฉพาะกับเอฟเฟกต์กราฟิกพิเศษ) และมี alpha vaule สำหรับการใช้ความโปร่งใสของสี (เบราว์เซอร์ IE เก่าไม่สนับสนุนสิ่งนี้หากคุณไม่ได้ใช้ตัวกรองพิเศษหรือพฤติกรรม. htc กับหน้าเว็บ )

ฉันสามารถดูได้จากบทความต่างๆ 90% ของนักออกแบบเว็บยังคิดว่าเป็นรูปแบบ PNG lossless เท่านั้น ผู้เชี่ยวชาญหลายคนไม่รู้ด้วยซ้ำเกี่ยวกับการดำรงอยู่ของ PNG-8

แต่เห็นได้ชัดว่า PNG-8 เป็นสิ่งที่ควรใช้กับเว็บแทนที่จะเป็น PNG-32 เนื่องจากมีขนาดไฟล์เล็กลง 2x-5x ด้วยคุณภาพที่ยอมรับได้

บางครั้งมันก็ยากที่จะตัดสินว่าการบีบอัดแบบไหนดีกว่าสำหรับภาพ ตัวอย่างเช่นหากไม่ใช่รูปภาพ แต่มีหลายสีและไล่ระดับสี เครื่องมือนั้นช่วยให้สามารถเปรียบเทียบรูปแบบการสูญเสียทั้งแบบมองเห็นและเลือกชุดตัวเลือกที่ดีที่สุด

นี่เป็นเครื่องมือที่ดีในการเปรียบเทียบรูปแบบ PNG และ JPEG ที่สูญหาย: PNG และ JPEG

รูปแบบกราฟิกเว็บหลักคือ GIF, JPG และ PNG เป็นสิ่งสำคัญที่จะต้องทราบความแตกต่างและเลือกรูปแบบที่ดีที่สุดสำหรับแต่ละภาพเพื่อให้ภาพดูดีและมีขนาดกะทัดรัดเท่าที่จะทำได้เพื่อให้ปรากฏบนหน้าจอของผู้เยี่ยมชมไซต์ของคุณอย่างรวดเร็ว

GIF - รูปแบบข้อมูลกราฟิก

รูปแบบกราฟิก GIF เหมาะที่สุดสำหรับรูปภาพที่มีสีเพียงไม่กี่สี: แผนภูมิกราฟหรือชุดข้อความเป็นกราฟิก สีที่คุณใช้น้อยลงไฟล์ GIF ที่มีประสิทธิภาพมากขึ้น ไฟล์ GIF ...

•สามารถมีได้สูงสุด 256 สี

•รองรับคุณสมบัติที่เรียกว่าโปร่งใสซึ่งสีหนึ่งสีจาก 256 สีถูกตั้งค่าให้โปร่งใส สิ่งนี้จะป้องกันไม่ให้กราฟิกของคุณดูราวกับว่าอยู่ในกล่องเพราะมองไม่เห็นพื้นหลังของไฟล์ทำให้พื้นหลังของเว็บเพจแสดงผ่าน

•สามารถเคลื่อนไหวได้ ภายในไฟล์เดียวจะถูกจัดเก็บเฟรมรูปภาพจำนวนมากและดัชนีบอกระยะเวลาที่ควรแสดงแต่ละเฟรม Animated GIF ถือเป็นไฟล์ภาพมาตรฐานดังนั้นจึงโหลดด้วยแท็กมาตรฐาน

•ไม่สูญเสียคุณภาพซึ่งหมายความว่าคุณภาพของภาพจะไม่ลดลงตามกระบวนการบีบอัด

•สามารถอินเทอร์เลซดังนั้นจึงดูเหมือนว่าจะจางหายไปจากที่ต่ำลงไปจนถึงคุณภาพที่สูงขึ้น สิ่งนี้ทำให้ผู้เข้าชมของคุณได้เห็นในขณะที่รอ

•ไม่ดีต่อภาพถ่าย - คุณสูญเสียคุณภาพและไฟล์จะไม่กะทัดรัด ใช้รูปแบบกราฟิก JPG สำหรับภาพถ่าย

JPG - กลุ่มผู้เชี่ยวชาญถ่ายภาพร่วม

รูปแบบกราฟิก JPG เหมาะที่สุดสำหรับรูปภาพที่มีหลายสีเช่นภาพถ่ายหรืองานศิลปะที่สแกน ไฟล์ JPG ...

•สามารถมีได้สูงสุด 16 ล้านสี

•รองรับการบีบอัดตัวแปร คุณสามารถใช้การบีบอัดมากกว่าหรือน้อยกว่ากับแต่ละภาพ ยิ่งคุณบีบอัดมากเท่าไหร่ก็ยิ่งมีคุณภาพมากขึ้น ในขณะที่ขนาดไฟล์สามารถทำค่อนข้างเล็กด้วยรูปแบบกราฟิกนี้คุณมักจะต้องประนีประนอมระหว่างขนาดไฟล์และคุณภาพของภาพ ซอฟต์แวร์กราฟิกรุ่นใหม่ให้ภาพตัวอย่างก่อนบันทึก - นี่ช่วยให้คุณสามารถทดสอบด้วยการบีบอัดในระดับต่างๆเพื่อเลือกการประนีประนอมระหว่างคุณภาพและขนาดไฟล์ที่ดีที่สุด

•มีสามประเภท: พื้นฐานหรือมาตรฐานเพิ่มประสิทธิภาพพื้นฐานหรือปรับมาตรฐานและก้าวหน้า พื้นฐานถูกออกแบบมาสำหรับเบราว์เซอร์ที่เราพิจารณาว่าเป็นสมัยโบราณ (เช่น Internet Explorer รุ่น 1) พื้นฐานที่ได้รับการปรับปรุงให้มีการบีบอัดมากกว่าพื้นฐานมาตรฐานและในทางปฏิบัติทุกเบราว์เซอร์ทุกวันนี้สามารถอ่านภาพได้ JPG แบบโปรเกรสซีฟเช่นไฟล์ GIF แบบอินเตอร์เลซจะสร้างตามที่ดาวน์โหลดตั้งแต่การแสดงรูปภาพไปจนถึงรูปลักษณ์ที่สมบูรณ์ แม้ว่านี่จะเป็นรูปแบบกราฟิกบนเว็บที่ดี แต่เบราว์เซอร์รุ่นเก่าไม่สนับสนุนรูปแบบนี้ทั้งหมด

•ไม่เหมาะสำหรับภาพที่มีสีเพียงไม่กี่สีเช่นชุดข้อความเป็นกราฟิกหรือภาพที่มีพื้นที่สีเรียบ หากคุณใช้ JPG สำหรับกราฟิกเหล่านี้พวกเขาจะมีขนาดใหญ่เกินความจำเป็นและมองหา "จุดด่างดำ"

PNG - กราฟิกเครือข่ายแบบก้าวหน้า

PNG เป็นเว็บกราฟิกรูปแบบใหม่ล่าสุด ไฟล์ PNG ...

•ได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด ไฟล์เหล่านี้อาจไม่ปรากฏในเบราว์เซอร์รุ่นเก่าดังนั้นการใช้รูปแบบกราฟิกนี้อาจทำให้ผู้เยี่ยมชมเว็บไซต์ของคุณบางคนไม่เห็นภาพของคุณ

•มีขนาดกะทัดรัดและอเนกประสงค์และสามารถรวมคุณสมบัติที่ดีที่สุดของ GIF และ JPG เช่นความสามารถในการมีพื้นหลังแบบโปร่งใสหรือความสามารถในการเก็บภาพที่มีสีนับล้าน

•ยังไม่ได้ใช้กันอย่างแพร่หลายส่วนใหญ่เป็นเพราะพวกเขาไม่ได้รับการสนับสนุนโดยเบราว์เซอร์รุ่นเก่า

จะใช้เมื่อใด

การเลือกรูปแบบกราฟิกบนเว็บที่เหมาะสมจะช่วยให้มั่นใจได้ว่าภาพของคุณจะดูดีและปรากฏบนคอมพิวเตอร์ของผู้เข้าชมอย่างรวดเร็ว การเลือกรูปแบบที่ไม่ถูกต้องทำให้ภาพของคุณดูแย่และดาวน์โหลดตลอดไป

ความผิดพลาดทางกราฟิกที่พบบ่อยที่สุดที่คนทำบนเว็บคือการใช้รูปแบบกราฟิกที่ไม่ถูกต้องสำหรับภาพของพวกเขา แต่ตัวเลือกนั้นค่อนข้างง่ายจริงๆ ...

•หากกราฟิกของคุณมีหลายสี (เช่นภาพถ่าย) ให้เลือก JPG

•หากกราฟิกของคุณมีสีน้อยเลือก GIF เมื่อใช้ GIF ลองใช้ชุดสีที่มีสีที่ใช้เท่านั้นซึ่งสามารถลดขนาดไฟล์ลงครึ่งหนึ่ง

ในโลกอุดมคติมันจะลงมาที่นี่:

JPEG - สำหรับภาพแรสเตอร์และภาพถ่าย

PNG - สำหรับกราฟิกแบบเวกเตอร์ (เช่นโลโก้ ฯลฯ )

น่าเสียดายที่ Internet Explorer 6 (แต่น่าเสียดายที่มีผู้ใช้จำนวนมาก) ไม่สนับสนุนความโปร่งใสในรูปภาพ PNG ดังนั้นหากคุณ PNG มีความโปร่งใสอาจมีปัญหา โชคดีที่มีแฮ็คที่สามารถใช้เพื่อหลีกเลี่ยงปัญหานี้ได้แม้ว่าจะไม่ใช่วิธีที่สง่างามก็ตาม:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(แก้ไข: นอกจากนี้ฉันคิดว่าแม้ IE 7 จะมีปัญหากับคุณสมบัติบางอย่างของ PNG)

GIF มีข้อได้เปรียบสองอย่างที่เหนือ PNG:

1. (เกือบ) การสนับสนุนเบราว์เซอร์ที่สมบูรณ์แบบ (แม้ว่าจะไม่มีความโปร่งใสดังนั้นนี่ไม่ใช่โบนัสมาก)
2. พวกเขาอาจเป็นภาพเคลื่อนไหว แต่กราฟิกแบบเคลื่อนไหวควรใช้อย่าง จำกัด ในการออกแบบเว็บ

แก้ไข: PNG เป็นที่นิยมกว่าใน GIF ที่ได้รับการสนับสนุนและใช้งานได้เนื่องจาก PNG เป็นรูปแบบเปิด

ตามที่ระบุไว้ส่วนใหญ่ JPEG นั้นดีสำหรับการถ่ายภาพและ PNG นั้นเหมาะสำหรับกราฟิกที่มีข้อความและกราฟ GIF มีข้อได้เปรียบเพียงอย่างเดียวที่รองรับภาพเคลื่อนไหวที่ควรใช้อย่างระมัดระวัง

เคล็ดลับที่ดีคือส่งออกภาพเป็น JPEG และ PNG เกือบทุกรูปแบบที่ดีกว่าสำหรับผลลัพธ์กราฟิกของคุณในไฟล์ขนาดเล็ก ภาพถ่ายจะเล็กลงเป็น JPEG และกราฟเล็กกว่า PNG ดังนั้นหากคุณไม่แน่ใจว่าจะเลือกแบบใดมันสามารถเป็นตัวตัดสินใจที่ดี