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

1. Imageoptim Pc
2. Imagealphablending Gif
3. Alpha Phi Alpha Image

There are two images, the one on the left is processed by Retrobatch + the built in PNG Crush, and the one on the right is processed by ImageAlpha. The ImageAlpha version has its colors reduced to 256 and the file is 2.5 times smaller! That's a huge space savings with no. ImageCrop=-50,-30,100,60,5 Start at the Origin of 5 or 'Center'. Then move -50 pixels left (negative number is left, positive number is right) and -30 pixels up (negative number is up, positive number is down). Then capture 100 pixels of width, and 60 pixels of height, and that is the new image.

• ImageAlpha can achieve better quality than similar function in Adobe Fireworks by employing latest pngquant and pngnq-s9 and alpha-channel-aware posterizer. How to use it Drag true-color PNG image into main part of the window. Small images should be converted instantly. If image is large, there might be progress spinner visible for few seconds.
• ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greately reduces file sizes with only minor loss of quality. Such images are compatible with all browsers, and even.

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.

Bitmap

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

GIF

GIF (or “JIF” depending on what part of the internet you’re from) is used for a lot of simple animations. 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.

PNG

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.

Imageoptim Pc

JPEG

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.

SVG

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.

Production for this lesson

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 support@webflow.com

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

Web-quality imagery is always a balancing act between using the smallest possible file size while providing good image quality. Embedding a photo straight off your DSLR may look nice, but it will slow your website’s load to a crawl, while an over-compressed image may improve the speed of your site yet discredit the design and overall aesthetic.

For the two types of image assets we predominantly deal with – photos and icons/illustrations – we perform a mixture of image quality checks and compression techniques that work well in most case scenarios.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!

File Types and When to Use Them

There are three image file types we use when building websites: .jpg .png and .svg.

JPGs are best used for photos such as landscapes, scenery or people. For imagery in content, such as a blog article image, we aim for 20-70kb. Larger background photos can get up to 500kb, but 200kb is a good average.

JPGs are lossy (they recompress and degrade the image quality each time you export), and they don’t manage gradients very well. If you have a gradient in an image, sometimes you can separate the image into two cuts so that you can render the gradient in a separate background using CSS gradients instead.

PNGs are best for assets such as logos and icons because they support transparency and because logo and icons often use a more limited color palette – since PNGs achieve compression through a reduction in the number of colors.

A PNG can be lossy, but we typically use lossless, meaning every pixel is saved exactly without degrading the color palette, resulting in a higher-quality image.

SVGs have the best quality of all and are used for vector art due to their scalability. We often use them with logos, however, SVGs do create more work for the browser to render and can create sluggishness as the page loads, so the quality of your image should always be balanced against its complexity.

As an example of when we use PNGs and SVGs, compare the logos for Silver Screen Insider and Bozeman Websites. For the former, we used an SVG. For Bozeman Websites, because of the complexity introduced with CSS animation when a user scrolls down, we chose to use PNGs instead so as not to compromise browser performance.

Sometimes the best solution is a combination of both: for the logo on JTech’s website, the “JT” component is a PNG, but the “Celebrating 20 Years” is an SVG in order for it to retain its quality in all viewport sizes.

Optimization Techniques

In order to get the best possible results, it is important to optimize your images. To do so, we utilize three programs: ImageOptim (for JPGs and PNGs), ImageAlpha (for PNGs) and Scour (for SVGs).

Optimizing JPGs

ImageOptim reduces the file size of JPGs and PNGs. For large images, such as the ones we use for background panels, we cap dimensions at 1600x1200px. For content photos such as an image inserted in a blog article, we cap dimensions between 200-800px wide.

After resizing to its final resolution, the image is output in Photoshop using the best quality available. Each time we compress the image it loses some fidelity, so we prefer to rely solely on ImageOptim for compression rather than having Photoshop do a pass. Photoshop is noticeably less efficient: its “save for web” at quality 65 produces an image of equal file size but poorer fidelity than ImageOptim’s quality 85.

Retina JPGs

When targeting retina or other high-density displays, we’ve found it works best to save a single JPG at twice the resolution, but use higher compression, around 50-60 in ImageOptim, which can produce a high-quality image that looks good on both retina and standard, lower-density displays. This technique allows us to use a single asset for retina and standard displays rather than cutting and loading multiple versions and without quadrupling the size of our images.

Optimizing PNGs

For PNGs, we output from Photoshop using PNG 24 in their “save for web” option, then run it through ImageOptim. If it detects that the image is using fewer than 256 colors, ImageOptim will losslessly convert the image to a PNG 8, a simpler file format that can produce very light-weight files.

With ImageOptim, our final output of an image without too many complexities (minimal color, simple shapes, and resolution less than 200x200px) can range in size from 15kb down to under 1kb.

Optimizing Larger PNGs

For more complex images, if we can’t produce a file between 15kb and 50kb with ImageOptim, we use ImageAlpha. ImageAlpha is used to process PNGs from a PNG 24 (millions of colors) to a PNG 8 (256 colors maximum), changing the image from lossless to lossy, ultimately aiming for the one with the smallest number of colors.

Lossiness in this format primarily means strategic refinement of the color palette, eliminating the least-noticeable colors to produce an image that still looks great while reducing its complexity.

After exporting from ImageAlpha, we run it through ImageOptim so it can be optimized further.

Optimizing SVGs

Imagealphablending Gif

Alpha Phi Alpha Image

When it comes to SVGs, we reduce as much complexity as possible before we export the image from Illustrator. An often tedious process due to their size, we first try to reduce the number of layers to a minimum while still accurately displaying the artwork. It is then saved as an SVG in Illustrator and optimized with a program called Scour.

We use this automator script to make it a bit easier to use in macOS, allowing you to right-click an SVG file in the Finder and optimize the SVG through the Services menu. We often use font files for vector graphics that are single-color with a program called Glyphs.

Conclusion

Properly optimizing imagery is just another way we can improve the performance of our websites, prevent browser bloat, reduce server and bandwidth resource usage, hasten page load time, keep the development infrastructure clean and provide a much more desirable experience for the end-user.

We hope this exploration of our experience with JPG, PNG and SVG file types, image compression and quality tools are a resource for you as we continually refine our own process to produce websites of high caliber.

This post may contain affiliate links. See our disclosure about affiliate links here.