Adding Images To A WordPress Page or Post

add-image-medi-button
Images are usually added to a post or page from within the Posts/page editor by clicking the add media button.

Images or media that you add are stored in the file system and not in the WordPress Database,but they appear in the media library which is stored in the database.

Before you add images you will may need to use image editing tools to make them smaller.

WordPress Image Sizes and The Web

Images from digital cameras are usually too large to be used on a website as they are.

My camera, for example, produces 2Mbyte jpeg image files.

I could upload these to WordPress as they are, but the visitor would experience a long load time when trying to view these images.

Therefore you should reduce the image files sizes by compressing the image using picture/image editing software.

I use the Microsoft picture manager which comes with Microsoft Office.

Here is a before and after screen shot of an image called Liverpool.jpg.

Notice how it has been reduced from 2.5 Mbytes (from camera) to 235Kbytes, and the corresponding change in picture dimensions from 4000px wide to 1000px wide.

reduce-image-size

To do that open the image with picture manager, and then click the compress link in the lower right.

picture-manager-compress
Then use the document setting to reduce the size of the image.

This setting will give the final image good enough quality when viewed as a full size image.
picture-manager-reduce-size

If you don’t have Microsoft Picture manager available there are many excellent free image reducers available.

Take a look at:

These programs also have the advantage that they work in batch mode which means you can resize multiple pictures at once.

Many of them also support image size selection so that you can crop them to fit your web page.

Adding Images and Other Media

add-image-medi-button
When you click on the add media button  in a page or post you will have a choice of uploading a new image to WordPress or adding a existing image from the media library.

add-image

Whether you upload a new image or use an existing image from the media library you will see the image details on the right of the screen under attachment details.

The title details are usually set by WordPress to the same as the image file name, but you can change it.

The ALT text field is not set by default but you should set it. It is usually the same as the image title.

attachment-details-1

You will also need to select the

  • Image Alignment -left,right or none
  • Link to – Generally set to none,but if a very large image has been uploaded then it will point to the image
  • Image size – Possible 4 choices – thumbnail,medium,large or original

attachment-details-image-2

Attachment Details Notes

Note 1 -The link to image is usually set to none and is only used if you upload a large image that will not display correctly as full size within the post/page.

Example you upload an image 1000px by 600px which is too large to fit within a page. In this case you would normally use a thumbnail image in the post with a link to the large image. When the visitor clicks the thumbnail a new window opens that displays the larger image.

Note 2: When you upload images to WordPress, WordPress will auto generate images of different sizes based on your media settings.

Note 3: The media settings need to be set before you upload any images. Go to Settings>Media

Note 4: Although we have use images the same process is used to add movies, pdf and word files etc

Deleting Images

You may have uploaded images or other media that are no longer linked to a web page on the site possibly because the page has been removed or you have updated the media.

These images/media are unused and can safely be removed. To do that go to the Media library and select the list view then use the filter to display only unused media.

If you place the mouse over an image then a menu appears that allows you to delete it.

wordpress-delete-image-media-library

Here is a video that takes you through the process.

You can also delete media by selecting it and you should see a link to delete the image/attachment as shown below:

delete-wordpress-image

If you have lots of images/attachments that you want to remove then you can use a plugin like the WordPress media cleaner.

Note: Always make sure you have a backup of your WordPress Files before you do this.

Image Storage

Images and any other attachments that you upload are stored as part of the file system under the wp-contents directory and not in the database with the page/post content. -See WordPress Uploads and Media Settings and Storage.

 Video

Summary

It is very easy to add images to a WordPress page or post. However you need to remember that you should take cared not to use very large images and this may mean that you need to compress the image before uploading.

Related Tutorials and Resources:

Save

Save