Ծրագրավորողը մի ամբողջ կայք տեղավորեց favicon-ի պիքսելներում

Յուրաքանչյուր կայք ունի favicon՝ փոքրիկ պատկերանշան բրաուզերի ներդիրում, որը մեկ անգամ վերբեռնում ես ու այլևս չես հիշում։ Ծրագրավորող Թիմ Վերլեն շրջեց այդ ենթադրությունը և կառուցեց փոքրիկ դեմո, որտեղ ամբողջ վեբ էջը պահվում է favicon-ի պիքսելներում, իսկ բրաուզերը այն վերծանում է աշխատանքի ընթացքում։

Բայթեր՝ թաքցված RGB ալիքներում

Մոտեցումը ստեգանոգրաֆիայի ուղիղ ձև է։ Պատկերի յուրաքանչյուր պիքսել կրում է կարմիր, կանաչ և կապույտ արժեքներ՝ երեք բայթ։ Վերլեն փոքրիկ HTML փաստաթղթի UTF-8 բայթերը ուղղակիորեն գրեց այդ ալիքներում՝ պիքսել առ պիքսել, և ստացավ վիզուալ աղմուկի նման պատկեր։ Սկզբում ավելացվում է չորս բայթանոց վերնագիր՝ տվյալների երկարությամբ, քանի որ պատկերի վերջում կարող են չօգտագործված պիքսելներ մնալ, և առանց երկարության արժեքի անհնար է հասկանալ, թե որտեղ է ավարտվում իրական տվյալը։

Ինքը տվյալը ընդամենը 208 բայթ HTML էր․ վերնագրի հետ միասին՝ 212 բայթ։ Մեկ պիքսելին երեք բայթ հաշվով դա պահանջում է 71 պիքսել, իսկ ամենափոքր քառակուսի պատկերը, որի մեջ դրանք տեղավորվում են, 9x9 պիքսել է, այսինքն՝ 81 պիքսել։ Ստացված պատկերն օգտագործում է իր 239 բայթանոց տարողության 87%-ը։

Ինչպես կայքը հետ են կարդում

Էջը վերականգնելու համար բավական են API-ները, որոնք արդեն կան յուրաքանչյուր բրաուզերում։ Favicon-ը բեռնվում է որպես պատկեր, գծվում canvas-ի վրա, ապա JavaScript-ը canvas API-ի միջոցով կարդում է բոլոր պիքսելները։ Կոդը վերակառուցում է բայթերի զանգվածը, կարդում առաջին չորս բայթերը՝ տվյալի երկարությունը իմանալու համար, հանում է տվյալը և վերծանում որպես UTF-8 տեքստ․ այդ պահին բնօրինակ HTML-ը նորից հասանելի է։

Մի նրբություն կա․ favicon-ը չի պարունակում կայքը, այն պարունակում է կայքի բովանդակությունը։ Պատկերը վերծանելու համար միևնույն է պետք է փոքրիկ bootstrap սկրիպտ․ առանց JavaScript-ի ֆայլը պարզապես PNG է, որի մեջ պատահաբար HTML է հայտնվել։ Դեմո էջում կա «Render Website» կոճակ, որը կարդում է favicon-ը, վերծանում HTML-ը և էջը փոխարինում վերականգնված բովանդակությամբ։

Օգտակա՞ր է․ իրականում ոչ՝ և հենց դա է իմաստը

Վերլեն ուղղակիորեն ասում է, որ գործնականում դա անիմաստ է․ տարողությունը շատ փոքր է, իսկ էջը չի կարող ինքն իրեն բեռնել առանց JavaScript-ի, ուստի փոքրիկ HTML փաստաթուղթ տարածելու տասնյակ ավելի լավ եղանակներ կան։ Փորձարկումը շարունակում է նախորդ աշխատանքը, երբ նա երկու բայթ պահեց մկնիկի DPI ռեգիստրում, և պատկանում է նույն կատեգորիային՝ ստուգել, թե որքանն է տանում սովորական ձևաչափը։

Նա նաև թվարկում է այլընտրանքները․ մակնշումը ուղղակիորեն SVG favicon-ում տեղադրելը, PNG-ի tEXt, zTXt և iTXt մեկնաբանությունների բլոկների օգտագործումը, կամ ICO ձևաչափը, որը կարող է պարունակել տարբեր թույլատվության մի քանի պատկերանշան։ Դեմոն հասանելի է նրա կայքում, իսկ կոդը հրապարակված է GitHub-ում։