added content
This commit is contained in:
Nico
parent
bf2221b9a9
commit
9b91b02d90
79 changed files with 3053 additions and 284 deletions
42
src/content/articles/en/2022.md
Normal file
42
src/content/articles/en/2022.md
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: Nico v2.0
|
||||
subtitle: 2022 update of many things.
|
||||
lang: en
|
||||
slug: "2022"
|
||||
excerpt: Changes in my services, the website and myself.
|
||||
tags: ["Freelance"]
|
||||
createdAt: "2022-06-08T14:24:06.000Z"
|
||||
---
|
||||
|
||||
After two years of full-time freelancing, I took a step back from my activity. I especially questioned my positioning and the services I was offering.
|
||||
|
||||
## Services
|
||||
|
||||
### No more print
|
||||
|
||||
Even though I am trained in branding, I rarely do it and do not practice it in my free time. The same goes for "classic" graphic design. Posters, flyers and other leaflets have disappeared from my quotes for a long time. It seems logical to me to no longer explicitly offer these services because I consider that I am no longer sufficiently competent or interested.
|
||||
|
||||
### Internet all the way
|
||||
|
||||
On the other hand, I spend my time **doing web stuff.** A lot of development, some design and a fait amout of server configuration. It is therefore obvious for me to offer **more specific web offerings,** in which I have specialised.
|
||||
|
||||
Thus, **accessibility** and **eco-design** become integrated expertises in my practice. They are no longer options on a quote but **my core business.**
|
||||
|
||||
## The website
|
||||
|
||||
I have reworked my website, especially the homepage and its content, to better reflect these decisions.
|
||||
|
||||
I have also made several behavioural changes:
|
||||
|
||||
- external links no longer open in a new window. I read <a href="https://css-tricks.com/use-target_blank/" rel="noopener noreferer">this article</a> about opening links in a new window and I haven't found a good reason to continue using this behaviour;
|
||||
- I have removed the open graph and twitter card meta tags as I fully agree with <a href="https://twitter.com/HTeuMeuLeu/status/1370310316496728065" rel="noopener noreferer" hreflang="fr">this opinion (in french)</a> by [@HTeuMeuLeu](https://twitter.com/HTeuMeuLeu);
|
||||
- <a href="https://twitter.com/HTeuMeuLeu/status/1370310312214339586" rel="noopener noreferer" hreflang="fr">same for the favicon</a>;
|
||||
- I only trigger animations if the user has not asked the system to reduce the amount motion [(reference)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
|
||||
|
||||
I am working on reducing the weight of my pages as much as possible, although I will certainly have to change tools (again) (hello [astro](https://astro.build/) 👀).
|
||||
|
||||
## Le Nico
|
||||
|
||||
On a personal level, I have committed myself to a more responsible digital world by joining the <a href="https://www.good-it.org/" rel="noopener noreferer" hreflang="fr">Good-it! (in french)</a> collective and by actively participating in its development.
|
||||
|
||||
I have also started teaching in several schools. I mainly intervene on digital courses by teaching design and development. I take this opportunity to to make future generations aware of accessibility and eco-design.
|
||||
116
src/content/articles/en/after-effects-expressions.mdx
Normal file
116
src/content/articles/en/after-effects-expressions.mdx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
title: After Effects Expressions
|
||||
subtitle: Animation on steroïds.
|
||||
lang: en
|
||||
slug: "after-effects-expressions"
|
||||
excerpt: Expressions in After Effects have always been blurry for me. I know they exist, I know they're powerful, I know it could save a lot of time and clean complex keyframe filled compositions but… They are hard to learn!
|
||||
tags: ["Design"]
|
||||
createdAt: "2019-04-24T09:00:00.000Z"
|
||||
code: true
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const basicExpression =
|
||||
"https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg";
|
||||
export const shortcut = "https://assets.nardu.in/shortcut_39cc19d383.jpeg";
|
||||
|
||||
## An ever lasting battle
|
||||
|
||||
There is very little documentation and the existing one is hard to find or very old. Very often I just don't have the time to dive into expression learning while animating even though it could help the entire project on the long term.
|
||||
So the last time I had to do a complex animation, **I took the damn time!**
|
||||
|
||||
## The begining of the end (of keyframes).
|
||||
|
||||
Everyone uses expressions whether they know it or not. Most of the time it's a rather transparent process for the animator. For example: when parenting a property to another one, After Effects creates an expression for us.
|
||||
|
||||
<AstroImage
|
||||
src={basicExpression}
|
||||
width="728"
|
||||
height="80"
|
||||
alt="Parenting the position of the form to a null creates an expression."
|
||||
/>
|
||||
|
||||
Over the last updates, Adobe has made an effort to make expressions more accessible to everyone. For example, the expression box is now resembling a code editor thanks to code-coloring and auto-completion features. After Effects expression feel like JavaScript with custom functions.
|
||||
|
||||
Those custom functions can be called through a menu once you enabled the expressions on a property. It offers organized shortcut and proper syntax to all of AE native functions and a bunch of JavaScript standard ones.
|
||||
|
||||
<AstroImage
|
||||
src={shortcut}
|
||||
width="728"
|
||||
height="322"
|
||||
alt="Alt + Click the stopwatch to access the shortcuts."
|
||||
/>
|
||||
|
||||
## So I need to learn javascript to do motion design now?
|
||||
|
||||
### Why bother?
|
||||
|
||||
I know that most animators don't have any kind of development background. However, if Adobe thought it best to let us use expressions, I think we ought to, at least, try.
|
||||
|
||||
> A lot of incredible professionals like [Mt Mograph](https://www.mtmograph.com/) and [Video Copilot](https://videocopilot.net/) use expressions.
|
||||
|
||||
Like every optimization process, building an expressions knowledge takes time. However, like all optimization process, you will benefit from it afterwards.
|
||||
|
||||
### Where to learn
|
||||
|
||||
I've gathered a list of my favourite learning grounds. Plenty more exist, **go get'em!**
|
||||
|
||||
- [Adobe official expression starter guide (FR)](https://helpx.adobe.com/fr/after-effects/using/expression-language-reference.html)
|
||||
- [Adobe official expression basic (EN)](https://helpx.adobe.com/after-effects/using/expression-basics.html)
|
||||
- [Adobe forums for expressions](https://community.adobe.com/t5/after-effects/bd-p/after-effects?page=1&sort=latest_replies&filter=all&topics=label-expressions)
|
||||
- [Creative Cow expressions forums](https://creativecow.net/forums/forum/adobe-after-effects-expressions/)
|
||||
- [Youtube channel about expressions](https://www.youtube.com/playlist?list=PLvr5U5ZSt6IzHyvSL9fo0M9NRPsTvra31)
|
||||
- [All expressions explained](http://aescript.jecool.net/reference/)
|
||||
- [All expressions explained again](http://expressions.aenhancers.com/index.html)
|
||||
- [Nice examples of basic expressions](https://www.schoolofmotion.com/tutorials/amazing-expressions-in-after-effects)
|
||||
|
||||
## Real world example
|
||||
|
||||
### Number counter
|
||||
|
||||
Let's say you need to animate a rather simple counter from 0% to 100%.
|
||||
|
||||
- Start by creating a text layer. Define your typographic choices, colours, etc.
|
||||
- On the effect menu add expression options > slider control
|
||||
- Alt + Click the Source text property
|
||||
|
||||
<video width="728" loop controls preload="metadata">
|
||||
<source src="https://assets.nardu.in/alt-counter.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
- Parent the source text to the slider control through the pickwhip.
|
||||
|
||||
<video width="462" loop controls preload="metadata">
|
||||
<source src="https://assets.nardu.in/pickwhip.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
You should get something like this in the expressions panel:
|
||||
|
||||
```javascript
|
||||
effect("Slider Control")("Slider")
|
||||
```
|
||||
|
||||
- Set two keyframes on the slider from 0 to 100. The text should update accordingly.
|
||||
- By default, After Effects does not round numbers. In the expression panel, wrap your expression with the `Math.round()` function.
|
||||
|
||||
<video width="728" loop controls preload="metadata">
|
||||
<source src="https://assets.nardu.in/round.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
```javascript
|
||||
Math.round(effect("Slider Control")("Slider"))
|
||||
```
|
||||
|
||||
Great! We have a working counter. But we wanted a percentage counter. We could add a % glyph in another text layer but let's not.
|
||||
|
||||
Still in the expression panel, we're going to add a string containing the % glyph, using basic JavaScript concatenation: `+ '%'`
|
||||
|
||||
```javascript
|
||||
Math.round(effect("Slider Control")("Slider")) + '%'
|
||||
```
|
||||
|
||||
<video width="538" loop controls preload="metadata">
|
||||
<source src="https://assets.nardu.in/percent.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
**And there we go!** A fully functioning and customizable counter using a slider controller and expressions.
|
||||
11
src/content/articles/en/faq.md
Normal file
11
src/content/articles/en/faq.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Accessibility and sobriety
|
||||
subtitle: Translation in progress, stay tuned ;)
|
||||
lang: en
|
||||
slug: "faq"
|
||||
excerpt: Why, how et and especially what.
|
||||
tags: ["Freelance"]
|
||||
createdAt: "2022-06-22T15:34:45.000Z"
|
||||
---
|
||||
|
||||
[Go back to available articles](/en/articles/)
|
||||
11
src/content/articles/en/gratuiste.md
Normal file
11
src/content/articles/en/gratuiste.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Gratuiste
|
||||
subtitle: Translation in progress, stay tuned ;)
|
||||
lang: en
|
||||
slug: "gratuiste"
|
||||
excerpt: Translation in progress, stay tuned ;)
|
||||
tags: ["Design", "Freelance"]
|
||||
createdAt: "2017-05-27T07:47:36.000Z"
|
||||
---
|
||||
|
||||
[Go back to available articles](/en/articles/)
|
||||
|
|
@ -6,9 +6,19 @@ slug: "sci-hub-unblock"
|
|||
key: "scihub"
|
||||
excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
|
||||
tags: ["Internet", "Science"]
|
||||
pubDate: "2019-10-18T07:47:36.000Z"
|
||||
createdAt: "2019-03-31T07:47:36.000Z"
|
||||
updatedAt: "2022-12-27T12:08:00.000Z"
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const macOs =
|
||||
"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
|
||||
export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
|
||||
export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
|
||||
export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
|
||||
export const windowsAdapterSettings =
|
||||
"https://assets.nardu.in/sci-hub-adapter-settings.jpg";
|
||||
|
||||
The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
|
||||
|
||||
## What is this about?
|
||||
|
|
@ -18,8 +28,8 @@ Not being a researcher myself, here’s an [extremely well done explanatory vide
|
|||
> “This is outrageous!”
|
||||
|
||||
I noticed that my ISP was indeed blocking access. I have not yet been able to check for the other suppliers, but I imagine that they have all complied with the court decision.
|
||||
The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: _www.sci-hub.tw_ to an IP address: _186.2.163.90_
|
||||
It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the sci-hub domain name. As a result, no IP address is returned and the site is not accessible.
|
||||
The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: **www.sci-hub.tw** to an IP address: **186.2.163.90**
|
||||
It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the [sci-hub.se.](http://sci-hub.se/) domain name. As a result, no IP address is returned and the site is not accessible.
|
||||
|
||||
## How to bypass this?
|
||||
|
||||
|
|
@ -35,20 +45,18 @@ Go to:
|
|||
|
||||
1. System Preferences
|
||||
1. Network
|
||||
1. (wi-fi or ethernet)
|
||||
1. (wi-fi and/or ethernet)
|
||||
1. Advanced
|
||||
1. DNS
|
||||
|
||||
From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
|
||||
|
||||
<nuxt-img
|
||||
src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS network and DNS settings"
|
||||
loading="lazy">
|
||||
</nuxt-img>
|
||||
<AstroImage
|
||||
src={macOs}
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS network and DNS settings"
|
||||
/>
|
||||
|
||||
### Windows (10)
|
||||
|
||||
|
|
@ -64,53 +72,33 @@ Go to:
|
|||
|
||||
From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
|
||||
|
||||
<picture width="728" height="319">
|
||||
<nuxt-source
|
||||
src="https://assets.nardu.in/sci-hub-settings.webp"
|
||||
sizes="sm:100vw xl:728px" >
|
||||
</nuxt-source>
|
||||
<nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
alt="Windows system settings"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsSettings}
|
||||
width="728"
|
||||
height="319"
|
||||
alt="Windows system settings"
|
||||
/>
|
||||
|
||||
<picture width="728" height="803">
|
||||
<nuxt-source
|
||||
src="https://assets.nardu.in/sci-hub-network.webp"
|
||||
sizes="sm:100vw xl:728px" >
|
||||
</nuxt-source>
|
||||
<nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
alt="Windows network settings"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsNetwork}
|
||||
width="728"
|
||||
height="803"
|
||||
alt="Windows network settings"
|
||||
/>
|
||||
|
||||
<picture width="728" height="327">
|
||||
<nuxt-source
|
||||
src="https://assets.nardu.in/sci-hub-adapter.webp"
|
||||
sizes="sm:100vw xl:728px" >
|
||||
</nuxt-source>
|
||||
<nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
alt="Windows network connections settings"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsAdapter}
|
||||
width="728"
|
||||
height="327"
|
||||
alt="Windows network connections settings"
|
||||
/>
|
||||
|
||||
<picture width="728" height="434">
|
||||
<nuxt-source
|
||||
src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
|
||||
sizes="sm:100vw xl:728px" >
|
||||
</nuxt-source>
|
||||
<nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
alt="Windows network adapter settings"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsAdapterSettings}
|
||||
width="728"
|
||||
height="434"
|
||||
alt="Windows network adapter settings"
|
||||
/>
|
||||
|
||||
## Which DNS?
|
||||
|
||||
|
|
@ -127,16 +115,16 @@ My favorite since it is a [french association](https://www.fdn.fr/)
|
|||
- 2001:910:800::12
|
||||
- 2001:910:800::40
|
||||
|
||||
### [Cloudflare DNS](https://1.1.1.1/)
|
||||
### [Quad9](https://www.quad9.net)
|
||||
|
||||
For those who want the [“fastest DNS servers in the world”.](https://www.dnsperf.com/#!dns-resolvers)
|
||||
Quand9 is a non-profit foundation offering free public DNS servers. Their classic servers offer filtering of identified malicious domains. They do not collect data and are <abbr title="General Data Protection Regulation">GDPR</abbr>-compliant.
|
||||
|
||||
1. IPV4
|
||||
- 1.1.1.1
|
||||
- 1.0.0.1
|
||||
- 9.9.9.9
|
||||
- 149.112.112.112
|
||||
2. IPV6
|
||||
- 2606:4700:4700::1111
|
||||
- 2606:4700:4700::1001
|
||||
- 2620:fe::fe
|
||||
- 2620:fe::9
|
||||
|
||||
## That's it.
|
||||
|
||||
76
src/content/articles/en/the-day-I-jamd.mdx
Normal file
76
src/content/articles/en/the-day-I-jamd.mdx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: The day I Jam’d
|
||||
subtitle: A story of unusual tools and fun gambles.
|
||||
lang: en
|
||||
slug: "the-day-I-jamd"
|
||||
excerpt: Ooh, yeah! All right! We’re jammin’
|
||||
tags: ["Dev", "Jamstack"]
|
||||
createdAt: "2020-10-08T09:00:00.000Z"
|
||||
updatedAt: "2022-12-27T15:40:06.000Z"
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
|
||||
export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";
|
||||
|
||||
## The not so easy choice
|
||||
|
||||
When I was still using Wordpress for my personal website, I thought it would be nice to try [OpenLiteSpeed](https://openlitespeed.org) webserver. Being a designer, I always like to have a graphical interface and I heard OLS had very nice caching and overall performances.
|
||||
|
||||
## FIGHT!
|
||||
|
||||
A few years later, I learned about Jamstack and its incredible potential. Not being impulsive at all, I chose to entirely remake my website with tools like [11ty](https://www.11ty.dev/) and [Strapi](https://strapi.io/).
|
||||
|
||||
I remember Strapi still being in alpha/beta and colleagues telling me it was a risky gamble, especially since I was pretty new to the node.js world.
|
||||
|
||||
> Open source and french? Sign me up!
|
||||
|
||||
So I started recreating my website identically with 11ty and Strapi. Same hosting on a Digital Ocean droplet, same webserver, same content. I had done a fair amout of performance optimizations on my wordpress install so I was eager to compare the results with the new static version.
|
||||
|
||||
Boy did they exceed my expectations! With almost no optimization on the static side, I got the following results.
|
||||
|
||||
### wordpress
|
||||
|
||||
<AstroImage
|
||||
src={wordpress}
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Performance score of 53/100 on Wordpress."
|
||||
/>
|
||||
|
||||
Despite a lot of efforts I could not do better. I’m no expert in caching, do not use CDN and relied on plugins to achieve a lot of stuff (php not being my strongest skill 😬).
|
||||
|
||||
### 11ty + strapi
|
||||
|
||||
<AstroImage
|
||||
src={strapi11ty}
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Performance score of 97/100 on jamstack."
|
||||
/>
|
||||
|
||||
Almost **zero** special configuration (I was too anxious to test) and I reached an awesome score. I know lighthouse scores are not everything but hey, **53 vs 97**… I’ll take it!
|
||||
|
||||
## Now kiss 🥰
|
||||
|
||||
Both of these approaches have their benefits and drawbacks. As a freelance, my clients often prefer or ask for Wordpress because of its reputation. I always present a Jamstack alternative when possible but it’s still scary to most compared to Wordpress. I feel however that it’s going to be easier to use Jamstack with time.
|
||||
|
||||
## I did it again…
|
||||
|
||||
Here we are now, a quarantine and a few months later and this website is running with… [Nuxt.js](https://nuxtjs.org/). I know, I’m sorry, I couldn’t resist the latest [nuxt content](https://content.nuxtjs.org/) functionnality.
|
||||
|
||||
So I re-did everything again… and let me just say: **wow**, what an experience!
|
||||
I **love** developing with Nuxt. Using nuxt content allowed me to focus on design and, well, content.
|
||||
No more Apollo client and graphQL query, only markdown and a few promises.
|
||||
|
||||
Don’t get me wrong, I really like working with Strapi and its graphQL capabilities but for the purpose of this website, nuxt content does it (extremely well).
|
||||
|
||||
I’m still using Strapi as a way to upload, store and manage images, videos, gifs, etc. It might be too much for this use case but I like to know that I can still go back to it if I want to! Also, I spent quite a bit of time setting it up with OpenLiteSpeed and I’m still too attached to this accomplishment to let it go. I wrote [an article on Strapi running with OpenLiteSpeed](/en/articles/strapi-openlitespeed) if you’re into that kind of stuff.
|
||||
|
||||
## In the end
|
||||
|
||||
Wordpress, Jamstack, vanilla everything… Does it really matter? For me, the dev experience was far more enjoyable working with 11ty, nuxt.js and strapi than with Wordpress.
|
||||
|
||||
On the performance and accessibility side, it also seems to be the better/smarter choice. It might not be everytime! ¯\\\_(ツ)\_/¯
|
||||
|
||||
Can’t wait to learn [astro](https://astro.build/) and start from scratch again!
|
||||
124
src/content/articles/en/video-compression.md
Normal file
124
src/content/articles/en/video-compression.md
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
title: Video compression
|
||||
subtitle: Encode like you mean it.
|
||||
lang: en
|
||||
slug: "video-compression"
|
||||
excerpt: How to gain precious weight when encoding videos.
|
||||
tags: ["Design"]
|
||||
createdAt: "2021-05-05T09:00:00.000Z"
|
||||
updatedAt: "2022-06-08T14:24:06.000Z"
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const premiereExport = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
|
||||
export const handbrakeBase = "https://assets.nardu.in/video-handbrake-1.jpeg";
|
||||
export const handbrakeVideo = "https://assets.nardu.in/video-handbrake-2.jpeg";
|
||||
export const handbrakeAudio = "https://assets.nardu.in/video-handbrake-3.jpeg";
|
||||
export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpeg";
|
||||
|
||||
## Let's play.
|
||||
|
||||
Videos are everywhere. **EVERYWHERE!** But videos can and will be huge when 4k becomes an internet standard. Currently, 1920x1080 is king and we usually have no problem hosting or playing this resolution.
|
||||
|
||||
## Because we can doesn't mean we should.
|
||||
|
||||
Right now, the (good) trend of web performance is on the rise. Everyone wants a blazing fast loading website, which might not be possible if we send requests to 100mb (or even more) videos.
|
||||
|
||||
With a good connection, users will not see the difference. But if we go down that path, nor will they with a 300mb one. So the goal is to make every asset as small as possible. It's already the case with images. But it's simpler and faster than video encoding.
|
||||
|
||||
## Small size, best quality.
|
||||
|
||||
Let's say we exported a 1920x1080 video from Premiere Pro with these basic settings:
|
||||
|
||||
<AstroImage
|
||||
src={premiereExport}
|
||||
width="673"
|
||||
height="800"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
It's gorgeous, it's Full HD, it's 1:30 minute of excellent editing but it's 50mb… What a shame.
|
||||
|
||||
> We can already bring down the size from Premiere or Media Encoder by selecting CBR instead of VBR and using a low bitrate (like 2 or 3).
|
||||
|
||||
Let's now use [Handbrake!](https://handbrake.fr/) It's free, open source and multi platform. You can also read this great article from [Ueno](https://loremipsum.ueno.co/dear-ueno-how-do-you-compress-videos-6657ebd9dd28?gi=930afecec398) on video encoding.
|
||||
|
||||
**Please please PLEASE. Never export videos from within After Effects.**
|
||||
|
||||
## Handbrake
|
||||
|
||||
### Summary screen
|
||||
|
||||
While it's not as nice as Premiere Pro, it has way more exporting capabilities. Follow these steps to use good standard settings:
|
||||
|
||||
1. Open your source video
|
||||
1. Select a preset corresponding to your future usage like Fast 1080p30
|
||||
1. Check Web Optimized
|
||||
1. Keep MPEG-4 as the format
|
||||
|
||||
<AstroImage
|
||||
src={handbrakeBase}
|
||||
width="728"
|
||||
height="337"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
### Video screen
|
||||
|
||||
1. Keep H.264 (x264) or use H.264 nvidia nvenc if you can (crazy fast encoding by nvidia)
|
||||
1. Choose Constant Quality and try a value between 20 and 30 (higher = smaller size but lower quality)
|
||||
1. Choose Peak Framerate. If you don't know the framerate, keep the default setting
|
||||
1. Choose the type of video you are encoding (film, animation…)
|
||||
|
||||
<AstroImage
|
||||
src={handbrakeVideo}
|
||||
width="728"
|
||||
height="337"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
### Audio screen
|
||||
|
||||
If you don't have audio, be sure to set the audio channel to none.
|
||||
If you have an audio channel, these settings are great and will not influence the size much:
|
||||
|
||||
1. Codec AAC
|
||||
1. Samplerate 44.1
|
||||
1. Bitrate 192 to 256 (your choice)
|
||||
|
||||
<AstroImage
|
||||
src={handbrakeAudio}
|
||||
width="728"
|
||||
height="337"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
### Export!
|
||||
|
||||
I used a RF of 25 for this example and no audio.
|
||||
|
||||
1. My Premiere Pro video was 50,6mb
|
||||
1. My Handbrake video is 5,5mb
|
||||
|
||||
> What a save!
|
||||
|
||||
I ended up dividing the original size by 10. Which is cool.
|
||||
I tried with a RF of 30. The video was still pretty good and only 3,3mb.
|
||||
|
||||
## Exporting for the web
|
||||
|
||||
Now that we know how to properly compress videos, let's go further. Say we have a website with a lot of videos on the same page. We still want to load the content as fast as possible. So our videos need to be as small as possible. We won't do better than previously seen using mp4/H.264. However, we can use **webm/VP9.**
|
||||
Webm is an html video format and VP9 is its latest codec.
|
||||
|
||||
Using Handbrake and webm/VP9, we can achieve really great compression without losing too much quality (or none at all depending on the settings). I was able to divide by 4 the size of a video using these presets:
|
||||
|
||||
<AstroImage
|
||||
src={handbrakeWeb}
|
||||
width="728"
|
||||
height="313"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
The only down side is that it takes some time to encode. It will depend on the video length and your computing power.
|
||||
|
||||
I tried various settings but I read [here](https://trac.ffmpeg.org/wiki/Encode/VP9) that VP9 is supposed to be used with two-pass encoding. You then have to find the right bitrate (here 1000) for your situation.
|
||||
Loading…
Add table
Add a link
Reference in a new issue