How to Use AVIF images

Erisan Olasheni — Mon, 09 Nov 2020 13:23:38 +0000

In this tutorial, we shall be talking about a new way to distribute images better. The technology world is restless in providing better ways to serve media across. Images are apparently the most common media anywhere in the world, as a result, this has brought about many formats to represent it better. The most popular formats include JPEG, PNG, GIF, WEBP and .... but wait, AVIF! — the newcomer!

What Is AVIF?

AVIF stands for AV1 Image Format, as at the time of this writing, AVIF is the newest acceptable image format on earth. It is an extraction of frames from the now popular AV1 video stored in the HIEF file format. AVIF is created by Alliance for Open Media (AOM), the same organization that developed the AV1 video, with contributions from other tech giants like Google and Apple.

The purpose of creating AVIF is to provide images with better compression efficiency and more feature support compared to the existing image formats and it has just spelled the need. AVIF is royalty-free, making it easy for you and me to adopt. AVIF version 1.0.0 was released in February of 2019.

What This Means for a Web Developer?

As a web developer, this is just a new way to serve your content better and lighter to your users. The web page comprises about 51% media, having images claiming the larger portion of it, and because images claim the bigger part of a web page size, AVIF is just a solution to drastically improve your web pages speed, which also means a change to user satisfaction and SEO in whole.

Why Choose AVIF?

Whether you are a developer, blogger, or graphic artist, here are a few of the many reasons you should fall in love with AVIF:

Currently backed by the giants in tech like Google, Amazon, Netflix, Microsoft, and more.
It is royalty-free, free to use for everyone without paying.
It currently allows the highest compression possible.
Because it’s just a frame extraction from AV1 video, it also ships with the features provided by AV1 video codec, these include transparency, HDR, wide color gamut, and more.

A greater chance that AVIF will be the next big thing for media because of its extreme gap in compression size, experiments show that AVIF could save up to 80% less than the other known formats.

How to Create Images AVIF format?

The easiest way to create images in AVIF format is to convert your old files to AVIF format first, having the .avif file extension. Don’t worry, this is simpler than you think. Because AVIF is new, there are few to zero application software that currently offers this, but I am happy to tell you that there’s an online solution. This online AVIF converter is currently the fastest converter available to quickly transfigure your old formats to AVIF. All you need to do is:

Visit the Online converter.
Upload your old formats (can be PNG, JPEG or GIF).
Wait while it processes on the server.
Download and save your new AVIF files.

Use AVIF on your Website

Even though AVIF has been adopted almost by all web browsers, because of its new age, chances are that your users current browser might not have been update yet, it is still necessary to use content negotiation when importing AVIF on your websites:

<picture>
<!-- use AVIF image if the browser supports it -->
<source type="image/avif" srcset="sample.avif">
<!-- in case the browser does not support AVIF -->
<img alt="A Fallback image" src="sample.jpg">
</picture>

AVIF Support

Chrome 85 is the first browser to fully support AVIF, starting from the Chromium version 85, released in August 2020.
Mozilla is working on support for the image format in Firefox.[155] Cloudflare announced AVIF support in a blog post on 3 October 2020.
Microsoft also included support for AVIF in the Windows 10 "19H1" updates.

I want to believe that you are now convinced to start using AVIF in your next projects, what about your previous projects? Make your web pages media lighter now by using the latest image format, let me know your opinion in the comments below!

Using target=_blank The Malicious Way

Erisan Olasheni — Wed, 13 May 2020 08:24:45 +0000

HTML Links are the tool that connects your web pages together, and makes it a website. We will be discussing how this great tool can be maliciously used against your website (and maybe your dearly users). This is what many web designers/developers are not aware of.

Fun Fact: A website is a collection of web pages, that are linked together with URLs and hosted to the server. Links as the name implies links your web pages together, what that also mean is that without web page links there's no web site! We just have chunks of web pages, hugh!

That Malicious Story

Anyways, website is not the topic for today but web page links is. When you use a target="_blank" on your <a> (or whatever) link, the browser will be informed about the old page or the referring page, that sounds okay right??? No! Wait one more thing, the browser can also control the referring page! This is where the problem comes, the browser also provides a window.opener object which allows you to partially interact with the referring page. This exposes the website to controls like:

Run the same process as your web page, running some JavaScript that might affect your page's performance.
Partially control your web page (the page from which a user opened another page). By redirecting it to a malicious URL.

That's Horrible Hugh!

I know at this time, your possible question would be how then can I avoid this, it's simple! The rel attribute came to rescue! How??? Yes, of course we are going to talk about that but before then, let's talk about a more step-by-step case of how an attacker can abuse your links.

Some Use Cases

You directed a user to an external web page
The attacker uses some JavaScript on the new page to change the location of the referring page to a phished page that looks exactly like the former web page through window.opener.location
The user comes back only to see the same page because there's no significant different from it and the new phished page. User continues interaction === attacker gains access .

The Solution

Okay, back to How can I prevent this? The solution for this is to use rel="noopener" or rel="noreferrer" on your <a href ... tags, this blocks the browser from carrying your precious information over to a stranger website.

rel="noopener", tells the browser not to give information about your website
rel="noreferrer" I am like my brother, but I also block the HTTP Referrer from being sent to the header of the new page.

Safe Use

To be sure all is save, always use both the noopener and noreferrer values, as it was reported that some browsers does not support the noopener, but all browsers tend to support the noreferrer.

Example

<a rel="noopener noreferrer" href="https://lyty.dev/html/html-link.html" target="_blank">HTML Links</a>

A preview of how this works can be seen on the link in the first paragraph of this page. Feel free to inspect it on your browser to confirm the actions.

Good As Go!

DEV Community: Erisan Olasheni