TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

The smallest 256x256 single-color PNG file, and where you've seen it (2015)

482 pointsby karulontabout 3 years ago

14 comments

Retr0idabout 3 years ago
With some dirty hacks, I got it down to 83 bytes:<p><a href="https:&#x2F;&#x2F;cdn.discordapp.com&#x2F;attachments&#x2F;286612533757083648&#x2F;966916647875137576&#x2F;foo.png" rel="nofollow">https:&#x2F;&#x2F;cdn.discordapp.com&#x2F;attachments&#x2F;286612533757083648&#x2F;96...</a><p><pre><code> 00 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 |.PNG........IHDR| 10 00 00 01 00 00 00 01 00 01 03 00 00 00 66 bc 3a |.............f�:| 20 25 00 00 00 03 50 4c 54 45 b5 d0 d0 63 04 16 ea |%....PLTE���c..�| 30 00 00 00 1b 49 44 41 54 68 81 ec c1 01 0d 00 00 |....IDATh.��....| 40 00 c2 a0 f7 4f 6d 0f 07 14 00 00 00 00 00 00 00 |. �Om..........| 50 c0 b9 01 |��.| </code></pre> Although technically invalid, it still renders fine in Firefox, Chrome, and Safari.<p>Edit: 87 -&gt; 83 bytes<p>Edit2: Maybe in a couple of years time, we can use JPEG-XL instead (only 22 bytes, without any hacks!):<p><pre><code> data:image&#x2F;jxl;base64,&#x2F;wp&#x2F;QCQIBgEALABLOEmIDIPCakgSBg==</code></pre>
评论 #31119493 未加载
评论 #31120886 未加载
评论 #31118294 未加载
评论 #31119713 未加载
评论 #31118264 未加载
评论 #31118394 未加载
tppiotrowskiabout 3 years ago
One thing I&#x27;ve wondered about are size savings for DEM tiles. Typically elevation values are encoded in RGB values giving a resolution down to fractions of an inch [1]. This seems like overkill. With an elevation range from 0 - 8848 meters (Mt everest), you can use just 2 bytes and get an accuracy down to .2 meters. That seems plenty for many uses. Does anybody know if there&#x27;s a PNG16 format where you can reduce the file size by only using 2 bytes per pixel, instead of the typical 3-byte RGB or 4-byte RGBA?<p>[1] <a href="https:&#x2F;&#x2F;docs.mapbox.com&#x2F;data&#x2F;tilesets&#x2F;guides&#x2F;access-elevation-data&#x2F;#decode-data" rel="nofollow">https:&#x2F;&#x2F;docs.mapbox.com&#x2F;data&#x2F;tilesets&#x2F;guides&#x2F;access-elevatio...</a>
评论 #31118115 未加载
评论 #31117811 未加载
评论 #31119281 未加载
评论 #31118164 未加载
评论 #31117755 未加载
评论 #31118480 未加载
rekoilabout 3 years ago
&gt; Instead of serving a 256x256px image, you can serve a 1px image and tell the browser to scale it up. Of course, if you have to put width= &quot;256px&quot; height= &quot;256px&quot; into your HTML that adds 30 bytes to your HTML!<p>CSS is a thing as well, could just use CSS to force all tiles to the same size, regardless of the image data in them. Something like:<p><pre><code> .map img { width: 256px; height: 256px; }</code></pre>
jameshartabout 3 years ago
Was new to me, but it seems &quot;slippy map&quot; is open-streetmap&#x27;s terminology for a generic zoomable-pannable web map view, here used to refer to any such UI - whether backed by OSM or google or bing or whoever&#x27;s map data.<p>Feels like a weird word choice to me, when &#x27;map&#x27; was right there, but who are we to judge.
评论 #31118117 未加载
评论 #31119948 未加载
willis936about 3 years ago
I love image formats and data packing, but was disappointed that the reveal was that maps use raster tiles. The map data is vector, why not render it as such?
评论 #31119091 未加载
评论 #31119273 未加载
评论 #31120405 未加载
评论 #31119903 未加载
评论 #31121724 未加载
adam_arthurabout 3 years ago
Seems a lot more performant to generate single color images programatically rather than sending it over the wire?<p>Assuming this level of optimization is actually warranted
评论 #31118400 未加载
评论 #31119562 未加载
blenderdtabout 3 years ago
The difference between the OSM and Google tile is 75 bytes. So if they serve one million tiles OSM saved 75MB.<p>OSM needs 54TB for all tiles but only around 1.8% are viewed. So you need at least 1TB of cache.<p>I am curious if this micro optimalization really makes a difference.
评论 #31119345 未加载
评论 #31119241 未加载
moron4hireabout 3 years ago
Even better would be no image for the water tiles and set the background color of the container element.
评论 #31117954 未加载
评论 #31119086 未加载
评论 #31117653 未加载
LeoPantheraabout 3 years ago
This is one example where &quot;zopfli&quot; or other optimized zlib compressors don&#x27;t help, the input data is too simple.<p>&quot;oxipng&quot; (my current preferred png optimizer) bring a plain 256x256 image created with imagemagick down to 179 bytes, as long as you tell it to strip all metadata objects.<p>Interlacing doesn&#x27;t make any difference, it&#x27;s the same size with it on or off.
评论 #31117671 未加载
softgrowabout 3 years ago
Convert to svg maybe?<p>For OpenStreetMap 136 bytes<p>&lt;svg xmlns=&quot;<a href="http:&#x2F;&#x2F;www.w3.org&#x2F;2000&#x2F;svg" rel="nofollow">http:&#x2F;&#x2F;www.w3.org&#x2F;2000&#x2F;svg</a>&quot; width=&quot;256&quot; height=&quot;256&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;path d=&quot;M0 0h256v256H0z&quot; fill=&quot;#aad3df&quot;&#x2F;&gt;&lt;&#x2F;svg&gt;
评论 #31117670 未加载
评论 #31117651 未加载
评论 #31118706 未加载
评论 #31118805 未加载
validuserabout 3 years ago
Why use an image at all when css background-color exists?
评论 #31120874 未加载
评论 #31120806 未加载
aidenn0about 3 years ago
gzip compressed (binary) pbm is only 56 bytes; 32 bytes for zstd compressed data. PBMs have a very simple header and no footer, so the file is almost entirely all zeroes.
评论 #31118435 未加载
meeritaabout 3 years ago
Takes more time to request it to the server and loading it in the browser than downloading the resource :)
schappimabout 3 years ago
Anyone else sometimes find it hard to upvote? [1]<p>[1] <a href="https:&#x2F;&#x2F;files.littlebird.com.au&#x2F;Shared-Image-2022-04-22-17-52-37.png" rel="nofollow">https:&#x2F;&#x2F;files.littlebird.com.au&#x2F;Shared-Image-2022-04-22-17-5...</a>