It’s super important to consider web image optimization when creating designs, and choosing the best file types to use for individual elements. Even though Flexitive makes this process easier with automated image resizing and smart compression, we’ve put some tips together to help designers identify the best file types to use when building static, or animated designs that are both high quality, and load quickly on all devices.
JPG
- Best for realistic photo compression (i.e. mountain landscapes), or complex static designs
- Images with solid color bands (illustrations) can also be exported as JPG if they have many colors and are complex.
PNG-24
- Best for images with transparency that also have your asset sitting above various colors. Great for product images that have transparent backgrounds, within HTML5 content.
- PNG-24 is also a good alternative to assets that would otherwise be in SVG format since they offer more compression. However, the downside is that you have to make sure the image resolution is high enough for your purposes.
PNG-8
- Best for images with fewer colors and solid color bands.
- PNG-8 is also a good alternative to assets that would otherwise be SVG format since they offer more compression. However, the downside is that you have to make sure the image resolution is high enough for your purposes.
- Is similar to GIF in that you must have a “matte” around your asset if there is transparency, but it greatly reduces file size.
GIF
- Great for animated images within emails, or for memes!
- The best way to create and showcase simple, short animations. Keep in mind, the file size may escalate quickly!
- Best for images with solid color bands (illustrations), not for images with many colors eg. gradients.
- GIFs are also a potential alternative to assets that would otherwise be SVG format since they offer more compression; however, the downside is that you have to make sure the image resolution (pixel size) is high enough for your purposes.
- Like PNG-8, requires a “matte” around your asset if it is transparent, but you can achieve smaller file sizes.
SVG
- The best format for vector shapes/illustrations/text/ because it offers infinite scaling without loss of quality. Use SVGs for high-resolution screens such as 4K+, if the image will be within HTML5 content.
- If your vector is too complex (too many curves/vertices) and requires transparency then it would be best to save a large-resolution PNG-24.
- Keep in mind that SVGs do not compress – they are one file and file size regardless of their physical dimensions. If there is a lot of text in your SVG or you are creating a button for a CTA and are worried about file size – consider using an auto-resizing text element within Flexitive rather than uploading an SVG.
To learn more about design automation visit flexitive.com or if you have any questions contact us to get in touch.
If you work for a brand or agency, request a Flexitive Enterprise demo and our solutions team will contact you to arrange a time.
If you found this post helpful, please share using the icons below!
