fr:Using Images
Page d'accueil du Codex en français - Télécharger WordPress en français
Les utilisateurs francophones se retrouvent sur le site WordPress-Francophone, notamment sur son forum d'entraide.
Contents
WordPress vous facilite la vie en rendant très simple l'ajout d'image sur votre site WordPress. Vous pouvez les télécharger directement depuis WordPress en utilisant l'utilitaire de téléchargement inclus dans la page d'écriture d'un article. Ou alors vous pouvez utiliser un logiciel Client FTP pour télécharger plusieurs images sur votre site WordPress.
Les boutons "Quicktag" présentent un bouton pour faire un lien vers une image, rendant ainsi très facile la liaison d'images depuis votre article lorsque vous êtes entrain de le rédiger. Si vous utilisez l'utilitaire de téléchargement d'images vu précédemment, votre image ira directement dans le dossier /wp-content.
WordPress peut à présent (dans le formulaire de publication) redimensionner et créer des miniatures. Il y a aussi les galeries photo qui vous permettent d'afficher plusieurs images sans avoir à les ajouter une par une séparément dans l'article.
Et si vous choisissez de laissez les images parler pour vous, il serait préférable de créer un PhotoBlog ou une Galerie.
Ressources : des Images pour WordPress
Vous pouvez aussi ajouter des images sur votre site WordPress à travers l'utilisation de marqueurs de modèles, de plugins, et dans la feuille de style (css) de votre Modèle. Par exemple, vous pouvez ajouter des images à vos :
- Categories
- Commentaires avec gravatar
- Symboles graphiques
- En-tête
- Rubriques
- Smileys
- Barre latérale
- Pied-de-Page
- Listes
- Menus
- Entre deux articles
- Entre deux listes
- Flux Graphiques
- Liens et Blogrolls
- Liens suivants et précédents
- Marqueurs de Modèle - avec de nombreuses fonction de paramétrage de l'image
Utiliser des Images dans Vos Articles
Images can be used in a variety of methods in your WordPress posts and Pages. They can be a major subject, or a referenced detail that enhances the information or story.
The first thing you should consider is the "look" of the images on your page. Not what the images are of, but the general look of how they flow and interact with the rest of the content on your page. Wrapping Text Around Images helps you to begin to understand how images interact with the text around them, changing the margins, padding and borders around the images within the content. It will also help you understand how to create captions under your images.
The next thing to consider is the size of the images. There are two ways of actually sizing an image. It is either the size that it is, or a thumbnail link which, when clicked, takes the user to a new page with an enlarged image of the graphic.
Taille et Qualité de l'Image
The size and quality of an image for use on a web page is determined by a variety of things.
- Physical Size
- The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.
- File Size
- This is the size of the file on your hard drive or server.
- Resolution
- Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.
- File Type
- There are basically X image types popularly found on the Internet: jpeg,gif,png and (for favicons (the icons next to the address)) ico.
The physical size of the image is information we need to know in order to determine how much "space" will the image occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles.
File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower.
The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.
Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size.
Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file -- but this is usually only done when a website is first set up. The other three types are used for general images:
- jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.
- gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
- png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though.
If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in Sitepoint's GIF-JPG-PNG What's the Difference article.
Redimensionnement des Images
Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don't have the feature, you may have to find different software.
The process of resizing images is fairly simple. There are usually two methods:
1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner "handle" will usually resize the image maintaining the overall height-width ratio. Check your manual for specific instructions.
2) The other method involves simply specifying the image's final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement.
After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software.
When you have fine-tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png.
Donner du Style à Votre Images
Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image.
Donner du Style à Toutes Vos Images
Styling your images from within the style.css of your WordPress Theme can cover the styling for every image on your site, or specific images.
To style every image on your site to look a particular way, look for or add the CSS selector for the image tag. Then add your styles to the tag. For instance, let's say that you want a black border around all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text.
img {
margin: 5px;
padding: 10px;
border: solid black 1px
}
Maybe you want something a little more dramatic. You can change the border thickness and set it to a "double" line. And maybe you really want to isolate your image from the rest of the text, so you increase the margin around the image.
img {
margin: 20px;
padding: 10px;
border: double black 1px
}
Donner du Style à Quelques Images
You can add to your style sheet a specific style for certain images. If you have already styled all of your images, you must make sure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you do not change the margin, then it will remain the same in the new style. This is called the CSS Parent/Child Relationship.
Let's say you would like to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images should look the same, just the ones you add in your Nature category. You simply add a class to your style sheet and each image within that category.
To make it easy to remember, we'll call our class "nature". We want to have a very dark green thick border and a medium green background around the image to highlight it.
img.nature {
margin: 20px;
padding: 20px;
border:solid #003300 4px;
background: #006600;
}
On each of the images within that category, you simply add the class for "nature":
<img src="leaf.gif" alt="Red leaf" class="nature" />
If you need more styles for different images, you can create more of them as needed.
Donner du Style à une ou deux Images de Ligne en Cours
There are times when you just want one or two images on your site to look different from the rest. This technique is called inline styles. It applies the CSS styles directly to the image itself.
For example, say you want to have an image isolated against a back background to call attention to it.
<img src="leaf.gif" alt="Red leaf" style="padding:20px; background: black; border: none" />
This is not a technique to use on every image. It is to be used on occasional images that need a "little something special."