WordPress:Using Images
WordPress makes it easy for you to add images to your WordPress site. You can upload them directly from within WordPress by using the built-in file uploading utility in the post screen. Or you could use any FTP Client software to upload many images to your WordPress site.
WordPress让你非常简单地给你的WordPress站点添加图像。通过使用文章 界面内置的文件上传功能，你可以直接地在WordPress里下载图像。或者你可以使用任何的 FTP Client软件将许多的图像上传到你的WordPress站点上。
The Quicktag buttons feature an image link, making it easy to link to images from within your post as you write it. If you used the inline upload feature, your picture will be in the /wp-content folder.
Quicktag 按钮有一个图像 链接，链接到你写的文章上的图像变得简单。如果你使用行内上载的功能，你的图片会在/wp-content 文件夹中。
Wordpress can now (within the posting page) resize images and create thumbnails. There are also photo galleries that can show many images without adding each one separately to a page.
WordPress现在可以（在置入的页面中）调整图像的大小并且创建极小的东西。也有图片集可以显示许多的图像，而且不需要将每个图像单独地添加到一个网页上。
And if you choose to let the images speak for you, consider creating a PhotoBlog or Gallery. 如果你选择让这些图像替你说话，你可以考虑创建一个博客图片或者图片集.
Images Resources for Wordpress
Wordpress图像资源
thumb|right|Example of images in background, sidebar, blockquote, and postThere are a variety of WordPress Image Plugins which add image functionality, utilities, and galleries to your website. Some run from within WordPress while others stand alongside.
thumb|right|背景，工具条，blockquote标签，中图像的例子有许多的WordPress图像插件可以给你的站点添加图像功能，效用和图片集。有的在WordPress内部运行，而有的则是WordPress外部单独运行。
You can also add images to your WordPress site through the use of template tags, plugins, and in the style sheet of your Theme. For example, you can add images to your:
通过使用模板标签，插件，和你的主题的样式表，你可以给你的WordPress站点添加图像。例如，你可以添加图像到你的：
- Footer
- 页脚
- Between posts
- 在文章之间
- Between lists
- 在列表之间
Using Images in Posts
在文章中使用图像
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.
图像可以以许多种不同的方法在你的WordPress文章和网页中使用。它们可以是一个主题，也可以是一个引用的详细信息来提升信息或者故事的价值。
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. Wordpress: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.
下一个要考虑的事情是图像的大小。真正地制定一个图像的大小，有两种方法。图像或者就是本身的大小，或者是一个极小的链接，当你点击它时，它就会带你来到一个新的网页，这个网页便有一个放大了的图像。
Image Size and Quality
图像尺寸大小和质量
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.
；文件类型：通常在因特网上能发现X图形类型jpeg,gif,png 和 (关于最喜爱的图标 (地址旁边的图标)) 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.
图像的物理尺寸是我们需要知道的信息，来决定图像在网页上会占据多大的"空间"。如果你的WordPress主题的特色是有一个600像素的固定宽度的内容区，你想使用的图像是800像素，图像便会排挤工具条和你的网页周围的布局，混乱了你的设计。如果图像是在600像素的宽度以内，你就需要将图像限制在最大的宽度以内，以保护你的网页的布局。由你决定图像的大小应该是多少，来与整体的布局和设计相搭配。
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. 文件尺寸规定了加载你的页面的时间，文件的尺寸越大，通常会增加，因为一个高的图像分辨率质量，加载的时间会越长。人们通常没有耐心来等待长时间的网页加载，所以是你的文件尺寸保持很低，来加速你的网页载入时间。通常来说，高质量的图像应该保持在100K到60K.小的图像应该接近于30K或者更低的。
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:
站点使用四个常见的文件类型。一个文件名的最后部分（称作扩展名指出了文件是属于那种类型的。一种类型，ico,是用来制作一个最喜爱的图标的文件—但这个通常只有在网站已经首先设置好了的情况下，才起作用。其它的三种类型供常见的图像使用：
- 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.
- jpg (JPEG)对照片较使用。将一张照片以jpg保存，除掉了图片中的详细信息。好的照片编辑器，让你控制清楚了的详细信息的数量("压缩")。不同的照片需要不同的压缩；认真地做，浏览结果，可以给你一个拥有小的文件尺寸的有用的照片。
- gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
- gif对照片不太好。它更适用于艺术线条，像logos,拥有同样颜色的面积。
- 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.
- png对于照片和艺术线条都适用。它在没有丢失详细信息的情况下，压缩了照片，但是通常比JPEGs制作的照片文件要大。一些老的浏览器也不完全支持png。
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. 如果你不确定哪一个文件类型更加地适合一个特别的图像，试着将文件保存在几种类型，并且比较一下文件的尺寸大小。使用一个正确的类型起着很重要的作用！在Sitepoint's GIF-JPG-PNG 不同的是什么文章中有更多的信息。
Resizing 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. 1）你可以通过使用提供的工具来重新调整图像的大小，工具允许你动手改变图像的边缘，来将图像变形，或者重新调整图像大小。角落"处理"通常能重新调整图像大小，保持总体的高-宽比例。查看你的手册以得到特别的指示说明。 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. 2）另一种方法包括简单地规定图像的最终尺寸。高级的图像程序允许你通过精确的尺寸或者缩小或者扩大的百分数来重新地调整尺寸的大小。 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. 但你已经调整了你的小尺寸的图像或者新的极小的东西，将图像以jpg, gif, or png输出。
Styling 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.
图像可以有边缘，框架，说明,并以多种方式设计。基本上有两种方法可以设计你的站点上的图像。你可以在一个设计表上设计它，也可以在一个特别的图像的内嵌设计。
Styling All 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.
在你的WordPress 主题的style.css设计你的图像，可以包括你的站点上的所有图像或者特别的图像设计。
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.
为你的站点上每个图像都设计一下，使它们看起来特别，为image tag找一个或者添加一个CSS选择器。然后将你的类型添加到标签上。例如，假如你想让你的图像的周围围绕着一个黑色的边沿，而且你想让边沿和图像之间留有间距，也想要图像和文字周围留有合适的间距。
img {
margin: 5px;
padding: 10px;
border: solid black 1px
}
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
}
img {
margin: 20px;
padding: 10px;
border: double black 1px
}
Styling Some 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.
你可以将一个特别的图像的特别的形式添加到你的形式表上。如果你已经设计好了你的所有的图像，你必须确定你规定了每个设计的说明或者规定了image标签形式的属性，来制服那个属性。如果你不改变页边的空白，那么它在新的形式中仍然会保持原样。这个叫做CSS母/子关系.
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.
假如你想让归档在自然类别，有一个美丽的绿色背景，中的文章上有一些儿图像。其它的图像看起来应该是一样的，就是你添加到你的自然分类中的图像。你只要将一个class添加到你的样式表和分类中的每个图像。
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.
方便记忆，我们称我们的class "自然"。我们想在图像周围有一个非常深绿的厚的边沿和一个中等绿色的背景，来突出图像。
img.nature {
margin: 20px;
padding: 20px;
border:solid #003300 4px;
background: #006600;
}
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":
在分类中的每个图像上，你只有为"自然"添加class：
<img src="leaf.gif" alt="Red leaf" class="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. 如果你需要为不同的图像准备更多的类型，你只要创建更多需要的类型就可以了。
Styling One or Two Images Inline
设计一个或者两个图像 Inline
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.
有时，你只想让你的站点上一个或者两个图像看起来与其它的不一样。这个技术叫做inline形式。它直接将CSS形式应用到图像自身。
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" />
<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."
这并不是一个用于每一个图像的技术。这只用于一些特殊的图像，需要"一些特别的东西。"
Resources
资源
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.