Deuxfleurs/guichet
22
3
Fork 1
Code Issues 42 Pull requests 4 Projects 2 Releases Wiki Activity

Redimensioner les images ? #26

New issue
Open
opened 2023-09-28 12:00:43 +00:00 by quentin · 4 comments
quentin commented 2023-09-28 12:00:43 +00:00
Owner
Copy link

Sur les CDN c'est assez simple.
Sur cette page :
https://www.iut.u-bordeaux-montaigne.fr
Voilà la balise de l'image de la home :

<picture>
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=900&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=1800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x
    " 
    media="(min-width: 1024px)" 
    type="image/webp"
  >
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=800&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=1600&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x
    " 
    media="(min-width: 768px)" 
    type="image/webp"
  >
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=400&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x
    " 
    type="image/webp"
  >
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=900&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=1800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x
    " 
    media="(min-width: 1024px)"
  >
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=800&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=1600&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x
    " 
    media="(min-width: 768px)"
  >
  <source 
    srcset="
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=400&amp;height=0&amp;&amp;fit=inside,
      https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=800&amp;height=0&amp;&amp;fit=inside&amp;quality
  ...

C'est grâce à ce srscset qu'on charge en mobile retina une image de 800 px de large qui pèse 38 ko, et en desktop retina, une image de 1800 px affichée en 800 (légèrement trop grande donc) qui pèse 131 ko, les 2 encodées en webp si le navigateur le supporte, et en jpg ou png sinon.

Le CDN, c'est pas tellement pour la proximité, c'est surtout pour les redimensionnements d'images.

Et on a passé des heures à coder une solution libre qui fait les resize, voilà l'url du controller :
https://github.com/noesya/osuny/blob/main/app/controllers/media_controller.rb. Vous pouvez trouver le service et les tests qui vont avec dans le repo. Je crois qu'on a pas mal sué nous aussi, et pas seulement à chercher et tester des solutions. On les a codées. Le problème avec cette approche, c'est que ça fait une redirection quand on appelle l'image, et ça ça diminue le LCP, donc ça dégrade l'expérience utilisateur.

Donc on a cherché un CDN pas dégueu éthiquement, et on a trouvé https://www.keycdn.com.
On a évidemment demandé à Scaleway, mais ils ne sont pas prêts, leur CDN ne fonctionne pas.

Sur les CDN c'est assez simple. Sur cette page : https://www.iut.u-bordeaux-montaigne.fr Voilà la balise de l'image de la home : ``` <picture> <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=900&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=1800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x " media="(min-width: 1024px)" type="image/webp" > <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=800&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=1600&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x " media="(min-width: 768px)" type="image/webp" > <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=400&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?format=webp&amp;width=800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x " type="image/webp" > <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=900&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=1800&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x " media="(min-width: 1024px)" > <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=800&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=1600&amp;height=0&amp;&amp;fit=inside&amp;quality=50 2x " media="(min-width: 768px)" > <source srcset=" https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=400&amp;height=0&amp;&amp;fit=inside, https://osuny-1b4da.kxcdn.com/lxcxl8xtccrn4dbj7pb14ebh1hv7?width=800&amp;height=0&amp;&amp;fit=inside&amp;quality ... ``` C'est grâce à ce srscset qu'on charge en mobile retina une image de 800 px de large qui pèse 38 ko, et en desktop retina, une image de 1800 px affichée en 800 (légèrement trop grande donc) qui pèse 131 ko, les 2 encodées en webp si le navigateur le supporte, et en jpg ou png sinon. Le CDN, c'est pas tellement pour la proximité, c'est surtout pour les redimensionnements d'images. Et on a passé des heures à coder une solution libre qui fait les resize, voilà l'url du controller : https://github.com/noesya/osuny/blob/main/app/controllers/media_controller.rb. Vous pouvez trouver le service et les tests qui vont avec dans le repo. Je crois qu'on a pas mal sué nous aussi, et pas seulement à chercher et tester des solutions. On les a codées. Le problème avec cette approche, c'est que ça fait une redirection quand on appelle l'image, et ça ça diminue le LCP, donc ça dégrade l'expérience utilisateur. Donc on a cherché un CDN pas dégueu éthiquement, et on a trouvé https://www.keycdn.com. On a évidemment demandé à Scaleway, mais ils ne sont pas prêts, leur CDN ne fonctionne pas.
quentin added this to the Deuxfleurs Website project 2023-09-28 12:00:43 +00:00
quentin changed title from Redimenssioner les images à la volée comme to Redimenssioner les images à la volée comme KeyCDN 2023-09-28 12:00:52 +00:00
quentin changed title from Redimenssioner les images à la volée comme KeyCDN to Redimensioner les images à la volée comme KeyCDN 2023-09-28 12:01:26 +00:00
quentin commented 2023-09-28 12:27:23 +00:00
Author
Owner
Copy link

Depends on #43

Depends on #43
lx commented 2023-10-02 10:34:22 +00:00
Owner
Copy link

Est-ce que les images redimensionnées sont mises en cache ? Dès qu'on atteint un certain volume de traffic ça me semble indispensable pour la viabilité de la méthode.

Est-ce que les images redimensionnées sont mises en cache ? Dès qu'on atteint un certain volume de traffic ça me semble indispensable pour la viabilité de la méthode.
quentin commented 2023-10-03 17:19:09 +00:00
Author
Owner
Copy link

J'ai déplacé dans "too big", c'est typiquement une question qui est trop large, qui doit etre refined et redecoupee avant meme d imaginer implementer quoi que ce soit

J'ai déplacé dans "too big", c'est typiquement une question qui est trop large, qui doit etre refined et redecoupee avant meme d imaginer implementer quoi que ce soit
quentin added the
cat
idea
 label 2023-10-17 16:42:38 +00:00
quentin changed title from Redimensioner les images à la volée comme KeyCDN to Redimensioner les images ? 2024-02-07 13:36:33 +00:00
quentin commented 2024-02-07 13:41:40 +00:00
Author
Owner
Copy link

Je me demande si la solution a ça, c'est pas simplement les fonctionnalités d'image processing de Hugo : https://gohugo.io/content-management/image-processing/

Je me demande si la solution a ça, c'est pas simplement les fonctionnalités d'image processing de Hugo : https://gohugo.io/content-management/image-processing/
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
tweak-argon2-params
link-title
docker-build
feat/aerogramme
nix
show-everyone-by-default
No results found.
Labels
Clear labels   
cat
bug

  
cat
feature

  
cat
idea

  
cat
performance

  
cat
reliability

  
cat
security

  
cat
ui

  
difficulty
high

  
difficulty
low

  
difficulty
mid

  
prio
high

  
prio
low

  
prio
mid

No labels
cat
bug
cat
feature
cat
idea
cat
performance
cat
reliability
cat
security
cat
ui
difficulty
high
difficulty
low
difficulty
mid
prio
high
prio
low
prio
mid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Deuxfleurs Website
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Deuxfleurs/guichet#26
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?