When you insert a captioned image, the HTML editor won’t include the actual code (the code that can be seen if you view the sourcecode of your published post or page); it will only include a shortcode: a fixed formula that simply tells the theme to apply its default styling for captioned images. For that reason, the styling of image captions isn’t directly editable: you can’t apply any of the tools of the Visual editor, or modify the caption part of the shortcode in the HTML editor, to change the formatting of the caption (doing so will only mess the result on the blog, and then you can only remove the image from the post and re-insert it).
Image captions in Twenty Eleven are adorned with a strange dash, and the text is left aligned and pushed to the right of the dash. That’s part of the default styling of the theme, but some users don’t like it – and I don’t blame them… If you have the Custom Design upgrade and experience in CSS editing, you can change the styling once for all (see here). If you don’t have the upgrade, you can use the workarounds described below to get rid of the dash and center the caption text on an image-by-image basis. What these workarounds do is replace the shortcode with the real code needed for a captioned image: the real code can be freely modified. And of course these workarounds can be used in any theme (with different properties and values in the code, depending on how the default captions are styled and what you want to change); see example here.
If you wish to insert a non-clickable image in relatively small size, the best practice is to make sure the image has a resolution of 72dpi and the pixel width you really want on your post. If the image isn’t already so, make a copy of it, downsize it to the right resolution and pixel width in an image editing application, and use that copy. The reasons are that a) browsers display 72dpi versions no matter what the resolution of the files you have uploaded, and b) images downsized by WP lose some color and sharpness (see my post on image quality). So if you upload large high-resolution files you actually lose quality, your blog pages take longer to load, and you waste your storage space.
By relatively small I mean anything up to the width that can fit in the main column of your blog (or your sidebar, if you want to place the image there using a Text widget). So in general you need to consult my posts on maximum displayed image width and sidebar width.
But note that the widths listed in these posts refer to plain, non-captioned, images. In most themes captioned images show up inside a frame that encloses the image and the caption, and the frame will usually eat up 10px of width (in some themes more); in Twenty Eleven the safe maximum is around 550px.
Step 1: Click the Add Media button of the post/page editor and upload the image from your computer. Once “crunching” is over, type a short description in the “Alternate Text” field (optional), don’t type anything in the Caption field, click Link URL > None, select the alignment you prefer, select Size > Full Size, and click “Insert into Post”. Then switch the editor to HTML; the image code will look like this:
The URL of the image starts with http and ends with the filetype suffix (jpg or png or gif). The filename is the actual name of the file you have uploaded. WWW, HHH and IDIDID stand for the width, height and identity numbers of the image. Also, in all these code models I’m using alignleft: can be alignleft, alignright, alignnone, aligncenter (see the Notes at the bottom if you aren’t sure of the differences).
Step 2: Replace that code with this:
ZZZ should be WWW+10 (or a little more, but always an even number). You can change the 4px, to make the bottom part of the frame smaller or larger.
If you wish to insert a non-clickable image in relatively small size, but the original is larger, start with Step 1 as above, but replace the initial code with this:
YYY should be the width you want on the post. Again, ZZZ should be YYY+10 (or a little more), and you can change the 4px to adjust the bottom part of the frame.
(This version of the workaround isn’t really recommended, for the reasons I explained under A, but I’m including in case you don’t know how to or you cannot properly downsize your images.)
If you wish to insert an image in relatively small size that links to the larger original when clicked, then you’re no longer interested in best quality on the post. But again, if possible, you should use copies of your images downsized to 72dpi and a reasonable width: most users’ screens are no wider than 1000-1200px, so there’s no point uploading, say, 4000px wide images (again you would be needlessly wasting your storage space and considerably increasing the loading time of your blog pages).
Start with Step 1 as above, but replace the initial code with this:
As in case B, YYY should be the width you want on the post, ZZZ should be YYY+10 (or a little more), and the 4px can be changed.
Change <a href to <a target="_blank" href in the above code, if you prefer having the larger original open in a new browser window or tab.
• The code I have added right before the caption removes the dash and centers the text in relation to the image, but retains the default font, color, and size of image captions in Twenty Eleven. You can change those as well, or you can add more commands to further modify the styling of the caption. If you change the font, you must confine yourself to the fonts commonly installed in most users’ computers (see my post Formatting text pt. 5); if you prefer the regular font of the theme, just remove the font-family:Georgia; bit.
• Alignleft/alignright mean place the image at the left/right side of the available space, and start the rest of the content next to the image (wrap around). Alignnone/aligncenter mean place image left/center, and start rest of content below image (no wrap around).
• To remove the dash and center the caption text in Twenty Eleven if you have the Custom Design upgrade, you add this in the CSS editor: