下準備
<img src="data:image/...">という構成の最短記述を検証してみました。dataURI形式限定で、外部画像fileを読み込むのは禁止です。
1画素の画像を表現すれば良さそうだと思い、bmp、gif、png、jpg形式の画像fileをdataURIに変換してみたところ、どうやらgifが最も小さくなるっぽい。不正なgifを描画できるかどうかはBrowser次第。
gif(不正) 51 bytes
<img src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
gif(正当かも) 71 bytes
<img src=data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAAA>
gif(多分正当) 82 bytes
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAA>
png 88 bytes
<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAAAElEQVR4>
bmp 115 bytes
<img src=data:image/bmp;base64,Qk0+AAAAAAAAADoAAAAoAAAAAQAAAAEAAAABAAQAAgAAAAQAAAATCwAAEwsAAAEAAAAAAAAA////AAEAAAE>
jpg 412 bytes
<img src=data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AL+AA//Z>
svg要素からdataURIを作ると最小で以下のようになるかも。
46 bytes
<svg xmlns="http://www.w3.org/2000/svg"/>
94 bytes(URIComponent)
<img src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E>
92 bytes(base64)
<img src=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=>
用途
画像fileを用意せずにimg要素のonload属性でJavaScriptを召喚します。何か面白い事ができそうです。これ以降dataURIには不正なgifを指定しています。動作しない場合は前述の正当なgifを指定して下さい。
永久再描画
一見何も起こっていないように見えますが、密かに再描画を繰り返しまくっています。これをweb pageにありったけ仕込んでおけば閲覧者のbrowserが暴走を起こして大変な事になるかもしれないかどうかは定かではありません。ちなみにalt属性の代わりにid属性でも良いです。global領域を汚さない親切設計(やっている事は凶悪)。
<img onload='alt=src,delete src,src=alt' src="data:image/gif;base64,R0lGODdhAQABAAAAAAA">
激震
<img style='border:1px solid red;background:#faa' onload='alt=src,delete src,src=alt;width=height=++id&255' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
爆震
<img style='border:1px solid red;background:#faa' onload='alt=src,delete src,src=alt,width=height=++id&511' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
<img style='border:1px solid blue;background:#aaf' onload='alt=src,delete src,src=alt,width=height=-++id&511' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
パラダイム汚染侵攻
基本形
<img style='border:1px solid red;background:#faa' onload='alt=src,delete src,src=alt;write(outerHTML)' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
無秩序
<img style='border:1px solid red;background:#faa' onload='alt=src,delete src,src=alt;height=width=Math.random()*9;write(outerHTML)' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
program降臨
使い方は何となく分かるはず…
<img onload='_=`<q^s>_-raw_<}>gzip</q>vVbox^d>dZodevQ WX="Qs[0]~NRespWse{.sP().pipeThrough(N(d.Ved?DZ|:C|)(s.}s[s.qedIndex].text)))~e.hYf=self.URL.cYateObjZtURL{)))"><a^e download>N~.arrayBuffer().then(a=>}optiW|ompYssiWSP{(NBlob([a])v<X type=qselZtNnew _<}>deflate^ id=ZecYreXinputWonVchZkQfilePtYam`;for(i of`PQVWXYZ^_Nqv{|}~`)with(_.split(i))_=join(pop());write(_)' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
julia集合
<img onload='m=Math;outerHTML="<pre id=p>";setInterval(`d="";z=s+.9;s=m.sin(r+=.01)*z;for(y=-2;(y+=.1)<2;d+="\\n")for(x=-2;a=x*s+y*(c=m.cos(r)*z),b=x*c-y*s,(x+=.05)<2;d+="WMSUIi;:.~".charAt(i/3))for(i=28;--i&&a*a+(q=b*b)-4<0;b=2*(a*b+s),a=a*a-q);p.innerText=d`,s=r=2)' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
mandelbrot集合
<img onload='outerHTML="<pre id=p>";setInterval(`z*=.97;s=Math.sin(l+=.01)*z;for(d="",y=1;-1<y;d+="\\n")for(x=2,y-=.07;-1<x;d+="WHUIi;:.~".charAt(k%9))for(x-=.04,r=i=0,k=99;--k&&r*r+i*i<4;t=2*r*i+y*(c=Math.cos(l)*z)-x*s,r=r*r-i*i+y*s+x*c-1.5,i=t);p.innerText=d`,z=l=1)' src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
余談
img要素の代わりにtype=imageのinput要素でも同様の事ができます
<input type=image onload="title=src,delete src,src=title,write(outerHTML)" src="data:image/gif;base64,R0lGODdhAQABAAAAAAA" style="border:1px solid red">