รูปภาพ URI ข้อมูลที่เล็กที่สุดเท่าที่จะเป็นไปได้สำหรับภาพโปร่งใส

125

ฉันใช้รูปภาพ 1x1 แบบโปร่งใสกับภาพพื้นหลังเพื่อให้สามารถใช้สไปรต์และยังคงให้ข้อความแสดงแทนสำหรับไอคอนบางตัว

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

ฉันรู้ว่าฉันสามารถใช้ data URI: s สำหรับรูปภาพจริงแทนสไปรต์ แต่มันง่ายกว่าที่จะรักษาเมื่อทุกอย่างถูกเก็บไว้ใน CSS แทนที่จะกระจัดกระจายไปทั่ว

css css-sprites

— Jacob Rask
แหล่งที่มา

1

จะดีกว่าไหมถ้าใช้ภาพ 1x1 จริงพร้อมการตั้งค่าแคช คุณไม่มีคำขอ http อีกต่อไปและข้อมูลทั้งหมดที่อยู่เหนือหัว url ของรูปภาพอาจมีขนาดเล็กกว่า URI ข้อมูล 78 ไบต์

— Redzarf

1

@Redzarf: จริงๆแล้วไม่น่าจะดีกว่า ทรัพยากรที่มีขนาดเล็กและไม่ค่อยมีการเปลี่ยนแปลงส่งผลกระทบต่อเวลาในการโหลดหน้าเว็บไม่ใช่เพราะขนาดไฟล์ แต่เป็นเพราะการเดินทางไปกลับของคำขอ HTTP ความละเอียดอ่อนอีกประการหนึ่งคือเบราว์เซอร์ส่วนใหญ่มีความก้าวร้าวในการแคช CSS มากกว่าทรัพยากรอื่น ๆ ดังนั้นเบราว์เซอร์จึงมีโอกาสน้อยที่จะทดลองใช้ css ที่รีเฟรช (และเนื้อหาที่ฝังอยู่) ช่วยประหยัดการเดินทางไปกลับ http ได้มากขึ้น

— SingleNegationElimination

167

หลังจากเล่นกับ GIF แบบโปร่งใสที่แตกต่างกันบางไฟล์ไม่เสถียรและทำให้ CSS บกพร่อง ตัวอย่างเช่นหากคุณมี<img>และคุณใช้ GIF ที่โปร่งใสน้อยที่สุดเท่าที่จะเป็นไปได้มันก็ใช้ได้ดีอย่างไรก็ตามหากคุณต้องการให้ GIF แบบโปร่งใสของคุณมี a background-imageก็เป็นไปไม่ได้ ด้วยเหตุผลบางประการ GIF บางตัวเช่นต่อไปนี้จะป้องกันพื้นหลัง CSS (ในบางเบราว์เซอร์)

สั้นกว่า (แต่ไม่เสถียร - 74 ไบต์)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

ฉันขอแนะนำให้ใช้เวอร์ชันที่ยาวกว่าและเสถียรกว่าเล็กน้อยดังนี้:

⇊เสถียร⇊ (แต่ยาวกว่าเล็กน้อย - 78 ไบต์)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

เคล็ดลับอื่น ๆ อย่าละเว้นimage/gifตามที่ความคิดเห็นหนึ่งแนะนำ สิ่งนี้จะแตกในหลาย ๆ เบราว์เซอร์

— Layke
แหล่งที่มา

1

+1 ขอบคุณ! ฉันสังเกตว่าสิ่งนี้มีประโยชน์ ฉันใช้ข้อมูลของคุณเพื่อสร้างปลั๊กอินนี้ดังนั้นฉันจึงสามารถใช้รูปภาพประเภทที่ตอบสนองได้โดยใช้พื้นหลังหรือมี

— Jason Sebring

1

เหตุใดอันที่สั้นกว่าจึง "ไม่เสถียร"? ฉันเห็นว่าบางครั้งมันทำให้เกิดภาพสีดำฉันแค่อยากรู้ว่ามีใครรู้ว่าทำไม

— jvenema

หลังจากเจ็บปวดมามากฉันพบว่าเวอร์ชัน "สั้นกว่า" จริงๆแล้วเบราว์เซอร์ขัดข้องในบางหน้า (ไม่ใช่ทั้งหมด) บนไซต์ของฉันบนเบราว์เซอร์ Android รุ่นเก่า (HTC One S, OS 4.1)

— WebSeed

คำตอบที่ดี แต่ไม่ได้มีขนาดเล็กที่สุดที่เป็นไปได้เพื่อให้ห่างไกล

— Josh Habdas

22

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

ความยาวสุดท้ายขึ้นอยู่กับว่ามันถูกบีบอัดด้วยอะไร

— Adria
แหล่งที่มา

3

มีข้อโต้แย้งใด ๆ เกี่ยวกับการใช้ SVG หรือไม่? มีกรณีใดบ้างที่ไม่ใช่ความคิดที่ดี

— tremby

SVG นั้นใช้ได้ในหลาย ๆ กรณี แต่เมื่อรวมกับwidth: auto;SVG จะใช้ความกว้างของพาเรนต์ ภาพนิ่งเช่น GIF หรือ PNG เมื่อกำหนดความสูงและความกว้างคงที่โดยอัตโนมัติจะคงอัตราส่วนไว้

— snazzybouche

16

ฉันคิดว่ามันต้องเป็นไฟล์ 1x1 GIF แบบโปร่งใสที่บีบอัด (82 ไบต์):

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

สร้างขึ้นด้วยข้อมูล dopiaza.org: กำเนิด

— KARASZI István
แหล่งที่มา

14

PNG ที่เล็กที่สุด - 114 ไบต์:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— joshcarr
แหล่งที่มา

เป็นมูลค่าการกล่าวขวัญว่าสิ่งนี้สามารถสร้างได้อย่างง่ายดายโดยใช้ GIMP ไฟล์ที่ได้จะมีขนาด 68 ไบต์ (เล็กที่สุดเท่าที่จะเป็นไปได้)

— Ismael Miguel

@AminahNuraini นี่คือ PNG

— joshcarr

2

@AminahNuraini: แล้วคำตอบนี้บอกว่า "SVG" กับคุณล่ะ

— Lightness Races ใน Orbit

10

ผู้ชายคนนี้แบ่งปัญหาผ่านข้อมูลจำเพาะ GIF วิธีแก้ปัญหาของเขาคือtransparent.gif37 ไบต์:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

เขายิ่งเล็กลงด้วยการลบความโปร่งแสงก่อนจากนั้นตารางสี ...

ข้อกำหนด GIF89a

ส่วนหัว (6 ไบต์)

ประกอบด้วยไบต์“ GIF” และหมายเลขเวอร์ชันซึ่งโดยปกติ89aแล้ว
ตัวบอกหน้าจอลอจิคัล (7 ไบต์)
โดยไม่ต้องลงรายละเอียดมากเกินไปส่วนนี้ของไฟล์จะระบุสิ่งต่อไปนี้:
- ไฟล์มีขนาด 1x1 พิกเซล
- มีตารางสีทั่วโลก
- ตารางสีส่วนกลางมี 2 สีสีที่สองควรใช้เป็นสีพื้นหลัง
ตารางสีส่วนกลาง (6 ไบต์)

ประกอบด้วย 3 ไบต์ต่อสีหนึ่งไบต์สำหรับสีแดงเขียวและน้ำเงินตามลำดับ ในไฟล์ของเราสีแรกคือสีขาวและสีที่สองคือสีดำ
ส่วนขยายการควบคุมกราฟิก (8 ไบต์)

ใช้เพื่อระบุว่าสีที่สองในตารางสีควรถือว่าโปร่งใส (สามารถใช้สำหรับพารามิเตอร์ภาพเคลื่อนไหวได้เช่นกัน แต่ไม่ได้อยู่ในไฟล์นี้)
Image Descriptor (10 ไบต์)

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

บล็อกข้อมูลรูปภาพที่เข้ารหัส LZWหนึ่งบล็อก ใช้เวลา 5 ไบต์ในการแทนพิกเซลเดียวที่มีอยู่ในภาพ อัลกอริธึมการบีบอัดไม่ได้ออกแบบมาเพื่อบีบอัดไบต์เดียวเป็นอย่างดี
ตัวอย่าง GIF (1 ไบต์)

ไบต์เดียวที่มีค่าฐานสิบหก3B( ;ใน ASCII) ระบุจุดสิ้นสุดของ GIF

จากโครงสร้างที่จำเป็นสำหรับ GIF แบบโปร่งใสปรากฎว่า 43 ไบต์นั้นค่อนข้างเล็กที่สุดเท่าที่คุณจะทำได้

แต่ฉันสามารถหาเคล็ดลับอย่างหนึ่งเพื่อทำให้มันเล็กลงได้ มีการระบุไว้ในมาตรฐานว่าเป็นทางเลือกที่จะมีตารางสีส่วนกลาง แน่นอนว่ามันไม่ได้กำหนดว่าจะเกิดอะไรขึ้นเมื่อคุณสร้าง GIF โดยไม่มีตารางสีเลย

อย่างไรก็ตามเมื่อคุณกำหนดดัชนีตารางสีเป็นแบบโปร่งใส แต่ตัวถอดรหัส GIF ดูเหมือนจะไม่สนใจว่าไม่มีตารางสีจริงๆ

ดังนั้นฉันจึงเปลี่ยนตัวอธิบายหน้าจอแบบลอจิคัลเพื่อระบุว่าไม่มีตารางสีส่วนกลางและลบตารางออกเองประหยัดได้ทั้งหมดหกไบต์ทำให้ขนาดไฟล์เหลือเพียง 37 ไบต์

สิ่งที่น่าสนใจก็คือ Wordpress ให้รายการข้อความแสดงข้อผิดพลาดที่น่ารักของ GD ที่บ่นว่านี่ไม่ใช่ไฟล์ GIF ที่ถูกต้องแม้ว่า Firefox และ GIMP จะเปิดและแสดง (มัน "แสดง" เมื่อโปร่งใสหรือไม่) ไฟล์ ดี.

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

ที่มา: GIF ที่เล็กที่สุดที่เคยมีมา

— McKamey
แหล่งที่มา

1

ในบทความนั้นรูปแบบ 37 ไบต์ขึ้นอยู่กับพฤติกรรมที่ไม่ได้กำหนดและในความเป็นจริงผู้เขียนกล่าวว่าโปรแกรมแยกวิเคราะห์รูปภาพของ wordpress ไม่สามารถจัดการได้ แม้ว่ามันอาจจะใช้ได้กับเบราว์เซอร์ส่วนใหญ่ แต่ฉันก็ถือว่าเป็นทางเลือกที่มีความเสี่ยง ฉันจะใช้รูปแบบ 43 ไบต์จากบทความเดียวกัน แตกต่างจากที่โพสต์ไว้แล้วข้างต้น ดูการอภิปรายในความคิดเห็นเกี่ยวกับคำตอบด้านบน

— Brian

9

คุณสามารถลองใช้ข้อมูล SVG ต่อไปนี้ (60 ไบต์):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

ไฟล์ svg แบบสแตนด์อโลนจะมีลักษณะดังนี้ (62 ไบต์):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

ดูสิ่งนี้ด้วย:

— kenorb
แหล่งที่มา

2

อาจ ยัง ได้รับการ เข้ารหัสและใช้ใน favicon หรือ CSS contentคุณสมบัติ

— Josh Habdas

6

นี่คือขนาดที่เล็กที่สุดที่ฉันพบ (26 ไบต์):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

— KarasQ
แหล่งที่มา

สิ่งนี้ขึ้นมาเป็นสีดำใน IE11

— tomasz86

4

ฉันใช้ข้อมูลต่อไปนี้ uri เพื่อให้ได้ภาพที่ว่างเปล่า: //:0

— Jurgis
แหล่งที่มา

Firefox 44 และ Internet Explorer 11 แสดงแท็ก img alt คุณต้องใช้อย่างใดอย่างหนึ่งข้างต้นหรือลบแท็ก alt

— PersyJack

ซึ่งจะมีประสิทธิภาพมากขึ้นในการร้องขอ / ตอบกลับสำหรับรูปภาพ?

— nu everest

จะไม่ตรวจสอบความถูกต้อง

— Lucian Davidescu

0

สำหรับภาพเปล่า:

data:null

(จะแปลเป็นsrc=(unknown))

— T.Todua
แหล่งที่มา

โดยหลักการแล้วฉันชอบสิ่งนี้ แต่ตัวตรวจสอบ w3c ไม่อนุมัติในทางปฏิบัติ: ข้อผิดพลาด: ข้อมูลค่าไม่ถูกต้อง: null สำหรับแอตทริบิวต์ src บนองค์ประกอบ img: การสิ้นสุด URI ก่อนกำหนด

— brennanyoung