css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <img src="image.svg"/> tag, or as a background-image.

This techinique is tested & working in all modern browsers, IE9+ and Safari 9+. Run the image test yourself to see if it works in required browsers. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached.

This Pen is a fork of Shaw's Pen Pixels.svg (Pixels to SVG Conversion via <canvas>).


  1. @joeyhoer Command line tools are wonderful, but I prefer drag & drop :-)

  2. Nice Pen Tool! also... Shaw have you tried this? - https://pngmini.com/ It's from the "game design" world of tooling. Preserves the .png, but allows you to dither the "insides" to an 8-bit .gif we use it all the time and with many images we prefer a little dithering to jpeg artifacts at a similar size.

    TL;DR (https://calendar.perfplanet.com/2010/png-that-works/)

  3. @andyhullinger Yup, I use ImageAlpha all the time for sticking to a PNG but shrinking dramatically. However, the quality and size of JPNG.svg is usually even better than ImageAlpha. See this tweet for some comparisons. https://twitter.com/shshaw/status/896020734455271424

    I also did this writeup with my usual image optimization tricks that might be helpful: https://codepen.io/shshaw/post/image-optimization-tricks

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.