Your visual assets could take up half the space and load twice as fast— here’s how 🤓
If regularly deal with visual assets, you know the jungle of file formats that are used to store graphics, photo and video assets. The choice of video and photo formats, along with the level of compression applied, greatly influences website performance. By carefully selecting efficient formats and optimizing compression, you can achieve a faster and more sustainable website, and a better archive of digital assets.
_______________ |*\_/*|________
| ___________ | ||_/-\_|______ |
| | | | | | | |
| | 0 0 | | | | 0 0 | |
| | - | | | | - | |
| | \___/ | | | | \___/ | |
| |___ ___| | | |___________| |
|_____|\_/|_____| |_______________|
_|__|/ \|_|_.............._|________|_
/ ********** \ / ********** \
/ ************ \ / ************ \
-------------------- --------------------
This article has no images to save on size of this webpage.
I'm experimenting using these code snippets instead :)In this article, we will explore the most efficient formats for video and photo assets, including the benefits of H265/HEVC, the distinction between vector and raster images, and how you should be compressing your assets.
Video Assets are evolving
).\ (o)
\`,/~/\___
,/ \,
.-./ | ... \._ /|
| o |_| |__} ._III |
'-' | ,/ \|
`-------'
||
||
||
||
//\\
//||\\
// || \\
// || \\
// || \\
// || \\
==== ==== ====
Art by Joan StarkWhile H.264 (AVC) has been widely used as a video codec, H.265 (HEVC) emerges as a superior alternative. H.265 offers significantly improved compression efficiency, reducing file sizes while maintaining high video quality. However, it’s important to note that H.265’s compatibility is still limited on older devices, and generally requires more power to be played, making the format ideal for storing video.
Another format, VP9, stands out as the most efficient option in terms of both power consumption and file size. VP9 delivers high-quality video while minimizing bandwidth usage, making it ideal for online streaming. It is however not commonly used by videomakers and for the storage of video assets.
Understanding Photo and Graphic Assets
When it comes to photographic images, WEBP emerges as an efficient alternative to JPEG. WEBP provides superior compression capabilities, resulting in smaller file sizes without sacrificing image quality. By utilizing WEBP, you can significantly reduce the space required for image assets while maintaining visual fidelity. PNG can also be used as a relatively efficient format for images, but is not recommended for photography.
When it comes to graphic assets, understanding the difference between vector and raster images is crucial. Vector images, like SVG (Scalable Vector Graphics), use code to define shapes and lines, resulting in infinitely scalable graphics with no quality loss. In contrast, raster images, such as JPEG, WEBP and PNG, are composed of a fixed grid of pixels and are better suited for photographs and complex visuals.
For graphic elements like logos, icons, gradients or illustrations, vector SVGs are a must (unless the design is extremely complex). They offer smaller file sizes and are resolution-independent, offering maximum sharpness across different resolutions and faster loading times without any loss in quality. Their downside is that they are not as easy to edit as raster formats since they require software like Adobe Illustrator that you might not have available. Moreover, the preview of SVG is not supported by most common tools — for example, Slack supports the preview of transparent PNG images, but lacks the support for SVG files. But you should use it despite these inconveniences, and say goodbye forever to pixellated logos!
Space-saving Potential
The use of high-efficiency formats like H.265 for videos and WEBP for images can yield substantial space savings. With H.265, you can achieve up to 50% reduction in file sizes compared to H.264, resulting in faster video loading times and reduced bandwidth consumption. Similarly, WEBP’s advanced compression algorithms can save up to 30% more space compared to JPEG, leading to quicker image loading and improved website performance.
Does it fit on a floppy disk?
.---------------------------------.
| .---------------------------. |
|[]| |[]|
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| `---------------------------' |
| __________________ _____ |
| | ___ | | |
| | | | | | |
| | | | | | |
| | | | | | |
| | |___| | | |
\_____|__________________|_____|__|
Art by David PalmerWhen it comes to SVG over PNG for a logo, the space saving can be up to 99.9% and about 85% in common cases. These major savings come with no quality loss at all, which makes the format a no-brainer. There is more to say about this vector format: it is possible to animate any SVG element in a website using Javascript, and they represent an alternative to H265 or V9 when you are dealing with a simple video that is using only graphics — and everything can be interactive! SVG videos are a technical challenge, but the results can be amazing.
How much should I compress my assets?
For all the formats mentioned in this article (apart from SVG), you can have to choose a resolution and compression level, and it’s not easy to find the best compromise.
Resolution refers to the number of pixels that make up an image or video. Higher resolutions result in more detailed and sharper visuals, but they also require more storage space and may take longer to load. Compression level, on the other hand, relates to the amount of data reduction applied to an image or video during the compression process. Compression algorithms remove redundant or less essential information, resulting in a smaller file size. However, higher compression levels can also lead to a loss of quality and detail or visual artifacts.
/| /| --------------------------------------------------
||__|| | The optimal combination between compression |
/ O O\__ and resolution will depend on factors such as |
/ \ use case, target audience, system |
/ \ \ and available bandwidth. |
/ _ \ \ ---------------------------------------------
/ |\____\ \ ||
/ | | | |\____/ ||
/ \| | | |/ | __||
/ / \ ------- |_____| ||
/ | | | --|
| | | |_____ --|
| |_|_|_| | \----
/\ |
/ /\ | /
/ / | | |
___/ / | | |
|____/ c_c_c_C/ \C_c_c_cFor example, digital assets that you plan to archive in a DAM should not be excessively compressed to preserve the possibility to further edit them. Moreover, most DAM are able to provide the assets compressed just for the use you need them for.
Let’s delve a little deeper in video compression. “Bitrate” refers to the amount of data processed per second in video files. It affects both the file size and visual quality. Higher bitrates result in larger file sizes but offer better visual fidelity, while lower bitrates reduce file sizes but may result in a loss of quality.
Tools like YouTube compress the video in VP9 for you (that’s why you can stream good quality video with the worse connection!), no matter the format and bitrate you hand it in, and do all the optimization work for you. You should still keep these factors in mind for the storage of your assets, or if you don’t use a service like YouTube.
Conclusion
Optimizing video and photo assets is vital for achieving a better, faster and more sustainable asset management.
Consider using efficient formats like H265 or VP9 for videos and vector images like SVG for graphics. Keeping in mind the distinction between vector and raster images helps choose the appropriate format for different types of visuals.
,----------------, ,---------,
,-----------------------, ," ,"|
," ,"| ," ," |
+-----------------------+ | ," ," |
| .-----------------. | | +---------+ |
| | | | | | -==----'| |
| | Compress your | | | | | |
| | digial assets | | |/----|`---= | |
| | wisely ;) | | | ,/|==== ooo | ;
| | | | | // |(((( [33]| ,"
| `-----------------' |," .;'| |(((( | ,"
+-----------------------+ ;; | | |,"
/_)______________(_/ //' | +---------+
___________________________/___ `,
/ oooooooooooooooo .o. oooo /, \,"-----------
/ ==ooooooooooooooo==.o. ooo= // ,`\--{)B ,"
/_==__==========__==_ooo__ooo=_/' /___________,"
`-----------------------------'
Illustration by Kevin LamAsk the photographers, designers and videomakers to deliver in the most efficient format possible, and be mindful about the compression level. And make sure to store your assets properly 😉
By implementing these strategies, you can enhance website performance, reduce bandwidth consumption and storage space needed, and deliver an a high quality user experience while ensuring sustainability.
Want to learn more about how to reduce the footprint of digital assets? Check you this blog post written by my thesis supervisor, Rahel Baile.
As a final reflection, sometimes you do not need a video or a photo.
Switching to ASCII, however, could be a little bit of an extreme move...
▓▓██
██▒▒████
██▒▒▒▒▒▒▓▓
▓▓▓▓▓▓ ██▒▒▒▒▒▒██
██▒▒▒▒▓▓████████████████████████████████████████████
▓▓░░░░▒▒▓▓▓▓██░░ ░░ ░░ ▓▓▒▒▓▓▒▒▒▒▒▒▒▒
▓▓░░░░▒▒▒▒▒▒▓▓██░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▓▓▒▒▒▒▒▒▒▒▒▒▓▓
▓▓▒▒▒▒▒▒▓▓▓▓██░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▓▓▓▓▓▓██████████████████████████████████████████
▓▓▓▓▓▓ ██▓▓▓▓▓▓██
░░ ██▒▒▒▒▒▒██
██▒▒▓▓▓▓
████References
PHILIPPOT, O. (2017, May 10). WebP, PNG, JPEG: Energy battle on Android. Greenspector. https://greenspector.com/en/webp-png-jpeg-energy-battle-on-android/
Baile, R. (2023). Reducing the Carbon Footprint of Visual Assets. Retrieved 2 June 2023, from https://www.icpnet.com/resources/blog/reducing-footprint-visual-assets
Uitto, M. (2016). Energy consumption evaluation of H.264 and HEVC video encoders in high-resolution live streaming: IEEE 12th International Conference on Wireless and Mobile Computing, Networking and Communications, WiMob 2016. Wireless and Mobile Computing, Networking and Communications (WiMob), 2016 IEEE 12th International Conference On, 1–7. https://doi.org/10.1109/WiMOB.2016.7763234
PNG vs. SVG: What are the differences? | Adobe. (n.d.). Retrieved 2 June 2023, from https://www.adobe.com/creativecloud/file-types/image/comparison/png-vs-svg.html
