ImageAlpha greatly reduces file sizes of 24-bit PNG files (including alpha transparency) by applying lossy compression and conversion to a more efficient PNG8+alpha format. Such images are compatible with iOS, all browsers, and even degrade well in IE6. アルファチャンネルを維持したまま圧縮できるImageAlpha 【ImageAlpha】 透過を保ったままPNG画像の圧縮が可能なMacアプリ。設定により色数を256色以下に抑えることもできます。ImageOptimとの連携も可能です。 画像変換にも使えるPNGGauntlet 【PNGGauntlet】.

Learn about bitmap, GIF, PNG, JPEG, and SVG.

  • Maybe a helpful alternative for a plain-colored background:. Put a LinearLayout over the ImageView and use the LinearLayout as a opacity filter. In the following a small example with a black background.
  • ImageAlpha + ImageOptim – for optimising image assets. Lightroom CC – I used to swear by Aperture but recently switched to Lightroom as I got frustrated by the stagnated development of Aperture by Apple. Moom – for resizing windows while working and to realigning windows when switching displays/display set-ups. If you're constantly.
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Images and other graphics can often make or break a design. And we’ll start here with image file types. We’re going to focus on bitmap, GIF, PNG, JPEG, and SVG. These are the most common image file formats used on the web. You can mix and match these depending on what works best for each image in your project.


Don’t use this on the web because bitmap files do not support compression and output very large file sizes.



GIF (or “JIF” depending on what part of the internet you’re from) is used for a lot of simple animations. Macos mojave 10.14.6 combo update. It only supports 256 colors, and if that’s all you need, it might be an option for you. GIFs also allow for transparency, but they don’t support alpha transparency. This means anything other than absolutely opaque or absolutely transparent won’t show up that way.


This is a great file format if you need transparency—specifically if you need alpha transparency.

PNG comes in two flavors—8-bit and 24-bit. The 8-bit version is a smaller file that only holds 256 colors and lacks full transparency settings. The 24-bit version is a larger uncompressed file that holds 16 million colors and supports alpha transparency. Both can be used on the web, but 24-bit PNG is usually preferred for its alpha transparency. Tools like ImageOptim[↗] and ImageAlpha[↗] can also be used to compress a 24-bit PNG file to 256 colors to cut down the size by more than half while retaining the alpha transparency.


The JPEG is an extremely common format. It supports compression in a way that cuts down file size more than any other image type.

JPEG compression

JPEG does a great job at compressing file size. Let’s take an image in JPEG format with a file size of just over 300 kilobytes.

Note that this same image in bitmap format at the same resolution and dimensions can be over 50 megabytes. That means the bitmap file is over 150 times the size. That’s because bitmaps contain precise data about each and every pixel. That’s a ton of information. So when you save a bitmap, think of this patch of gray pixels as being stored as “gray pixel, gray pixel, gray pixel” and so on.

When creating a JPEG, this area can be heavily compressed without losing the essence of the image. That means we probably don’t need all this precise, repetitive data for each and every one of these pixels. So JPEG is a pretty great, flexible format.

Ben Markowitz Photo Alpha Dog


Finally, we have SVG—scalable vector graphics. The wonderful thing about vector graphics is that instead of having fixed pixels as you would in any of the other formats, SVGs aren’t resolution-dependent.

You can scale them infinitely with really great results. And in most cases, SVGs are used for shapes, text, sketches, logos.

For photographs which are made up of actual pixels, you’re much better off choosing one of the other formats.

SVG support

SVG images aren't supported for product and variant image fields. They aren't supported for Ecommerce email brand logo either. That's because these images will be used in Ecommerce emails (ex. order confirmation) and SVGs aren't supported in many email clients such as Gmail.

Try Webflow

Production for this lesson

Directed by

Produced by

Written by

Article by

Edited by

Designs by

Thanks for the feedback! This will help us improve our content.

If you still need help or guidance:

Something went wrong while submitting the form. Please contact [email protected]

Got a lesson suggestion? Let us know

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback

Oops! Something went wrong while submitting the form.
This video features an old UI. Updated version coming soon!

Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.

Table of Contents

📣 Summary

While other image optimization tools are available from the command line, ImageOptim-CLI exists because the current benchmarks suggest that ImageOptim, ImageAlpha and JPEGmini currently outperform those alternatives over lossless and lossy optimizations.

ImageOptim-CLI is written in TypeScript and AppleScript but is distributed as a self-contained executable binary, you don't need Node.js installed to use ImageOptim-CLI.

Check out this short video demo of ImageOptim-CLI to see how it works.

🌩 Installation


Otherwise, you can install manually by downloading the latest release then adding ImageOptim-CLI to your $PATH.

Saving somewhere in your home directory such as ~/imageoptim-cli is recommended, but not essential. Saving to /Applications is not recommended, do not do this.

🕹 Usage

⚠️ JPEGmini and support for assistive devices

You may be presented with the following message the first time you run ImageOptim-CLI with the --jpegmini flag.

To automate JPEGmini we need to add (or etc) to the 'support for assistive devices' whitelist.

The JPEGmini OS X Apps don't include a command line API, so a real user is simulated by entering synthetic clicks and keyboard commands instead. This requires your permission and is easily set up in System Preferences as shown by these guides.

💡 Related Projects

Grunt Plugin

The ImageOptim-CLI Grunt plugin is grunt-imageoptim.

Comparison of image optimization tools

ImageOptim-CLI features in this comparison of the performance of image optimisation tools alongside, CodeKit, grunt-contrib-imagemin,, and TinyPNG.

Article for Smashing Magazine

Alfred Workflow

The ImageOptim-CLI Workflow for Alfred app is alfred-image-optim-workflow



Do ImageOptim, ImageAlpha, or JPEGmini come bundled with the ImageOptim-CLI installation?

You will need to install these applications separately.

Do I have to pay to use ImageOptim-CLI?

The CLI, ImageOptim and ImageAlpha are all free. JPEGmini is a paid-for product but you can use ImageOptim-CLI and choose not to run JPEGmini.

The WebP image format looks promising, can you get ImageOptim-CLI to convert images to it?

WebP looks great and may well overtake the formats handled by ImageOptim-CLI, but converting images to WebP is outside ImageOptim-CLI's chosen remit.

Can you get ImageOptim-CLI to skip images it has already processed, if they haven't changed?

JPEGmini does this today, but for ImageOptim and ImageAlpha I feel a feature like this belongs in those applications rather than this automator.


ImageOptim makes the fans on my Mac run at full power.

Optimising images is a pretty intensive process, so instead of optimising one image at a time (which would take forever) — ImageOptim optimises many images at the same time until all of them are done.

A side effect of this is that the fans come on at full power to keep your machine cool while it's maxed out.


I don't think ImageAlpha is running, I can't see anything.

ImageOptim-CLI uses ImageAlpha's internal installation of pngquant so it's normal that nothing is shown on screen.

It's also possible that if you look in the Activity Monitor you will not see pngquant displayed but it is being run. In my experience it's only when you run ImageOptim-CLI on a very large number of PNGs that you have enough time to spot it. ensure that Activity Monitor's Update Frequency is set to Very Often (1 sec).


Can I use ImageOptim-CLI with JPEGmini Lite, the free version of JPEGmini?


I upgraded from JPEGmini Lite to JPEGmini but ImageOptim-CLI still says JPEGmini is not installed.

Performing the in-app upgrade leaves the app named as jpegmini-lite, so ImageOptim-CLI can't determine whether it's the free or full version. It is better to instead buy the full version of JPEGmini separately.

Alpha Phi Alpha Image

ImageOptim-CLI says “To automate JPEGmini we need to enable GUI Scripting”, how do I do that?

See this tutorial on how to manage Accessibility preferences and GUI Scripting. In the case of OS X Mavericks, you will want to add the Applications JPEGmini and Terminal (or equivalent such as iTerm).

Windows and Linux

Can I use ImageOptim-CLI on Windows or Linux?

ImageOptim-CLI is responsible for automating 3 OS X applications so is inherently bound to OS X for that reason.

Are there any plans for ImageOptim-CLI to support Windows or Linux?

Alpha Images Photoreflect

It would first require ImageOptim, ImageAlpha, and JPEGmini to be available for those platforms.

I don't have OS X, can you recommend an alternative to ImageOptim-CLI?

@addyosmani wrote a really thorough article on tools for image optimization which discusses a wide range of options in great detail.

⚙️ Contributing

Have an idea? Found a bug? Please see the Contributing Guide for information on how to install the project and start writing code.

🙋🏿‍♀️ Getting Help


Get help with issues by creating a Bug Report or discuss ideas by opening a Feature Request.

👀 Other Projects

If you find my Open Source projects useful, please share them ❤️

Imageoptim Pc

  • eslint-formatter-git-log
    ESLint Formatter featuring Git Author, Date, and Hash
  • eslint-plugin-move-files
    Move and rename files while keeping imports up to date
  • eslint-plugin-prefer-arrow-functions
    Convert functions to arrow functions
  • Jasmine-Matchers
    Write Beautiful Specs with Custom Matchers
  • karma-benchmark
    Run Benchmark.js over multiple Browsers, with CI compatible output
  • self-help
    Interactive Q&A Guides for Web and the Command Line
  • syncpack
    Manage multiple package.json files, such as in Lerna Monorepos and Yarn Workspaces

New Image Alpha Lipid Colostrum

🤓 Author


I'm Jamie Mason from Leeds in England, I began Web Design and Development in 1999 and have been Contracting and offering Consultancy as Fold Left Ltd since 2012. Who I've worked with includes Sky Sports, Sky Bet, Sky Poker, The Premier League, William Hill, Shell, Betfair, and Football Clubs including Leeds United, Spurs, West Ham, Arsenal, and more.