Markdown et largeur d’image sur le Web
Chouette, encore un truc que je viens de comprendre
Je savais que cela se gérait dans la CSS mais je n’y avais pas encore mis mon nez, préférant automatiser et réduire la taille de mes images à 450 pixels de large directement dans Photoshop… Et puis, là, un peu de temps et je vous livre de suite le résultat…
En Markdown, baliser une image s’écrit comme ceci…
Vous le savez si vous avez suivi le cours parodique de Mark Dukown (voir le jour 7…!!).
Le souci est que cela reste assez éloigné des options de gestion de taille d’image en HTML.
En cherchant sur le net, j’ai trouvé une solution simple car elle s’appuie justement sur ce texte alternatif et la CSS…
Dans urbanbike, j’ai besoin d’une image dans la colonne de gauche de 450 pixels de large et, éventuellement, d’une image ramenée à 250 pixels dans la colonne de droite…
Même si je ne vais pas perdre l’habitude de réduire mes images pour les optimiser, j’ai ajouté deux lignes dans ma CSS…
img[alt=reduc-450] { width: 450px; }
img[alt=reduc-250] { width: 250px; }
Ensuite, je me suis créé deux équivalents dans TextExpander, un premier équivalent nommé mz4
Ce qui précède est simplifié, CQFD. Ce qui donne…
Et un second équivalent nommé mz2
Ce qui donne…
Dans les deux cas, je fais appel à une image de 800 par 1200 pixels… mais c’est bien ce fameux texte alternatif qui est employé par la CSS pour réduire (ou non…!) l’image.
SI vous ouvrez l’image seule dans un onglet, vous pouvez constater que l’image est à la taille de 800 par 1200 pixels…
J’imagine que vous le saviez mais, dans le doute, je préfère le noter au moins pour moi ici car je vais certainement oublier dans quelques heures…
C’est tout.