Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Projet de création visuels attractifs et optimisés pour site web
#1
Bonjour,

Je suis Randie, designer web depuis un an. Je me lance dans mon premier post sur ce forum en quête de conseils pour mon prochain projet. La mission est de créer des compositions florales en 3D, de qualité haute définition, sans pour autant occuper beaucoup d'espaces dans le stockage du site web du client.

Avez-vous des conseils à me donner là dessus ?  Des idées d'optimisation d'images pour le temps de chargement du site, sans perdre en qualité. Quels sont les bons formats à choisir (JPEG, PNG, etc.) ?

Merci d'avance
Vos applications :
  • > Affinity Photo Mac
- Version : 1
#2
Bonjour Randie et bienvenue sur le forum.

La rubrique "Créations" est destinée à y déposer ce que les membres ont réalisé.
Dès lors, ton post a été redirigé vers la rubrique "Questions".

En espérant que tu reçoives rapidement la réponse que tu attends.
Plus on apprend, plus on se rend compte de la "vastitude" de son ignorance.
Canon 7D MkII alain29 Windows 10
Vos applications :
  • > Affinity Publisher Windows
- Version : 2
#3
Bonjour Randie,

Voici comment je résumerais les avantages des différents formats utilisables pour le web : 

JPEG : Généralement le meilleur choix pour les images photographiques et les rendus 3D avec des dégradés de couleur. Il offre un bon compromis entre qualité et taille de fichier.

PNG : À privilégier pour les images avec des zones transparentes, des logos ou des graphiques vectoriels. Il permet de conserver une qualité parfaite sans perte, mais les fichiers peuvent être plus lourds.

WebP : Un format plus récent développé par Google, offrant une meilleure compression que JPEG et PNG pour les images photographiques. Cependant, sa compatibilité avec les navigateurs n'est pas encore totale.

SVG : Essentiellement pour des dessins (full vectoriel), pour les éléments graphiques simples comme des icônes ou des dessins vectoriels, le SVG est léger, sans perte de qualité. Il n’est pas adapté aux images complexes comme des compositions florales en 3D, mais à garder à l’esprit si tu intègres des éléments vectoriels.


Ensuite pour le format JPEG, PNG, WebP, tu peux utiliser des application de compression d’image : Utilise des outils comme TinyPNG ou JPEG-Optimizer pour compresser tes fichiers JPEG/PNG avant de les télécharger sur le site. Il existe aussi des outils pour WebP comme Squoosh pour compresser et convertir des images.

Pour ton code tu peux utiliser les formats responsive : 
Utilise l’attribut srcset dans les balises <img> pour fournir plusieurs tailles d’images en fonction de la résolution de l’écran de l’utilisateur. Par exemple, un écran mobile n’a pas besoin d’une image aussi grande qu’un écran de bureau.
Tu optimiseras ainsi le chargement d'images.

Exemple : 

Code :
<img src="image-default.jpg"
    srcset="image-small.jpg 600w, image-large.jpg 1200w"
    sizes="(max-width: 600px) 600px, 1200px"
    alt="Composition florale 3D">

Aussi Lazy Loading (Chargement différé) : Cette technique permet de ne charger les images que lorsqu’elles apparaissent dans le champ de vision de l’utilisateur, réduisant le temps de chargement initial de la page. En HTML, cela se fait facilement avec l'attribut loading="lazy" sur les balises <img>.

Tu peux également héberger les images sur un autre serveur (type cloud ou cdn) réduisant ainsi le temps de chargement pour les utilisateurs et ne pas encombrer l'hébergement de ton client.

Si tu utilises un CMS type WordPress, pense également à configurez correctement la mise en cache côté serveur pour les images statiques afin de réduire les temps de chargement pour les visiteurs récurrents.


De mon point du vu, voilà pour l'essentiel Wink
Je préfère le "Tu" au "Vous"
Afin que nous puissions répondre aux questions que vous vous posez il est essentiel que nous connaissions votre configuration et il vous faut avant toute chose, remplir votre profil.
AVANT de poser une question....assurez vous d'abord AVEC LA FONCTION RECHERCHE que le sujet n'a pas déjà été abordé.
Veuillez n'envoyer de messages privés qu'en cas d'absolue nécessité. Chaque question, chaque réponse, chaque intervention doivent servir au plus grand nombre.
alain29
Vos applications :
  • > Affinity Photo Mac
  • > Affinity Designer Mac
  • > Affinity Publisher Mac
- Version : 2
#4
Top, merci beaucoup pour cette réponse très détaillée.

Je vais regarder tout ça !
Vos applications :
  • > Affinity Photo Mac
- Version : 1
  


Atteindre :


Utilisateur(s) parcourant ce sujet :
1 visiteur(s)