Images, graphics, photographs, drawings, cartoons, badges…our websites are filled with imagery.
This article addresses the techniques used by WordPress for aligning images and image sizing and links in published content. Check your publishing platform for their methods.
Image Terminology in WordPress
There are several terms we need to develop to help you understand how images are used in WordPress. The most important terms describe the images within WordPress based upon how they are used and generated: original image, published image, media file, and attachment image.
The image uploaded to your site is called the original image or image file. When uploaded to WordPress, a minimum of three sizes are automatically created and stored in the wp-content/uploads/ directory on the server. The images are grouped by year then month by default.
The image sizes available for displaying in your content are thumbnail, medium, and full-size. Depending upon the image’s original size, large and x-large may be available. Full-size is the original uploaded image size.
When an image is used on a web page in WordPress, it is typically viewed within the content area of a post or Page. For the sake of this tutorial, we will called this the published image. WordPress makes available the three size options by default.
Image Sizes and Links
The WordPress Media Uploader redesigned in 2012 now features Attachment Display Settings options. They include setting the alignment of the image, the size of the published image, and the Link To feature.
An image may link to nothing, called None. Not itself or another site.
It may link to a Custom URL, a web page or site destination.
It may link to itself, the Media File option. When the image is clicked, the user would see the full width of the image on a blank white or black screen with no branding, design, or designation associated with your site. Using this method, we call the the end result the media file or file image.
The most popular option is Attachment Page. When the image is clicked, the user is taken to an Attachment post with the image displayed at the full width of the content area of the WordPress Theme. The Attachment Page (it is a post) features the image within your site’s WordPress Theme, the title of the image as the post title, and the comment form for discussions and comments. This is the attachment pageview or image attachment. One more click and the user goes to the Media File view of the image at its full width on a blank white or black screen with no WordPress Theme elements.
If you would like to learn more about the WordPress Media Uploader and image handling, read “Check Out the New Media Manager in WordPress” on Lorelle on WordPress.”
This article will focus upon editorial content images, not images on photoblogs or for commercial usage or incorporated into web design.
Now that we have the terminology of images in WordPress, let’s move to preparing your image for uploading and choosing an image size to display in your content.
Original Image Sizes and Attachments
Teaching about web images, I often run into confusion over the term image size. We need to consider the size of the image physically, how wide and tall the original image is when uploaded.
There is the dimension of the image and the size of the file to be uploaded. Depending upon the dimensions of the image, the resolution, quality, file type, and number of colors, the file size may be just about anything.
In general, the smaller the image width and height, the smaller the file size, but not always.
The general rule of thumb for uploading images to the web today in website content is an image not wider than 1024 pixels and a file size no larger than 300KB (1/3 megabyte).
Why?
It’s up to you to choose your own guidelines, but these are typical limits many bloggers put upon themselves to keep their web pages lean and fast loading.
When an image appears on your website, it is loaded into the web page. The size of the published image is set by the user and may not reflect the dimensions or file size of the original image. We’ll get to more on that in a moment. Just remember, the larger the file, be it by dimension or file size, the slower it loads on the site, and the slower the entire page loads. A good user experience on your site is one with little time wasted between the arrival and the consumption of the content.
The typical width of a web image should be no wider than the average monitor width for your audience, and a file size no larger than necessary to crate that original image size.
Let’s do a little math. In 2012, the average monitor width for most web users is a resolution higher than 1024×768, with many stretching as wide as 1920 pixels for the total monitor width. A web page is typically designed narrower, and the content column even narrower. Most content column widths range from 500-800 pixels wide. Therefore, an image wider than 1024 pixels is usually unnecessary.
Understand that this is an evolving estimate. As more people use mobile devices, average screen widths are actually shrinking. Consider your audience and the size of monitor they are using for your estimates for the max width of uploaded images.
If your content column width is 600 pixels wide, the width of the image when viewed on the page should be no wider than 600 pixels. If you allow for some margins and padding around the image for whitespace, the image might be set to 580 pixels width.
As for the file size, while large metropolitan areas offer residents high speed and wide bandwidth connections, the majority of the world is still connecting on slower Internet connections, often with mobile devices on restricted plans. A 300K image on dial-up Internet may take as much as a minute to download and view on a web page. The same image might take 15 seconds on broadband. Consider the agony of waiting for an image to load before the content does on a phone, a large image pouring through a narrow funnel. It pays to keep your image file sizes small.
How small?
As computer technology has improved, image dimensions and file sizes have increased. Yet with the boom in mobile technology, if the majority of your audience is mobile, consider shrinking these down.
My personal rule of thumb, as mentioned, is no image wider than 1024. If the image is a glorious and colorful photograph, I will permit up to 500 kilobytes, rarely larger. For tutorial images, I save them as PNG files and keep them between 50-100K for the fastest loading time and least wait time.
How do you change an image from your digital camera to meet such original image size recommendations?
How to use a graphic or photo editor program is beyond the scope of this article. Look for Resize features to reduce the size of the image. Many programs offer an Export wizard to help you export the image to be web ready, changing the original format to JPG or PNG, optimizing the resolution and size of the image for the web.
Preparing Your Images for Uploading
On the subject of preparing images for uploading to your site, here are some last minute tips.
Name the image: An image file name of DCN3978502348.jpg isn’t helpful to anyone, let alone yourself. Rename the image file to a name you will recognize and understand such as sunset-on-beach-at-manzanita-oregon-2012.jpg. Most computer systems will recognize spaces in file names, but hyphens or underlines are also acceptable.
Title Your Image: Once uploaded, give your image a title in WordPress. Consider this the name of the artwork such as Mona Lisa by Leonardo Da Vinci. I highly recommend you include your name if you are the creator of the image.
Describe Your Image: In the United States and most countries, you are required by web accessibility and equal access laws to provide an alternative description (ALT) for each image on your site that adds to the understanding of the content, if your site is commercial, non-profit, or open to the public (such as a government agency). Alternative descriptions also help with SEO. An alternative description is a description of the image written in a proper sentence such as “Painting by Leonardo Da Vinci of a young age woman sitting in a chair not smiling at the painter.” It must describe the picture or offer enough information that someone visually impaired can understand what the image is and how it relates to the content.
Image Positions and Sizes in Content
Once an image has been uploaded, it’s time to add it to your site’s content on posts or Pages.
Here is a list of the decisions you need to make as you embed an image into your WordPress content.
Will the image float to the right or left of the content, or should it be centered between paragraphs?
Will the image have no link, link to its Media File, another site, or its Attachment Page for a larger view and comments?
If you wish to have the reader click on the image to view it within your WordPress Theme design, choose Attachment Page in the settings.
If you wish to have the reader click the image and go right to the full-width view of the image, choose Media File.
If the full-size of the image is on the page, choose None to remove any links around the image as they are not necessary.
What size will the published image be within the content?
Will you be adding a caption?
A centered image is usually the width or a little less of the content column, if that image is the main subject of interest or important to the article. Set the alignment to center and the image width to full-size or an appropriate width.
If you wish the image to float to the right or left within the content column, choose the alignment direction and an image width typically 3/4 or less the width of the content column. If the content column width is 600 pixels, 400 pixels or less is an appropriate width. An image aligned to the right will sit against the right margin with the text wrapping around on the left side of the image.
Is there an absolute perfect size for an image floating to the right or the left in the post content? While these numbers are typical, some images easily work as thumbnail sizes, about the size of a postage stamp. Other images need to be larger in order to make their point clearly. These are recommendations not absolutes. Choose the sizes and alignment options that work best for the story you are telling and the style in which you present your material on your site.
WordPress offers four styles (CSS) for positioning images within the post content. The alignment is set in the Media Library when adding images to the post. It may be changed at any time by clicking the image.
The alignleft positions the image to the left with the text flowing around to the right of the image.
The alignright positions the image to the right and allows the text to wrap around to the left of the image. The alignright is the CSS style designation found in the WordPress Theme which controls the placement of the image.
The aligncenter position places the image in the center with no text wrapping around the image. When using the center alignment, place the image on its own line. I also recommend making center positioned images the full width or large enough to fill in the space.
The alignnone CSS style adds no alignment to the image. The image sits where you put it. If used in the middle of a paragraph, like the example of the box in this paragraph, it will force the line that is it on to the height of the image, making it difficult to read easily.
If an image’s width exceeds the column width of the content area, modern WordPress Themes feature a style that reduces the width of the image to fit within the column so it doesn’t break the design.
Editing and Troubleshooting Images in Your Blog
Once you have added the images, preview the post or Page.
If the images crowd each other, pushing the content or each other around, you may fix it by editing the images through the Visual editor, or use the shortcut method with the Text (HTML) Editor.
Viewing the HTML of the post, find the image Anchor HTML tag. Select the entire Anchor HTML tag to cut and paste it into a more appropriate location. Save the post as a Draft and preview the post again to check the positioning.
The HTML tag features the alignment as a class such as class="alignright". If you wish the image to float on the left, change alignright to alignleft.
If the image appears too small or too large in the post, you may quickly “resize” it by removing the height and changing the width. For example, if the image is width="500" height="800" you can delete the height and change the width to width="300" and the image will automatically adjust the height accordingly.
Tips for Including Images in Content
The following is a list of tips and things to consider when adding images to your content.
With multiple images in a single article, alternate images to the left and right to avoid overlapping and pushing the other images around.
Images on the right or left should be one half or less the width of the content column. Wider than that and it starts to break the word lines into unreadable positions.
If the image is relevant to the article, specifically instructional, place it in the center and set the width to full so the image will appear as large as possible on the page for viewing.
Images on English and right-to-left language sites tend to work better more on the right than the left. Images on the left margin tend to cause the eye to jump over text at those points. Right alignment of the images allows for the words to be read on the left in keeping with the left to right reading pattern, and the images do not interrupt the flow of the eye down the page. If you wish to interrupt the flow, float the image to the left using the left alignment.
Images on the left within or overlapping bullet and number lists often interfere and overlap and block the bullets and numbers unless the web designer took that usage into account and provided adequate padding or margins.
If the image is irrelevant to the article, consider not using one. Not every post requires an image. That’s a myth. No picture ever improved your SEO unless you are a professional artist or photographer or it is a picture of a naked celebrity. If your article has the answer, people don’t care if it has a picture or not, unless the picture answers their question. While we all like a little eye candy, use irrelevant images judiciously.
For more information on WordPress image handling, the WordPress Media Uploader, and web images, see:
Adding an image gallery (WordPress.com support document)
Check Out the New Media Manager in WordPress « Lorelle on WordPress
The 10 HTML Tags You Must Know to Blog | Learning from Lorelle
Testing Video Floats and Alignments | Learning from Lorelle
The Basic Structure of a Blog Post | Learning from Lorelle
Public Domain, Free Photography and Images for Your Blog | Learning from Lorelle
Plagiarism, Copyright, and Fair Use
Links and the Anchor HTML Tag
JPEG 101: A Crash Course Guide on JPEG
Styling Images in Posts and Pages « WordPress Codex
Styling Images in Posts and Pages « WordPress Codex
Image publishing guidelines – Webmaster Tools Help
Types of Web Images: GIF, JPG, PNG – When to Use Each Type
Should you Choose JPEG or PNG for Better Image Quality?
Image Optimization Part 1: The Importance of Images – YUI Blog
Reduce Digital Noise in Digital Images « Lorelle on WordPress
WordPress Plugins for Images, Photographs, and Graphics « Lorelle on WordPress
Save Images As High Quality With Version Numbers « Lorelle on WordPress
Filed under: blogging, web writing, WordPress, wordpress intro, wordpress tips Tagged: alignment, content, gallery, graphics, image uploading, images, media uploader, multimedia, photographs, pictures, publishing, web publishing, web writing, wordpress, wordpress images, writing for the web