ABC: BLOG & BLOGGER: Image dans un article

Plan

1-Généralités : Insérer une image dans un article
2-Optimiser vos images pour votre blog
3-Présenter ses images dans un tableau
4-Compléments utiles...

5-Insérer une image dans un Gadget

1-Généralités : Insérer une image dans un article

Lorsque vous créer un article (ou une page) vous pouvez ajouter une image de votre ordinateur ou du Web à l'intérieur de l'article de votre blog.

1-1 Principe de base

La démarche est simple :

1- avant d'insérer votre image dans votre article, placer votre curseur au bon endroit pour l'insertion, si nécessaire, en utilisant l'outil d'alignement

il suffit de cliquer sur l'icône d'image dans la barre d'outils de l'éditeur d'articles. Une fenêtre vous invite vous propose 4 possibilités d'insertion. Le plus souvent, il s'agira d'importer à partir de votre ordinateur une image personnelle : il faudra parcourir votre disque dur pour accéder à un fichier image.

INTERFACE NOUVEAU BLOGGER

4 possibilités

Importer à partir de l'ordinateur

~~en glissant une photo~~ cela ne semble plus possible !
en parcourant votre explorateur de fichiers vous devez localiser puis sélectionner l'image

de Google Photos

Google Photos est une application et un service en ligne de stockage de photos et de vidéos, qui offre également des fonctions de retouche, de composition et de partage. Une fois que l'application pour Android ou iOS est installée sur votre smartphone ou votre tablette, les photos que vous avez déjà prises avec votre smartphone et celles que vous prendrez à l'avenir sont automatiquement affichées dans Google Photos : donc vous pourrez les utiliser pour les insérer dans votre blog

https://photos.google.com/

de Blogger (images issues de vos Blog )
https://get.google.com/albumarchive/

Google stocke toutes les photos qui ont été insérées dans votre blog. Elles sont classées par Blog (si vous en avez plusieurs). Vous pouvez donc les ré-utiliser !

A partir d'une URL

Les images pullulent sur les sites web lorsque vous naviguez :

-un simple clic droit et "enregistrer sous" vous permet de les récupérer

-un clic doit et "copier l'adresse du lien" permet de récupérer son adresse URL:

Tout cela n'est pas très légal !

donc si vous avez récupéré l'URL d'une image du web, vous pouvez l'insérer dans votre blog , mais attention, si l'auteur de l'image la supprime, votre lien n'affichera plus rien !

2-2 DEMO "image à partir de l'ordinateur

choisissez une (ou plusieurs images) situées dans votre ordinateur

elle(s) apparaît :

Pensez à la sélectionner (cliquer) : un cadre bleu d'affiche

cliquer sur "Sélectionner"

l'image s'affiche dans l'article, au point d'insertion

L'image s'affiche dans l'article et vous pouvez lui apporter des modifications : en cliquant sur l'image un menu apparaît

Vous pouvez

Aligner l'image (alignement Gauche/Centre/Droit)
Rectifier la taille avec + et - : de "petite " à "taille d'origine"
Ajouter/désactiver une légende qui apparaîtra sous l'image
Faire des modifications (ajout d'un texte alternatif et texte de titre, non visibles !)
Modifier le lien ou supprimer le lien qui s'affiche en bleu : en changeant le lien d'origine (URL de l'image dans Google), possibilité de faire un lien vers une URL spécifique qui s'affichera en cliquant sur l'image.

2-3 Conseils pratiques

Avant d'insérer votre image, positionnez votre curseur à l'endoit où vous souhaitez insérer l'image et anticipez son positionnement : à Gauche, Centré, à Droite et n'hésitez pas à utiliser l'outil d'alignement

Ce qu'il ne faut pas faire: ~~copier/coller une image~~ : résultat vous copierez du code qui sera illisible... A éviter absolument ! .

Il est parfois difficile de positionner une (ou des) images... au sein d'un article. N'hésitez pas à :

Utiliser l'aperçu pour vérifier le positionnement exact dans le navigateur ( il arrive souvent des décalages entre l'interface de création et le résultat final)

Pour déplacer et mieux positionner un image, le plus simple consiste (actuellement) à

"couper l'image"
puis mettre le curseur au bon endroit
enfin coller l'image.
parfois il faut tâtonner..

2-Optimiser vos images pour votre blog

A SAVOIR : comment Google comptabilise vos images ?

Google comptabilise dans votre espace de stockage total uniquement vos photos ou vidéos mises en ligne si :

-la hauteur ou la largeur de la photo dépasse 2 048 pixels ;
-la vidéo dure plus de 15 minutes.

donc il est très important de le respecter !

Choisissez une "belle image de qualité... et, surtout :

-à la bonne taille... inutile d'insérer une image géante !

-légère.. elle s'affichera très rapidement et occuppera peu de plalce sur le serveur
c'est plus attrayant ! et surtout bien normalisé

Comprendre les bases:

-Format

deux types d'images dominent : .PNG et .JPEG (ou JPG).

format JPEG = format standard qui gère efficacement les couleurs

format PNG = .PNG, nouveau format standard, plus précis que le JPEG et surtout qui gère la transparence (indispensable pour un logo)

-Poids du fichier

Une taille de fichier trop importante ralenti l'accès à votre blog.

Pus de 10Mo comme taille de fichier est trop !utiliser une taille de 50 Ko et 500 Ko voire 1Mo pour les plus grandes. (Si la taille de votre fichier est trop importante, cela peut signifier que la taille d'image est trop élevée, ou que la résolution est trop élevée, ou les deux !)

ASTUCE : réduire le poids d'une image en ligne avec Compress studio

-Définition ou Taille d'image :

Dimension en largeur et hauteur exprimées en pixels.
L'image d'en-tête (titre) de ce blog mesure par exemple 1100 sur 200 pixels.

Il est inutile d'intégrer des images de grande taille dans un blog (Google les comptera si elles sont > 2048 pixels !) : la taille maxi d'une image doit correspondre à la largeur maxi attribuée au texte de vos articles

A voir dans : Conception> Thème > Personnaliser> Ajuster la largeur

ici, la taille maxi d'image sera de 1150-300= 850 pixels

ainsi elle ne débordera pas surla barre latérale de droite

donc, le plus souvent une largeur maxi de 800 pixels suffit.

Résolution :

il s'agit de la densité de pixels dans votre image, exprimé en pixels par pouce (dpi ou ppi)
Rappel : 1 pouce = 2.54 cm.

La plupart des écrans affichent 72 pixels par pouce, donc une résolution supérieure est inutile et rend le fichier plus lourd que nécessaire !

Donc un résolution de 72 dpi suffit

Compléments ici sur notre blog "Publier ses photos"

Il existe

De nombreux freewares spécialisés qui permettent d'optimiser pour le web vos images comme, très simple, Image resizer pour windows ou Light Image resizer
Certains permettent de "travailler par lots" cad transformer un lot d'images en une seule fois, très pratique. EX FastStone photo resizer. XNview et son outil dédié XN convert

Nous conseillons de les utiliser pour "normaliser" rapidement et simplement vos images

des sites en ligne : PixlR permet à la fois de :

réduire la taille de l'image en conservant les proportions
réduire le poids de l'image lors de l'enregistrement de l'image (low/ med/high)

4-Présenter ses images bien alignées

Voir nos articles détaillés, toutefois, vous devez savoir qu'il faudra utiliser du code HTML pour y parvenir... :

Présenter des images avec du code HTMet CSS

Voir notre article "créer un tableau pour obtenir" :

5-Compléments utiles...

Où sont stockées mes images ?

Les images de votre blog sont stockées dans des albums archivés Google et apparaissent dans Blogger lorsque vous les insérez dans des pages ou des articles de blog.

Limites de taille ? rappel

La taille des photos ou des vidéos mises en ligne est comptabilisée dans votre espace de stockage total si :

-la hauteur ou la largeur de la photo dépasse 2 048 pixels ;

-la vidéo dure plus de 15 minutes.
donc pour économiser votre espace de stockage respectez ces tailles qui suffisent pour un blog.

Importer en une seule fois plusieurs images

Sélectionnez une ou plusieurs images à importer.
Cliquez sur Ajouter les images sélectionnées.

~~Faire glisser des images vers un article de blog~~

~~Pour ajouter rapidement une image à un article par glisser-déposer, procédez comme suit :~~

~~Créez ou modifiez un article.~~
~~Faites glisser une image à partir d'un dossier ou du Bureau, et déposez-la sur la page de l'article, là où vous souhaitez qu'elle apparaisse.~~

Désactiver la superposition des images

Par défaut, les images de votre blog apparaissent en superposition dans un format plus grand, c'est-à-dire en mode Lightbox. Pour éviter que les images ne s'affichent dans ce mode, procédez comme suit :

Connectez-vous à Blogger.
En haut à gauche de l'écran, cliquez sur la flèche vers le bas Flèche vers le bas.
Sélectionnez le blog que vous souhaitez mettre à jour.
Dans le menu de gauche, sélectionnez Paramètres puis Articles, commentaires et partage.
Sous "Articles", recherchez "Exposer des images en mode lightbox" et sélectionnez Non.
Remarque : Si les affichages dynamiques sont activés, vous ne pouvez ouvrir les images de votre blog qu'en désactivant cette option.

6-Insérer une image dans un Gagdet

-Aller dans "CONCEPTION" ou Paramètrage de votre blog

-cliquer sur le menu : Mise en page

selon votre modèle de Mise en Page, il est possible d'insérer des gadgets à divers endroits de votre blog (haut, pied de page, colonne de droite..)
Le plus souvent, les gadgets sont positionnés dans la colonne de droite.