Images
Le travail sur les images commence par leur rôle. Les photographies de contenu nécessitent des tailles, des formats et des alternatives textuelles adaptés ; des icônes d’interface répétées peuvent convenir à une planche de sprites existante.
Pour une image de profil ou un personnage de maquette, utilisez le générateur d’avatar pour personnaliser une illustration et télécharger un PNG avec un choix de motifs d’arrière-plan.
Le guide des images adaptatives explique srcset, sizes, les formats de repli et la vérification des téléchargements. L’article sur les sprites CSS présente les compromis propres aux petites images d’interface.
Ouvrez le créateur de sprites CSS pour sélectionner ces zones et exporter leurs règles. Conservez l’image source avec le CSS dans votre projet : l’export contient le code de positionnement, pas un nouveau fichier image.
Créateur de sprites CSS
Dessinez, déplacez et redimensionnez les zones d'une planche de sprites. Gérez les sprites nommés, prévisualisez chaque sélection et copiez ou téléchargez le CSS.
Générateur d'avatar
Créez un avatar gratuit pour votre profil ou une maquette. Personnalisez le visage, les cheveux, la tenue et le fond, puis téléchargez un PNG sans compte.
Découvrez notre nouveau générateur d'avatar
Créez un avatar illustré gratuit pour un profil ou une maquette, téléchargez un PNG et partagez un lien pour retrouver votre personnage plus tard.
Des images adaptatives qui économisent vraiment la bande passante : srcset, sizes, picture et tests
Utilisez srcset, sizes et picture pour adapter vos images, éviter les décalages de mise en page et mesurer les téléchargements réels.
Les sprites CSS sur le Web moderne : quand les utiliser et comment les tester
Découvrez quand les sprites CSS restent utiles, comment définir les zones d'une planche et comment tester le chargement, l'accessibilité et les écrans haute densité.