Images

‍Les ‍images ‍sont ‍le ‍meilleur ‍moyen ‍de ‍rendre ‍votre ‍page ‍intéressante ‍et ‍distinctive, ‍et ‍elles ‍informent, ‍mettent ‍en ‍contexte ‍et ‍créent ‍l'ambiance. ‍Les ‍images ‍sont ‍également ‍la ‍principale ‍source ‍de ‍poids ‍des ‍pages, ‍car ‍les ‍navigateurs ‍les ‍téléchargent ‍immédiatement ‍avec ‍la ‍page.

‍Pour ‍ces ‍raisons, ‍il ‍existe ‍plusieurs ‍façons ‍d'intégrer ‍des ‍images ‍dans ‍la ‍page ‍et ‍de ‍nombreuses ‍options.

‍Vous ‍ajoutez ‍une ‍image ‍en ‍la ‍déposant ‍dans ‍le ‍canevas ‍directement ‍depuis ‍le ‍Finder ‍ou ‍en ‍l'ajoutant ‍depuis ‍le ‍popup ‍"Plus". ‍Vous ‍pouvez ‍remplacer ‍une ‍image ‍existante ‍en ‍la ‍déposant ‍sur ‍la ‍vignette ‍de ‍l'image ‍dans ‍les ‍paramètres ‍ou ‍sur ‍l'image ‍dans ‍le ‍canevas.

‍Une ‍alternative ‍à ‍l'utilisation ‍de ‍l'élément ‍image ‍est ‍de ‍définir ‍l'image ‍comme ‍arrière-plan ‍d'une ‍boîte.

‍Les ‍images ‍ont ‍un ‍aspect ‍de ‍base, ‍ce ‍qui ‍peut ‍être ‍utile ‍lorsque ‍vous ‍ébauchez ‍une ‍mise ‍en ‍page ‍pour ‍la ‍première ‍fois ‍sans ‍ajouter ‍de ‍contenu.

‍Images ‍bitmap

‍Le ‍type ‍d'image ‍de ‍base ‍le ‍plus ‍courant ‍est ‍l'image ‍bitmap, ‍qui ‍comprend ‍des ‍images ‍provenant ‍de ‍la ‍photographie ‍numérique ‍ou ‍d'outils ‍de ‍création ‍d'images ‍qui ‍ne ‍sont ‍pas ‍expressément ‍basés ‍sur ‍le ‍vecteur.

‍Sparkle ‍chargera ‍la ‍plupart ‍des ‍types ‍d'images ‍bitmap ‍pris ‍en ‍charge ‍par ‍le ‍système, ‍y ‍compris ‍les ‍fichiers ‍JPEG, ‍PNG, ‍PNG, ‍PNG ‍avec ‍transparence, ‍GIF, ‍TIFF ‍et ‍négatifs ‍numériques ‍(raw).

‍Les ‍images ‍GIF ‍seront ‍exportées ‍telles ‍quelles, ‍tandis ‍que ‍les ‍images ‍PNG ‍et ‍JPEG ‍seront ‍redimensionnées ‍et ‍compressées ‍pour ‍la ‍taille ‍exacte ‍utilisée ‍par ‍l'élément. ‍Les ‍autres ‍formats ‍d'image ‍sont ‍exportés ‍au ‍format ‍JPEG, ‍puis ‍redimensionnés ‍aux ‍tailles ‍requises.

‍Les ‍options ‍d'image ‍incluent ‍un ‍texte ‍de ‍titre, ‍qui ‍sera ‍affiché ‍sous ‍forme ‍d'infobulle ‍dans ‍la ‍plupart ‍des ‍fichiers ‍et ‍un ‍texte ‍descriptif ‍(parfois ‍appelé ‍"balise ‍alt"), ‍qui ‍est ‍une ‍option ‍d'accessibilité ‍utilisée ‍par ‍les ‍lecteurs ‍d'écran ‍et ‍autres ‍dispositifs ‍d'aide, ‍mais ‍qui ‍n'est ‍pas ‍autrement ‍visible ‍dans ‍le ‍navigateur.

‍Le ‍cadre ‍de ‍l'image ‍dans ‍le ‍canevas ‍est ‍l'espace ‍maximum ‍pour ‍l'image. ‍La ‍façon ‍dont ‍l'image ‍s'adapte ‍au ‍cadre ‍est ‍contrôlée ‍par ‍les ‍commandes ‍d'alignement ‍et ‍d'étirement.

‍Si ‍la ‍case ‍"Étirer" ‍est ‍désactivée, ‍l'image ‍conservera ‍ses ‍dimensions ‍d'origine ‍(et ‍sera ‍recadrée ‍ou ‍letterboxé ‍si ‍nécessaire). ‍Sa ‍position ‍dans ‍le ‍cadre ‍de ‍l'élément ‍peut ‍être ‍alignée ‍horizontalement ‍et ‍verticalement ‍en ‍utilisant ‍les ‍six ‍boutons: ‍gauche, ‍milieu, ‍droite, ‍haut, ‍milieu, ‍bas.

‍Si ‍la ‍case ‍à ‍cocher ‍"Étirer" ‍est ‍activée, ‍un ‍facteur ‍d'échelle ‍approprié ‍sera ‍appliqué ‍par ‍Sparkle. ‍Le ‍bouton ‍"Ajuster" ‍assure ‍que ‍l'image ‍entière ‍est ‍visible, ‍mais ‍produira ‍un ‍letterboxing ‍horizontal ‍ou ‍vertical. ‍"Remplir" ‍assure ‍que ‍l'image ‍couvre ‍tout ‍le ‍cadre, ‍mais ‍l'image ‍sera ‍coupée ‍au ‍niveau ‍des ‍bords ‍du ‍cadre.

‍La ‍barre ‍"rapport ‍de ‍la ‍résolution" ‍située ‍sous ‍les ‍commandes ‍d'étirement ‍vous ‍aide ‍à ‍évaluer ‍la ‍qualité ‍de ‍l'image ‍de ‍sortie ‍et ‍à ‍déterminer ‍s'il ‍y ‍a ‍suffisamment ‍de ‍pixels ‍pour ‍une ‍haute ‍résolution ‍(Retina) ‍et ‍même ‍une ‍utilisation ‍normale ‍de ‍la ‍taille. ‍Lorsque ‍vous ‍redimensionnez ‍l'image, ‍la ‍barre ‍se ‍met ‍à ‍jour ‍automatiquement. ‍En ‍fin ‍de ‍compte, ‍vous ‍devriez ‍vous ‍assurer ‍de ‍ne ‍pas ‍descendre ‍en ‍dessous ‍de ‍2x: ‍de ‍nombreux ‍appareils ‍afficheront ‍une ‍image ‍dont ‍la ‍résolution ‍est ‍perceptiblement ‍basse.

‍Sparkle ‍prend ‍en ‍charge ‍les ‍navigateurs ‍fonctionnant ‍sur ‍des ‍appareils ‍à ‍haute ‍résolution ‍(Retina) ‍ou ‍à ‍très ‍haute ‍résolution ‍(3x ‍Retina). ‍Lorsque ‍la ‍taille ‍de ‍l'image ‍source ‍est ‍suffisante, ‍l'image ‍sera ‍automatiquement ‍générée ‍pour ‍des ‍résolutions ‍normales ‍(1x), ‍élevées ‍(2x) ‍ou ‍très ‍élevées ‍(3x). ‍Les ‍options ‍de ‍génération ‍d'images ‍sont ‍disponibles ‍sur ‍l'ensemble ‍du ‍site ‍dans ‍le ‍panneau ‍de ‍configuration..

‍Astuce: ‍glisser-déposer ‍une ‍image ‍avec ‍un ‍nom ‍se ‍terminant ‍par ‍@2x ‍(par ‍exemple ‍pic@2x.png), ‍ses ‍dimensions ‍seront ‍réduites ‍de ‍moitié ‍et ‍elle ‍sera ‍placée ‍sur ‍le ‍canevas ‍à ‍la ‍taille ‍1x. ‍De ‍même ‍pour ‍un ‍suffixe ‍@3x.

‍Images ‍vectorielles

‍Sparkle ‍peut ‍charger ‍des ‍images ‍vectorielles ‍SVG, ‍qui ‍s'adaptent ‍aux ‍résolutions ‍et ‍aux ‍appareils ‍différents. ‍Comme ‍pour ‍les ‍images ‍bitmap, ‍vous ‍pouvez ‍les ‍déposer ‍directement ‍sur ‍le ‍canevas ‍ou ‍sur ‍des ‍images ‍existantes. ‍Les ‍images ‍SVG ‍seront ‍exportées ‍telles ‍quelles, ‍aucun ‍rapport ‍de ‍résolution ‍n'est ‍nécessaire ‍parce ‍qu'elles ‍sont ‍mises ‍à ‍l'échelle ‍de ‍manière ‍nette ‍sur ‍plusieurs ‍appareils.

‍Les ‍images ‍vectorielles ‍sont ‍généralement ‍très ‍compactes ‍et ‍leur ‍nature ‍mobile ‍les ‍rend ‍idéales ‍lorsque ‍vous ‍n'avez ‍pas ‍besoin ‍de ‍photographie.

‍Les ‍SVG ‍sont ‍faciles ‍à ‍trouver ‍sur ‍le ‍Web ‍et ‍peuvent ‍être ‍produits ‍par ‍de ‍nombreuses ‍applications ‍de ‍bureau, ‍nous ‍encourageons ‍certainement ‍leur ‍utilisation.

‍Photos ‍en ‍direct

‍Sparkle ‍prend ‍en ‍charge ‍les ‍combinaisons ‍hybrides ‍photo-vidéo ‍que ‍les ‍iPhones ‍modernes ‍peuvent ‍utiliser. ‍En ‍saisissant ‍à ‍la ‍fois ‍l'image ‍et ‍le ‍fichier ‍vidéo ‍exporté ‍à ‍partir ‍de ‍Photos, ‍vous ‍pouvez ‍produire ‍une ‍page ‍qui ‍permet ‍aux ‍visiteurs ‍de ‍votre ‍site ‍de ‍voir ‍et ‍d'interagir ‍avec ‍la ‍Photo ‍en ‍direct.

‍Vous ‍pouvez ‍obtenir ‍les ‍fichiers ‍d'images ‍fixes ‍et ‍animées ‍d'une ‍photo ‍en ‍direct ‍en ‍synchronisant ‍vos ‍photos ‍avec ‍Photos ‍sur ‍le ‍Mac ‍et ‍ensuite ‍en ‍choisissant ‍la ‍photo ‍et ‍en ‍utilisant ‍la ‍commande ‍Fichier ‍-> ‍Exporter ‍l’original ‍non ‍modifié.

‍Images ‍d'inventaire

‍Sparkle ‍rend ‍super ‍pratique ‍la ‍sélection ‍d'une ‍image ‍d'inventaire ‍à ‍partir ‍des ‍collections ‍d'images ‍de ‍hautes ‍qualités ‍et ‍gratuites ‍de ‍unsplash.com ‍ou ‍pixabay.com. ‍Toutes ‍les ‍images ‍sont ‍disponibles ‍sous ‍licence ‍libre, ‍que ‍vous ‍devriez ‍consulter ‍(unsplash ‍/ ‍pixabay).

‍Elles ‍peuvent ‍être ‍utilisées ‍librement, ‍même ‍à ‍des ‍fins ‍commerciales, ‍sans ‍demander ‍l'autorisation ‍de ‍l'auteur ‍de ‍l'image. ‍Cependant, ‍il ‍est ‍de ‍votre ‍responsabilité ‍de ‍vous ‍assurer ‍que ‍l ‍e ‍contenu ‍illustré ‍(personnes, ‍logos, ‍propriété ‍privée, ‍etc.) ‍est ‍adapté ‍à ‍votre ‍site ‍web ‍et ‍ne ‍viole ‍aucun ‍droit.

‍Images ‍d'un ‍fil ‍d'actualité ‍Instagram

‍Le ‍mode ‍Instagram ‍pour ‍les ‍images ‍vous ‍permet ‍d'intégrer ‍des ‍images ‍provenant ‍d'un ‍fil ‍d'actualité ‍Instagram ‍sans ‍avoir ‍besoin ‍de ‍republier ‍le ‍site. ‍Vous ‍pouvez ‍également ‍intégrer ‍un ‍fil ‍d'actualité ‍via ‍la ‍gallerie ‍ou ‍avec ‍l'élement ‍Instagram ‍dédié.

‍L'image ‍se ‍connectera ‍à ‍votre ‍fil ‍d'actualité ‍de ‍votre ‍site ‍en ‍direct, ‍et ‍affichera ‍la ‍récente ‍publication ‍spécifiée ‍dans ‍les ‍paramètres. ‍La ‍publication ‍récente ‍à ‍utiliser ‍est ‍indiquée ‍par ‍un ‍nombre, ‍0 ‍étant ‍la ‍dernière ‍publication, ‍-1 ‍à ‍-29 ‍étant ‍les ‍publications ‍plus ‍anciennes ‍dans ‍le ‍fil ‍d'actualité. ‍Donc, ‍si ‍par ‍exemple ‍vous ‍utilisez ‍la ‍récente ‍publication ‍numéro ‍0, ‍l'élément ‍affichera ‍toujours ‍la ‍dernière ‍publication ‍de ‍votre ‍fil ‍d'actualité.

‍Par ‍rapport ‍à ‍l'utilisation ‍de ‍l'élément ‍Instagram ‍dédié, ‍l'intégration ‍dans ‍les ‍images ‍vous ‍permet ‍d'utiliser ‍tous ‍les ‍paramètres ‍et ‍filtres ‍d'image, ‍mais ‍vos ‍différents ‍types ‍de ‍publications ‍Instagram ‍(multi-images ‍et ‍vidéo ‍par ‍exemple) ‍ne ‍fonctionnent ‍pas ‍dans ‍l'élément ‍image.

‍Images ‍depuis ‍un ‍emplacement ‍réseau

‍Cela ‍concerne ‍surtout ‍les ‍liens ‍dynamiques ‍vers ‍des ‍images ‍d’autres ‍adresses ‍Web, ‍c'est ‍un ‍cas ‍relativement ‍rare ‍et ‍Sparkle ‍ne ‍peut ‍avoir ‍qu'un ‍contrôle ‍très ‍limité, ‍donc ‍les ‍options ‍sont ‍très ‍minimes.

‍Votre ‍site ‍Web ‍utilisera ‍effectivement ‍la ‍bande ‍passante ‍de ‍quelqu'un ‍d'autre, ‍vous ‍devez ‍donc ‍vous ‍assurer ‍que ‍le ‍propriétaire ‍est ‍d'accord ‍avec ‍le ‍lien ‍dynamique.

‍Optimisation ‍de ‍l'image

‍Vous ‍n'avez ‍pas ‍besoin ‍de ‍redimensionner ‍ou ‍de ‍compresser ‍les ‍images ‍avant ‍de ‍les ‍ajouter ‍dans ‍Sparkle. ‍Lorsque ‍vous ‍publiez ‍ou ‍exportez ‍le ‍site ‍Web, ‍Sparkle ‍redimensionnera ‍et ‍recompressera ‍les ‍images ‍au ‍besoin. ‍En ‍fait,c'est ‍préférable ‍d'être ‍généreux ‍avec ‍les ‍dimensions ‍et ‍la ‍qualité ‍de ‍l'image.

‍La ‍dimension ‍généreuse ‍vous ‍donne ‍la ‍liberté ‍de ‍composition ‍de ‍déplacer ‍et ‍de ‍dimensionner ‍l'image ‍n'importe ‍où ‍dans ‍votre ‍mise ‍en ‍page ‍sans ‍être ‍contraint ‍par ‍une ‍taille ‍prédécoupée, ‍garder ‍un ‍œil ‍sur ‍le ‍rapport ‍de ‍résolution ‍vous ‍indique ‍si ‍la ‍qualité ‍de ‍l'image ‍publiée ‍sera ‍dégradée. ‍En ‍utilisant ‍des ‍images ‍de ‍la ‍plus ‍haute ‍qualité, ‍vous ‍aiderez ‍Sparkle ‍à ‍minimiser ‍les ‍artefacts ‍de ‍compression ‍lors ‍de ‍la ‍publication, ‍assurant ‍ainsi ‍les ‍meilleurs ‍résultats.

‍Cela ‍suggère ‍qu'il ‍est ‍préférable ‍de ‍ne ‍pas ‍redimensionner ‍les ‍images ‍dans ‍une ‍application ‍externe ‍avant ‍de ‍les ‍importer ‍dans ‍Sparkle.

‍En ‍général, ‍si ‍vous ‍ajoutez ‍plusieurs ‍appareils ‍Sparkle ‍générera ‍plusieurs ‍images ‍et ‍ne ‍servira ‍que ‍celle ‍avec ‍la ‍résolution ‍et ‍la ‍densité ‍optimale ‍pour ‍chaque ‍dispositif ‍de ‍visualisation. ‍Cela ‍permet ‍aux ‍navigateurs ‍modernes ‍de ‍ne ‍télécharger ‍que ‍ce ‍dont ‍ils ‍ont ‍besoin, ‍ce ‍qui ‍se ‍traduit ‍par ‍une ‍amélioration ‍des ‍performances ‍et ‍des ‍économies ‍dans ‍le ‍transfert ‍de ‍données.

‍En ‍fin ‍de ‍compte, ‍pour ‍chaque ‍image ‍saisie, ‍Sparkle ‍générera ‍une ‍image ‍pour ‍chaque ‍périphérique ‍et ‍chaque ‍densité ‍d'écran, ‍à ‍la ‍fois ‍en ‍JPEG ‍et ‍en ‍WebP ‍(si ‍l'option ‍est ‍définie ‍dans ‍les ‍paramètres).

‍Bordure ‍d'image

‍Plus ‍bas ‍dans ‍l'inspecteur, ‍commun ‍à ‍tous ‍les ‍types ‍d'images, ‍vous ‍pouvez ‍spécifier ‍une ‍bordure ‍d'image. ‍La ‍bordure ‍est ‍ajoutée ‍en ‍dehors ‍de ‍l'étendue ‍de ‍l'image. ‍Vous ‍pouvez ‍avoir ‍un ‍réglage ‍de ‍bordure ‍commun ‍pour ‍tous ‍les ‍côtés ‍ou ‍un ‍réglage ‍individuel ‍pour ‍chaque ‍bord, ‍le ‍canevas ‍affichera ‍le ‍résultat ‍exact.

‍Arrondir ‍les ‍coins ‍d'image

‍Les ‍coins ‍de ‍l'image ‍peuvent ‍être ‍arrondis ‍avec ‍un ‍rayon ‍de ‍pixel ‍spécifié, ‍vous ‍pouvez ‍opter ‍pour ‍que ‍chaque ‍coin ‍soit ‍arrondi ‍ou ‍non.

‍Dans ‍une ‍configuration ‍d'arrondi ‍extrême, ‍vous ‍pouvez ‍avoir ‍une ‍image ‍carrée ‍dont ‍le ‍rayon ‍dépasse ‍la ‍taille ‍de ‍l'image ‍et ‍qui ‍se ‍termine ‍par ‍une ‍image ‍circulaire. ‍C'est ‍d'ailleurs ‍un ‍style ‍populaire ‍pour ‍un ‍look ‍de ‍photo ‍de ‍profil.

‍La ‍bordure, ‍lorsqu'elle ‍est ‍visible, ‍suit ‍les ‍bords ‍arrondis.

‍Ombre ‍portée ‍de ‍l'image

‍Les ‍ombres ‍portées ‍étaient ‍autrefois ‍cool ‍et ‍à ‍la ‍mode, ‍et ‍pour ‍cette ‍seule ‍raison ‍leur ‍utilisation ‍peut ‍donner ‍à ‍votre ‍design ‍un ‍aspect ‍vieilli.

‍Utilisés ‍avec ‍soin ‍et ‍goût, ‍ils ‍peuvent ‍ajouter ‍un ‍effet ‍3D ‍subtil ‍et ‍donner ‍une ‍sensation ‍organique ‍de ‍profondeur.

‍Opacité ‍de ‍l'image

‍Ajuster ‍l'opacité ‍peut ‍être ‍utile ‍pour ‍certains ‍effets ‍visuels. ‍L’opacité ‍affecte ‍le ‍contenu ‍de ‍l'image ‍ainsi ‍que ‍la ‍bordure ‍et ‍l'ombre, ‍le ‍cas ‍échéant.

‍Filtres ‍d'image

‍Les ‍filtres ‍d'image ‍sont ‍un ‍moyen ‍rapide ‍d'améliorer ‍ou ‍de ‍modifier ‍une ‍image. ‍L'ajout ‍de ‍filtres ‍est ‍non ‍destructif, ‍ce ‍qui ‍signifie ‍que ‍l'image ‍originale ‍est ‍préservée. ‍Les ‍filtres ‍peuvent ‍être ‍combinés, ‍y ‍compris ‍utilisés ‍plusieurs ‍fois ‍et ‍dans ‍des ‍ordres ‍différents.

‍Interaction

‍Comme ‍pour ‍le ‍texte, ‍vous ‍pouvez ‍définir ‍ce ‍qui ‍se ‍passe ‍lorsqu'on ‍clique ‍sur ‍une ‍image. ‍L'habituelle ‍Action ‍Sur ‍Clic ‍s'applique, ‍avec ‍aussi ‍une ‍option ‍spécifique ‍à ‍l'image ‍pour ‍zoomer ‍l'image ‍dans ‍la ‍fenêtre, ‍affichée ‍dans ‍une ‍lightbox ‍qui ‍superpose ‍la ‍page.

‍Animation ‍au ‍défilement

‍L'animation ‍au ‍défilement ‍est ‍commun ‍à ‍plusieurs ‍éléments, ‍voir ‍le ‍page ‍d'animations.

‍Charger ‍lorsque ‍visible

‍Les ‍navigateurs ‍commencent ‍à ‍télécharger ‍les ‍images ‍avant ‍même ‍d'avoir ‍chargé ‍la ‍page ‍entière. ‍Si ‍votre ‍page ‍contient ‍beaucoup ‍d'images, ‍elles ‍seront ‍toutes ‍mises ‍en ‍file ‍d'attente ‍pour ‍le ‍téléchargement, ‍ce ‍qui ‍peut ‍effectivement ‍ralentir ‍le ‍chargement ‍global ‍de ‍la ‍page. ‍L'option ‍"Charger ‍lorsque ‍visible" ‍retarde ‍le ‍chargement ‍de ‍l'image, ‍donc ‍c'est ‍pire ‍pour ‍les ‍images ‍en ‍haut ‍de ‍la ‍page, ‍mais ‍en ‍le ‍réglant ‍pour ‍les ‍images ‍non ‍visibles ‍au ‍départ, ‍cela ‍accélérera ‍le ‍temps ‍de ‍chargement ‍global ‍de ‍la ‍page. ‍De ‍plus, ‍si ‍le ‍visiteur ‍du ‍site ‍ne ‍fait ‍jamais ‍défiler ‍vers ‍le ‍bas ‍pour ‍révéler ‍toutes ‍les ‍images, ‍moins ‍d'images ‍auront ‍été ‍téléchargées, ‍ce ‍qui ‍permettra ‍également ‍d'économiser ‍de ‍la ‍bande ‍passante.

S'il vous plait, signalez toute lacune dans la documentation et nous la corrigerons dès que possible !

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.