TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: Using SVG to Shrink Your PNGs

217 点作者 labwire超过 10 年前

18 条评论

ahoge超过 10 年前
There is a tool for that:<p><a href="https://github.com/mahonnaise/svgjng/" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mahonnaise&#x2F;svgjng&#x2F;</a><p><pre><code> java -jar svgjng.jar &lt;rgba image&gt; &lt;svgz file name&gt; [color quality] [alpha quality] </code></pre> It tries PNG and JPEG for RGB and alpha and then uses whichever ended up smaller.<p>Gallery: <a href="http://kaioa.com/b/1102/svgjng/index.html" rel="nofollow">http:&#x2F;&#x2F;kaioa.com&#x2F;b&#x2F;1102&#x2F;svgjng&#x2F;index.html</a><p>&quot;SVGZ (auto)&quot; means default parameters. I.e. just:<p><pre><code> java -jar svgjng.jar foo.png foo.svgz</code></pre>
评论 #8935820 未加载
grownseed超过 10 年前
About 3 or so years ago, the senior designer at my previous job submitted a hard design to a client containing a banner with not-quite-rounded-but-almost corners that had to have transparency and would have to change color over time. As senior dev then, I never got to approve the design before it got out and I can still remember the horror when I witnessed what he had done.<p>I ended up trying a whole bunch of different ways to solve the problem, one of which was very similar to this method. As the author points out however, this does not work in IE8 among other things, and at the time this was a requirement... I ended up using different combinations with different levels of quality depending on the browser, a true nightmare which ended up eating a third of the budget for no justifiable reason.<p>In any case, the fact that we have to go through tricks like this to achieve both transparency and decent compression is pretty disappointing. But what I find maybe even sadder is the amount of resources we sometimes spend on things which seem incredibly frivolous, to me anyway. I&#x27;m sure Sapporo have pretty deep pockets, which the author rightly took advantage of, but that doesn&#x27;t make it any less superficial.
评论 #8932225 未加载
评论 #8934413 未加载
aleem超过 10 年前
I think I have an idea on how to support IE8 and do this without SVG.<p>1. Create a JPG of the can and trim the edges off completely<p>2. Create a PNG of the can and remove the insides completely, leaving only the edges<p>3. Overlay the JPG on top of the PNG using CSS absolute positioning or background+foreground image or similar<p>Since the JPEG comprises only the inner part of the image, it doesn&#x27;t affect anything. The PNG comprises the outer edges of the image and you get the desired transparency on the edges.
评论 #8932639 未加载
评论 #8936085 未加载
ggambetta超过 10 年前
I&#x27;ve done this for years in the Mystery Studio game framework. Transparent PNGs were always split into a RGB and an Alpha mask. Most of the time it was fine to save the RGB as a relatively good JPEG (say 90%) but you could go crazy with the alpha mask - maybe JPEG 30% even.<p>The exceptions were the assets where the alpha channel was used for picking (e.g. to detect drag and drop on a puzzle piece). In that case the settings were overriden for that particular asset to something like PNG8 (which also compresses fine since most alpha masks are mostly black and white with only some grey pixels at the edges due to antialiasing).<p>That and auto-cropping the assets - the engine has the concept of a &quot;virtual canvas&quot; so we could have full-screen transparent PNGs with only a small button in it, which the pipeline would reduce to the area that had the contents; but on the engine side you just treated it as a full-screen image, so you could place it at (0, 0) and the button would still appear wherever the artist had put it.<p>We got crazy reductions in file size using this one weird trick! Good times.
neckro23超过 10 年前
Misleading title, but this is a really clever hack. I&#x27;m surprised I haven&#x27;t heard of it before, since JPEG&#x27;s lack of an alpha channel is a common complaint.
评论 #8932162 未加载
schmich超过 10 年前
Our team used pngquant (<a href="http://pngquant.org/" rel="nofollow">http:&#x2F;&#x2F;pngquant.org&#x2F;</a>) recently to reduce complex, high-res PNGs to about 33% of their original size. It gave us the size benefits of lossy compression while retaining the PNG alpha channel. It seems to be good enough to tide us over until WebP gains traction (not holding my breath).
评论 #8933359 未加载
cr3ative超过 10 年前
This is a clever alternative to PNG8. Even using some trick programs (ImageAlpha and ImageOptim) I could only get the PNG acceptably down to 457KB. Well done!
tantalor超过 10 年前
This is very useful in combination with CSS, <a href="http://sarasoueidan.com/blog/css-svg-clipping/" rel="nofollow">http:&#x2F;&#x2F;sarasoueidan.com&#x2F;blog&#x2F;css-svg-clipping&#x2F;</a>
jldugger超过 10 年前
Ah, I figured they were gonna vectorize the PNG ;)
drvortex超过 10 年前
Cool trick, but PNGs can be lossified using a simple lossy averaging filter, using reduced and optimized color palettes etc.<p><a href="https://tinypng.com/" rel="nofollow">https:&#x2F;&#x2F;tinypng.com&#x2F;</a> <a href="https://github.com/foobaz/lossypng" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;foobaz&#x2F;lossypng</a>
hahamrfunnyguy超过 10 年前
Nice hack, doesn&#x27;t work in IE8 but presumably IE8 users get the full-size PNG with transparency.
评论 #8932138 未加载
bsimpson超过 10 年前
You aren&#x27;t really shrinking a PNG though - you&#x27;re making a JPEG partially transparent.
评论 #8931533 未加载
cuu508超过 10 年前
A technique I&#x27;ve used in Android apps, is splitting PNG image into two JPGs: one with RGB data, and the other is greyscale with just the alpha channel. Store&#x2F;transfer them like this, and combine them back into RGBA at runtime.
dharma1超过 10 年前
used to do this all the time back in 30kb banners and flash days. highly compressed jpeg&#x27;s with vector masks. sure beat transparent png file sizes
评论 #8932439 未加载
ant6n超过 10 年前
I wonder how far they&#x27;d get by first reducing the image to 8bit with palettes (for example using image magic), and then using pngcrush etc.
benshyong超过 10 年前
This is great!
nailer超过 10 年前
Since transparency seems to be off&#x2F;on, could you use a 1 bit GIF for the mask instead?
评论 #8932667 未加载
ma2rten超过 10 年前
I though this was going to be about Singular Value Decomposition, a sort of compression technique.