Streaming live at 10am (PST)

How to make lightweight large images with alpha transparency using SVG


#1

You want to use that high definition transparent PNG in the header of your site but whatever you can do it can’t be smaller than 2,5Mb?

Use the SVGIZE tool to transform your PNG24 into a JPEG+8but PNG Alpha inside of a SVG file. You will reduce your file size by 75% or so.

http://svgize.webflow.io

This tool was made by Vlad Danilov on my request and I’ve added an Automator Workflow for macOS so you can use it as a service in the finder with just a right click.

Download the tool and the workflow from here:

http://svgize.webflow.io


#2

I use a lot of PNG files to showcase my work, but they reach up to 4MB (HiDPI and interlaced for faster loading). I want them to be transparent so I can play with and animate the background. It would be a life saver if that actually worked well.

I’m giving it a try and this happened, do you know how can I resolve it?


#3

It seems it can’t find the program… I’m not a developer so I can’t really help to resolve your issue… i’ll ask though but I don’t know when I’ll have an answer.

You can test the same process online if you want, I’ve been inspired by http://quasimondo.com/ZorroSVG/ which doesn’t exist as an app sadly, but works very well.

It seems this format is exactly what you’re looking for… come back and tell me how much you saved off those 4mb :slight_smile:


#4

I wasn’t much familiar with Automator but I assume it generates scripts and works like actions in PS.

I’ve checked the online tool, and it’s 20% of the original size easily. I will do some more tests and probably be more careful with the quality, but it does the job great and seems to work well with the semi-transparent pixels. Now I wish there was a proper tool like a PS script and more control over it.

I’ve been in love with SVG lately and now I’m even more. It is a life saver, so thanks a lot for posting! :slight_smile:


#5

But have you properly installed the program SVGIZE before using the automator service?


#6

I figured that as long as we can’t use webp, there is no alternative if you want a big fat transparent image to play with.


#7

It was added to my Services library automatically when opened and it appears in the context menu so I believe I did.


#8

No I mean the app. The Automator thing is only to link the app to the Services menu.

On my page, there are 2 buttons, one links to GIT where you have to follow the instructions to install SVGIZE.