IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Balise picture pour les 2x


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : février 2019
    Messages : 6
    Points : 5
    Points
    5
    Par défaut Balise picture pour les 2x
    Bonjour, je m'intéresse à l'optimisation des images pour les écrans hautes résolutions, j'ai donc rajouté une ligne de code à leur destination dans un <source> au sein de la balise <picture>. J'ai vérifié le fonctionnement de mon optimisation image pour le reste des <source>. Je n'ai pas d'écran rétina ou HiDPI pour vérifier la dernière balise en 2x, et c'est la première fois que j'utilise ce code dans un de mes sites. Pouvez vous me dire si syntaxiquement c'est correct ou si je m'y prend mal?
    Nom : pastbin.JPG
Affichages : 71
Taille : 53,0 Ko

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 667
    Points : 2 365
    Points
    2 365
    Par défaut
    Bonjour,

    Je n'ai pas de rétina pour vérifier (et c'est bien le problème de l'utilisation du 2x)
    Je pense que le mieux est plutôt d'utiliser les indices de tailles qui sont plus souples à utiliser et qui fonctionnent partout alors que les indices de densité ne fonctionnent que pour la densité.

    C'est aussi plus facile à lire & à écrire.

    NB : Préférez un copier/coller et l'utilisation des balises [ CODE] [/ CODE] plutôt que des captures d'écran.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <img src="img/musician-min.jpg" alt=""
         srcset="img/musician-285w-min.jpg 285w,
                 img/musician-360w-min.jpg 360w,
                 img/musician-840w-min.jpg 840w" />

    Pour votre 2x, pourquoi avoir mis un max-width ?? Ca veut dire qu'en densité 2.0 et sur une résolution de 600px c'est une image plus petite (360w) qui va se charger

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : février 2019
    Messages : 6
    Points : 5
    Points
    5
    Par défaut
    Est ce que celà veut dire que sans préciser que l'image en 840 est destinée aux hautes résolutions, le navigateur sur un appareil équipé rétina par exemple va forcément choisir la grande image?
    Pour les srcset j'ai préféré picture, parce que j'ai remarqué en testant img srcset en local que ma ressource en 360 n'était pas utilisée à l'un des breakpoint choisi et spécifié, seulement celle par défaut, sans doute le navigateur qui n'a pas voulu faire comme indiqué dans les media queries. Du coup j'ai essayé de lui forcer la main, ça marche avec les balises picture. Est ce un tort?

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 667
    Points : 2 365
    Points
    2 365
    Par défaut
    Un écran en 420px & densité 2x retournera bel et bien 840px pour l'utilisation du srcset
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <img src="mon-image.jpg"
         srcset="mon-image-320.jpg 320w,
                 mon-image-640.jpg 640w"
          sizes="100vw"
          alt="">
    Dans cet exemple, nous indiquons au navigateur que l'image devra au final occuper toute la surface. Son choix risque d'être celui-ci :

    • un iPhone 3 dont la taille est de 320px chargera mon-image-320.jpg
    • un iPhone 4 dont la taille est de 320px mais où la densité de pixels est de 2 chargera mon-image-640.jpg



    Source : https://www.alsacreations.com/articl...es-srcset.html

  5. #5
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : février 2019
    Messages : 6
    Points : 5
    Points
    5
    Par défaut
    Oh super, merci pour cette explication.

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    septembre 2021
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : septembre 2021
    Messages : 5
    Points : 7
    Points
    7
    Par défaut
    bonjour

    Merci beaucoup pour votre explication, ca m'a beaucoup aidé!! Encore merci

Discussions similaires

  1. Réponses: 4
    Dernier message: 16/07/2006, 14h00
  2. Réponses: 2
    Dernier message: 14/06/2006, 10h34
  3. Réponses: 3
    Dernier message: 20/05/2006, 20h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo