As We all know 1000 words can't describe but one Image describe that all so this is the power of an Image. On the Web or Blog world, an image could break up text, which can part the sea of text making it all more readable. An image can also help illustrate a point, and provide SEO value.
An image could find its way into image search results on a search engine. It can also, with the inclusion of keywords in its meta tags, potentially help a post rank for more keywords. Not only that, the image can be auto-thumbnailed in search results and show up when shared in Facebook or other social sites.
A search engine result with an image will attract the eye more so than one without, in most cases.
Adding Images to WordPress Posts in My Way
When I add an image I edit the image to be the exact dimensions that I want to work with. I used free tools like Gimp. You can use Photoshop too (if you have it).
But now I use Snagit for Edit cause for Copyright (Discuss below). it just cost you $50, but you could lot more than it. it values for every penny you can get it from this link.
I then, using good old fashioned FTP, upload the image to the trusty “images” folder off the root.
I then hand code the image tag in “Text” view of my WordPress post/page edit screens.
The code might look like this:
<img style="float: right; margin: 0 0 5px 10px;" title="pictre of a bat" src="http://example.com/images/pic.jpg" alt="picture of a bat" width="187" height="94" border="0" />
Let’s break the upper code
src: this represents the path to the image. I always use the full domain here so the image shows proper in RSS feeds, etc. In only one case when working for someone else they asked that I use only /images/pic.jpg without the domain in case they link-spam the domain with their SEO and need to switch domains. Doing it this way would save them the extra work later. Doing things ethically would prevent this from being a concern, but I digress.
width/height: the dimensions of the image, I always make sure they are the “real” dimensions, not just ones to force the size of the image.
alt: this is meant to be a textual representation of the image for the visually impaired, bandwidth savers, text browser users, and search engines.
title: usually, depending on the web browser, this phrase will be shown when hovering over the image. It is supposed to provide SEO value too but I think it is overkill and over optimization personally, so I usually leave it out.
border: out of habit I always include this, which is a value in pixels that determines the size of the border around the image. It used to be that, when linking an image, if you didn’t explicitly tell all browsers NOT to include a border, then it would add a bad looking blue border. So, I got in the habit of using it. I use CSS for borders when I really want them.
style: it’s probably not best practice to include styles in this manner. It’s a bad habit I picked up. It is preferred to include styles within CSS sheets, and make reference to the style with a class name (or ID). WP does this elegantly when using the automated tools for including images which I will cover shortly.
The particular style I used in the above example pushes the image to the right and wraps text around it to the left. I specified that I do not want a margin at the top or right side (represented by the first two numbers), but that I wanted 5px on the bottom and 10px on the left to create some white space around the image so that it doesn’t touch the text. Why had different amounts? I haven’t measured but it seems that there is always 5px below the image with margin space for some reason, so I just add 5 more and it always looks pretty even.
Image Sources & Copyright
You have to be careful when using images on your site or blog. If they are either copyrighted or assumed copyrighted it is best to either a) not use them or b) get permission. And always cite the source of the image.
You could get images from stock photo sites (example: ShutterShock) that grant you rights to use them. morgueFile is another source, which offers a free photo archive. Be sure to read the terms.
You can always get your own images. Either download them from your digital camera or phone or get some screenshots. There’s a free Chrome browser plugin by Google that makes it easy to take screenshots. Screenshots, at least, will provide you with unique images that you can probably use on your WordPress sites. Just be careful and always cite your sources. Get permission from the respective owner when not sure. Always show respect.
You should use SnagIt or photoshop for your photo. If you can't make a photo then just google it download and edit it by snag it. It is better to do in Photoshop, but everyone can't do it in photoshop.
Snagit is very easy to use and it is low size so it doesn't affect your PC also.
Inserting Images Into WordPress Posts or Pages
Using the Add Media within the add/edit post/page screens will give you access to the Media Library.
It will also allow you to upload images that will get auto-resized based on the set thumbnail values for the particular theme that you are working with.
You can set an image as “Featured” or insert it right within the post. When setting as Featured, the theme will have full control over placement and size, and the HTML that gets generated.
When “inserting into a post” you have a little more control. You can certainly decide where the image is placed, and you could choose from some set “classes” to decide on text wrapping, etc.
Follow these steps.
Step 1) Click the Add Media button.
Step 2) Click the Select Files button.
Step 3) Locate the image on your computer, and click Open.
You can see the progress meter in the image slot itself, plus in the right side of the Attachment Details window.
You can click the Edit Image text link for basic cropping, and image flipping options. You can choose to have the changes applied to all of the thumbnails that were created during the upload process.
Step 4) Give the image a Title, and preferably a Caption, and Alt Text as well, for some potential SEO value. Some themes, but not many, will incorporate the Description value somehow.
Step 5) Pick an alignment (center, left, right) or leave it as None.
Step 6) By default, the thumbnail image that gets inserted will link to the biggest version of itself (the originally uploaded file). That can be changed to link to an attachment page (some argue that will give the best chance of getting the image into Image search results if it’s worthy of being there). You can also have a link to a custom URL, or nowhere at all.
Step 7) Finally, choose one of the pre-built sizes. Most often there will be a small square and a couple sizes that are within aspect ratio of the original, and also a Full-Size option. Medium is usually the default.
When using screenshots for tutorials such as this, Full Size should be used so there is no distortion.
Step 8) Click the Insert into post button.
You will be presented with code similar to the following:
The id’s and classes may be defined by the theme which will dictate how the image will ultimately look within the blog post (or page) on the site.
Some unique classes will be displayed specific to the image. They will include the image id number, 57 in the example above, which allows you to give the particular image a custom style that will not be used on other images.
Adding Featured Images Into WordPress Posts or Pages
When adding a featured image, no HTML code will actually show up in the posts/pages content area. The theme will “check for” a featured image when the post is being shown and display it according to the theme’s style.
Step 1) Near the bottom of the right sidebar of the post/page add/edit screens you will see the Featured Image box. Click the Set featured image text lin
Step 2) You will be presented with the Media Library by default where you can select an image and click the Set featured image button.
You can also click Upload Files near the top if the image isn’t already in the library.
You can then follow the Upload steps from above, minus the “Attachment Display Settings” instructions. Then click the Set featured image button.
Uploading Other Media Files to WP
You could upload other media files like videos and audio to be included within your posts, use the Media Library functions described another post.
It is often recommended, however, in many cases, to have the audio and video hosted elsewhere and just embedded into your site. WordPress plugins likeWP video lightbox can help you with that.
This saves on bandwidth and storage space, plus also allows you to take advantage of the inbuilt traffic, and the search engine love, that these media sharing sites have to offer.
YouTube and Vimeo are the top choices for video. And SoundCloud is the rising star for audio. As for images, some people will do a similar thing and upload to Flickr or Pinterest for example, then embed the content into their site.
I sometimes do that for general interest type of images (food for example), that have value on their own. Screenshots, in most cases, somehow don’t qualify.
I hope now you get some more knowledge about Adding Images to WordPress Blog. If you have any information about this topic feel free to comment or contact us. I will get back to you.