Jump to main content

Nicolas Hoizey

  • articles
  • billets
  • links
  • notes
  • talks
  • archives
  • about

Note from 7 January 2022

  • Nicolas Hoizey
  • 7 January 2022
  • Cloudinary, image, Mapbox, WebPerf
  • 13 reactions

The #Mapbox sprite on my photo site weights 222 kB:
https://nicolas-hoizey.photo/ui/thumbnails/sprite@2x.png

I would like to serve it with #Cloudinary to enhance performance, as this PNG sprite will fast get heavier with new photos.

If you agree, please vote! https://github.com/mapbox/mapbox-gl-js/issues/11379

13 reactions

13 replies

  1. Cloudinary avatar Cloudinary
    🗳 vote
    • 7 January 2022, 23:50
    • Source
  2. Nicolas Hoizey avatar Nicolas Hoizey
    👍
    • 8 January 2022, 00:04
    • Source
  3. Nicolas Hoizey avatar Nicolas Hoizey
    You should vote on the GitHub issue… 😅
    • 8 January 2022, 00:05
    • Source
  4. David Larlet avatar David Larlet
    @nhoizey rien à voir mais j'en profite un peu, j'aimerais bien savoir comment tu as choisi les tailles (360w, 884w, 1407w, 1930w, 2454w, 2977w, 3500w) sur le détail de tes photos (par exemple https://nicolas-hoizey.photo/galleries/nature/animals/reptiles/spiderman-is-watching/ ) et aussi à quoi te sert `sizes="(min-width: 60rem) calc(100vw - 2 * 1rem - 9rem - 2vw - 2 * 2.744rem), calc(100vw - 2rem)"` ?#view-source
    view
    Spiderman is watching — Nicolas Hoizey photography
    • 9 January 2022, 13:07
    • Source
  5. Nicolas Hoizey avatar Nicolas Hoizey
    @dav hello, les tailles sont simplement des valeurs équidistantes entre 360 et 3500, mais j'ai des améliorations à faire, le 3500 fait mal sur certains viewports de mobiles de densité 4.`sizes` défini la dimension de l'image selon les viewports, ça reprend les breakpoints du CSS. Je n'en ai qu'un à 60rem. En dessous c'est du fluide plaine largeur (hors marges), au delà j'enlève la largeur de la barre de menu et différentes marges.
    • 11 January 2022, 13:55
    • Source
  6. Nicolas Hoizey avatar Nicolas Hoizey
    @dav sur le choix des dimensions dans `srcset`, j'ai fait des confs pour expliquer qu'on fait ça mal, commencé à développé un outil il y a plus de 3 ans… mais pas encore abouti… 😅
    • 11 January 2022, 13:57
    • Source
  7. Nicolas Hoizey avatar Nicolas Hoizey
    It looks like it's already possible, with an official callback to modify any URL! 😍https://github.com/mapbox/mapbox-gl-js/issues/11379#issuecomment-1010366521
    Option to serve style sprite JSON and PNG from different URLs · Issue #11379 · mapbox/mapbox-gl-js
    • 11 January 2022, 23:12
    • Source
  8. Éric D. avatar Éric D.
    @nhoizey @dav j'ai plusieurs billets sur mes essais de composition de pages photos. Je dois en avoir un sur le layout historique de Flickr, oui. Il est assez basique mais fonctionne très bien si on ne cherche pas à mettre des images en portrait et qu'on accepte d'avoir des lignes pas trop hautes.J'ai fini avec un truc plus complexe (parce que dès que je n'ai pas de deadline je finis toujours avec des trucs méga complexes)
    • 11 January 2022, 23:14
    • Source
  9. Éric D. avatar Éric D.
    @nhoizey @dav https://n.survol.fr/n/et-si-on-agencait-des-photos-sur-une-page pour l'historique
    Et si on agençait des photos sur une page ? – Carnet de notes
    • 11 January 2022, 23:15
    • Source
  10. Éric D. avatar Éric D.
    @nhoizey @dav et https://n.survol.fr/n/encore-des-agencements-de-photos pour ce que je fais aujourd'hui sur les pages de galeries (que j'ai complexifié un peu depuis)Sinon pour les pages photos plein écran j'ai des calculs qui ressemblent aux tiens mais je crois que j'ai un résultat moins complexe.Pour les srcset le hint donné au navigateur est une approximation qui au pire donne une taille par excès. Ça me suffit
    Encore des agencements de photos – Carnet de notes
    • 11 January 2022, 23:18
    • Source
  11. David Larlet avatar David Larlet
    @edasfr @nhoizey oh merci pour le rappel de tes explorations, je ne les avais plus en tête. C'est utile d'avoir documenté 🙇 Je crois que je commence à avoir un truc qui est proche de ce que j'espérais :
    • 11 January 2022, 23:22
    • Source
  12. Éric D. avatar Éric D.
    @nhoizey @dav que ce soit pour ce que je fais ou pour Flickr, c'est jouable sans JS. Tu determines une taille arbitraire côté serveur et ensuite tu définis tout en % ensuite dans le code HTML/CSS.Il y a même moyen de faire 2 layouts (un sur une colonne pour le mobile et un en maçonnerie pour les écrans larges) et basculer entre les deux via media query. Ça fait envoyer pas mal de CSS dans la page mais c'est jouable sans JS
    • 11 January 2022, 23:26
    • Source
  13. David Larlet avatar David Larlet
    @edasfr @nhoizey je n'ai aucun JS sur la page pour le moment, le HTML ressemble à https://dpaste.org/eCop et pour la CSS de la liste je réutilise https://sylvaindurand.org/masonry-photo-grid-in-pure-css/
    dpaste/eCop (HTML)
    • 11 January 2022, 23:29
    • Source
  • Older: Note from 5 January 2022
  • Newer: Note from 11 January 2022

Related contents with similar topics

  1. screenshot of JPEG XL vs AVIF for web use-cases

    Jake Archibald avatar Jake Archibald

    JPEG XL vs AVIF for web use-cases

    • Nicolas Hoizey
    • 22 October 2026
    • WebPerf, image, JPEG XL, AVIF
    • 5 reactions

    I'll go into full detail, with examples and benchmarks, but for those of you who don't have the time, here are [2 of] the headlines: For lossy photos…

  2. screenshot of The case against JPEG XL

    Gianni Rosato avatar Gianni Rosato

    The case against JPEG XL

    • Nicolas Hoizey
    • 14 September 2026
    • WebPerf, image, JPEG XL, AVIF
    • 7 reactions

    JPEG XL isn't useless; it is genuinely compelling technology for use cases beyond the Web. I'm just not personally convinced we need it in browsers…

  3. screenshot of The present and potential future of progressive image rendering

    Jake Archibald avatar Jake Archibald

    The present and potential future of progressive image rendering

    • Nicolas Hoizey
    • 16 October 2025
    • image, WebPerf
    • 4 reactions

    So if the browser manages to download 6 kB then stalls, then AVIF can produce a better result. But since the AVIF rendering is only two-pass, if the…

  4. screenshot of JPEG VS AVIF - The Battle of Compression

    kliksphilip

    JPEG VS AVIF - The Battle of Compression

    • Nicolas Hoizey
    • 25 September 2024
    • image, WebPerf, AVIF, JPEG XL
    • 2 reactions

    In this super thorough study I test one single HD image and come to vast sweeping conclusions about JPEG XL and AVIF. But that's still one image comparison…

  5. Note from 24 April 2024

    • Nicolas Hoizey
    • 24 April 2024
    • image, JPEG XL, Lighthouse, photography, WebPerf
    • 3 reactions

    Should I please Lighthouse with modern image formats, or my visitors with progressive rendering of large images in my photography site? 🤔

    screenshot of Lighthouse score in SpeedCurve, with a recommendation to use modern image formats

    Of course, this would be much easier with genaralized JPEG XL support, both modern and allowing progressive… 🤷‍♂️

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.

© Nicolas Hoizey

Built with Eleventy