As a web designer, slicing a mockup or exporting optimized images can be some of the most annoying and time-consuming tasks you must undertake. Granted, some designers and developers don’t do any “slicing,” but at some point, the need to allocate images becomes necessary. Whether that image is part of an element’s background or a slide for a slider, slicing it, exporting it, and optimizing it can take you a some time – unless you decide to get Enigma64, that is.
Enigma64 is a Photoshop plug-in that addresses not only slicing, exporting, and optimizing images, but it also gives you the ability to use Base64 as a method of exporting your optimized image. If your workflow includes some of these steps, follow us after the break to learn more about this incredibly useful plug-in.
As stated above, Enigma64 is a Photoshop Plug-in that can cut, export and optimize your selection (layer(s), or the whole canvas) and give you a PNG or JPG file in little to no time; however, what makes Enigma64 cool is the ability to encode said layers into Base64 with the click of a button. This allows for a seamless, hassle-free implementation of images from Photoshop right into your code.
Essentially, Enigma64 is designed to streamline your workflow. For example, you may use a different application or web app to optimize your image and possibly another web app to then encode that image into Base64… let’s face it, that is probably about a minute (more if you are dealing with multiple images).
Also, before getting images optimized you need to actually export them, which, again, would take a few seconds. Enigma64 eradicates the need for all these separate services and puts them all together in one package that lives right inside the app you are already using to create these images.
What is Base64
Base64, as explained by Wikipedia, is “a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.” Now how does that apply to you?
Let’s use a web design example to explain Base64. Say you have a lot of thumbnails or slides on your website, those images together represent many server requests. Server requests increase the time your page takes to load. By encoding these thumbnails into Base64, you can basically convert those images into raw code that you can then paste right into your HTML, thus making your website faster.
You can read more about Base64 on the links provided on this page – http://getenigma64.com/faq/
Working with Enigma64
Working with Enigma64 is effortless, and once you’ve set it up for the first time with the settings you want, it becomes even easier to use — much easier than CSS Hat, even.
Enigma64’s friendly UI is designed with the idea of saving time in mind, so don’t expect 100 different settings to choose from; instead, Enigma64 only consists of two main options. This can be a little difficult to swallow for some, but the current options work fine with what the plug-in is intended for.
In our test runs, exporting and Base64 encoding performed extremely well. The Base64 code is saved on your clipboard, so all you have to do is paste that into an HTML image tag’s source attribute and you are set.
One thing to note is that if you are encoding a heavily-worked on canvas or layer, encoding may take a few seconds – nothing horrible or ridiculous, but it would be nice to get a little progress bar for the overall process.
Aside from that, Enigma64 is quite useful for someone that is going to be exporting images in this fashion. Encoding images is also very helpful in the development stages of a website; it’s also pretty cool seeing all those characters magically transform into an image.
Because this little plug-in is made by the same guys that brought us the amazing CSS Hat plug-in, you know it is going to work as advertised — if not better. With an extremely friendly UI, one-click encoding to Base64, and lossless image optimization, Enigma64 is a plug-in you are going to use often; mix it with CSS Hat plug-in and you have the perfect package when it comes to getting things done.
For the money savers out there, it is good to point out that both CSS Hat and Enigma64 have a rather high price. You can do some of these things for free with various different applications and web apps, but having the ability to do it all in one place with the click of a button is so useful, hassle-free, and time-saving that you may not even care how much they cost. After all, your time is money, too.