Résolution vs performance pour les images portfolio

Les guides génériques parlent encore comme si WebP était exotique. Pour la photo et les stills à fort détail, AVIF atterrit souvent nettement plus petit que WebP à qualité visuelle comparable ; WebP reste le défaut moderne large quand AVIF n’est pas disponible. Le JPEG est pour les clients difficiles et les bords legacy, pas pour votre grille publique primaire.

Sur ArtInStack, Cloudflare Image Resizing sert `format=auto` pour que l’edge choisisse AVIF ou WebP depuis un seul master, pas un dossier de variantes de codec exportées à la main. Les encodeurs changent d’année en année ; traitez les claims « 30–50 % plus petit » comme directionnels. Ce qui compte pour un portfolio, c’est la qualité perceptuelle à un budget d’octets que la page peut se permettre.

La largeur de mise en page, ce sont des pixels CSS. La netteté capteur sur l’appareil est plus proche de largeur CSS × devicePixelRatio. Exemple : une colonne de galerie téléphone à 375 CSS px et DPR 2 devrait être adossée à un asset plus près de 750 px sur le long bord pour cet emplacement, pas votre master 2 400 px déversé dans chaque balise img.

C’est aussi pourquoi un « export retina » qui n’existe que comme un énorme JPEG échoue deux fois : il gaspille de la bande passante sur les thumbs et n’est toujours pas décrit au navigateur comme un set responsive. srcset / sizes (ou un équivalent plateforme) est comment le bon candidat est choisi.

Les blogs développeur citent un seul chiffre héros. Les portfolios ont besoin d’une petite matrice. Utilisez ces bandes comme planification, puis laissez ArtInStack générer les variantes. Ne maintenez pas cinq dossiers à la main pour toujours.

Les grilles denses et les lightboxes ont des courbes de coût différentes. Un seul réglage « compresser en JPEG 80 % » ne peut pas servir honnêtement les deux.

ArtInStack découpe le job exprès : les grilles portfolio préfèrent une vignette générée (une image efficace par tuile) pour qu’une page de 40 images reste bon marché et rapide. Quand un visiteur ouvre un cadre, lightbox et vues détail photo tirent depuis votre master via Cloudflare Image Resizing (formats modernes via `format=auto`, avec candidats de largeur responsive). La netteté apparaît là où quelqu’un regarde vraiment.

ArtInStack extrait et stocke l’EXIF (y compris le GPS quand présent) pour les fonctionnalités Media et carte. L’affichage public de localisation est une politique de publication (rédiger ou masquer par portfolio), pas une promesse que chaque dérivé CDN efface silencieusement la trace.

Les lieux de shoot client dans les tags GPS restent un problème de confidentialité pour les pages publiques. Décidez ce que les visiteurs doivent voir. L’accessibilité appartient au texte alt que vous écrivez, pas aux métadonnées appareil restantes. Le copyright n’est pas « ce que l’EXIF a survécu au hop ». Mettez l’attribution dans des crédits visibles, des watermarks que vous avez choisis, et des conditions légales.

Vous téléversez un master auquel vous faites confiance. ArtInStack garde ce master, génère une vignette légère pour le scan de grille, et utilise la transformation d’image Cloudflare depuis le master quand un visiteur ouvre le travail. Hiérarchie sur une page publique : tuiles de grille → thumb d’abord ; lightbox / détail photo → candidats Cloudflare depuis le master. Vous choisissez encore la qualité du master et l’intention de crop. Vous ne devriez pas maintenir trois dossiers d’export à la main.

Bon : dériver des assets publics plus légers depuis un master que vous possédez encore. Mauvais : un hébergeur recompresse votre upload en un seul « JPEG web » mou, appelle ça de l’optimisation, et expédie encore le même fichier dans chaque cellule de grille. C’est de l’économie disque déguisée en performance. Voir Le mythe du stockage illimité.

Pour savoir comment Cloudflare Image Resizing compte les unique transformations (et comment les vignettes de grille évitent de brûler la falaise du palier gratuit), lisez Cloudflare Images expliqué. Pour les choix de mise en page qui changent la taille d’une tuile sur la page, lisez Le piège de la mise en page : ratios d’aspect et grilles CSS. Pour savoir à quel point une bibliothèque peut grossir sur disque, utilisez l’estimateur de stockage cloud photo et de coûts.