Apart from text, images are the most common media published online.
And the one that tends to cause a lot of problems for users.
This guide will step you through the process of importing or downloading an image, preparing it for the web, placing it on your page, as well as showing you some excellent plugins to enhance the visual experience on your site.
Best practice for images
- File named with keywords (good for filing and SEO)
- Relevant to your post
- Resized to the largest dimensions you want it to display
- Optimized for web display with software like iPhoto, Picasa or Photoshop.
- In a common web format i.e. JPG, GIF or PNG.
WordPress Media Settings
When you upload an image to WordPress it creates three other resized versions from your original. Thumbnail, Medium and Large.
To changes these settings, navigate to Settings >> Media and adjust the figures to fit your site.
- Thumbnail – 150 x 150 (dimensions are in pixels)
- Medium – 250 x 250
- Large – [your content width] x 1024
The thumbnail image is usually cropped square and is useful for headshots or previews.
The medium size is great for placing in articles such as this one, floated to the right or left so that text wraps around it.
The large image is full width and should fit your page exactly.
You can use these browser add-ons to measure the width of the content area on your site.
Browser Ruler Addons
Preparing your images
Before you upload your images you need to resize them and optimize them for web display.
Image Editing Software
Right before you upload your images you should look at their file names. This is especially important for search within your media library but is also important for SEO. Good luck finding that wonderful sunset image if its file name is DCS128745.jpg.
Placing images into pages
See the post: How to add an image to WordPress (with SEO tips)
Creating image galleries
See the post: How to add an image gallery in WordPress
Placing images into your sidebar
See the post: How to add images to your sidebar
Plugins for image processing
These bits of code will help you manage and reprocess images you’ve already uploaded to WordPress.
Plugin: AJAX Thumbnail Rebuild
If you change the dimensions at Settings >> Media this allows you to rebuild all your previously uploaded images.
This plugin resizes the original image uploaded to your media library to more reasonable dimensions.
Reprocessing Image Quality
Plugin: WP Smush.it
Reprocesses uploaded images and ones already in your library that have not been properly optimized for web display. This saves you space on your server as well as making your pages load faster!
Renaming Image Files
Plugin: Media Rename
This makes it easy to rename media files in your library without disrupting your existing content. More on using this plugin here.
Royalty Free Images
Images downloaded from royalty free sites are ready for web display so all you need to do is choose the largest size, rename the file and upload to WordPress. NOTE: Remember to put a credit at the bottom of your post.
Some great sources for royalty free images are:
More about royalty free images here.
Popular Image Plugins
These plugins are some of the best supported and add powerful image features to WordPress.
- Jetpack – Excellent mobile responsive carousel and tiled galleries among many other goodies.
- Next Gen Gallery – A fully featured image gallery plugin that includes slideshows, sidebar widgets and an easy to use editor button.
- WP jQuery Lightbox – A simple to use lightbox plugin that works on mobile devices as well.