Last Updated on
In the old days one had to use a lot of code to create a website, including the adding of images. With the CMS system WordPress it is all that easier. In this guide I will explain to you how to add images to a WordPress website and how to edit them any further.
The Old Styled HTML Way
If you were to write your website from scratch, you would have to learn some HTML to add images to your website. There is a special code needed for adding images to a site. In fact, all websites out there are created using HTML, just that nowadays we use advanced editors that do the work for you.
Within your HTML website, an image is linked as following:
You would than need to make sure that both the image image-example.png (as in this example) is located in the place that you link towards for it to work.
As you can see, things get quickly really complicated when you create a website from scratch. I have done this for years and therefore I would easily do this still, but with systems like WordPress, building sites is so much easier.
In WordPress adding images goes much quicker and easier. A lot of things are done on the fly and the editor comes with a handy user interface. The code (such as the HTML code above) is generated by WordPress. All the hard work is done for you, so that you can just concentrate on building the content of your site.
Adding Images With WordPress
Above the editor, where you are writing your article, there is a button named “Add Media…”
Clicking on this button, a new (overlay) screen is displayed with two tabs, Upload Files and Media Library.
With Upload Files you can either click the “Select Files” button and find the images you want to upload within your PC or you can directly drag and drop your image(s) to the big square in the middle.
Select/drag multiple images at once and they will all be uploaded silmutaniously, when you used the Select Files option you need to press on the “OPEN” button to upload the selected images. If you used the drag and drop method, uploading will start automatically. While the images are being uploaded, a progress bar is shown per image of the progress.
When the image(s) are uploaded, you can change their so called META information. Now is the time to add a TITLE, the Caption, which is displayed beneath the image and an ALT tag to your image. The TITLE and ALT tag are most important, because they can improve your SEO.
If you already have uploaded your image(s) earlier, you can go to the Media Library tab. Here you can find all your previous uploaded images. You can change their META info and there is even an editor to resize or rotate your images if you need to do so.
To place an image into your current site (at the cursor position usually when you click on the “add media” button), you click on one of the images and click “insert into post”.
Note: If you have multiple images selected (checked), they will all be inserted into your page/post at that position.
Editing Images With WordPress
Although it would be best to edit images before you upload them, WordPress also has an inbuilt editor to edit images. You can do the more simple tasks such as resizing (scaling), cropping and rotating an image by the press of a button. You can also crop the images while selecting an area in the image to crop towards. You can than either save the image for all formats or for only one of the saved sizes.
It is pretty straight-forward. You click on an image and click on the Edit Image link. You than get to see the image and a set of tools to do different things.
For cropping you need to use your mouse cursor within the image to select a certain area for cropping and than you need to click the crop button.
For rotating the image, you need to click on the rotation buttons for either direction, clockwise and counter-clockwise.
To scale the image, you have to fill the target size in pixels. You can easily do this by filling in the new size for the longest length, because the other length will be calculated from that. Portrait images have the longest end on the vertical axis, while landscape images have it on the horizontal axis.
Reducing File Size
To keep your site’s speed optimal for all platforms, it is a good idea to reduce the file size of images before uploading them to WordPress.
There are platforms that allow you to upload the file to them. The website than generates a compressed version of the image and you can than download it again to upload it to your site.
Examples of compression services:
Reducing the file size of an image isn’t only about a thing called compression, but is also done through changing the size of the image (width and height) through an image editor or through the WordPress image editor.
Most websites do not have more visible area than about 600 pixels in width, while image materials is often much bigger.
So saving images in a much bigger format means that you are displaying and resizing images within your website that are way bigger than they need to be. When a visitor visits your site, they are downloading the large images along with the rest of the content.
Reducing the width and height of a picture can be done using an image editing program such as gimp or for example PixResizer.
I will not go too deep in on the works of each program, because that goes a little beyond the scope of this article, but it will be saving a lot of space on your webhosting and your website will be a lot faster when images are smaller.
Have you got any experience adding images to your WordPress post or page? Did you also reduce the file size before uploading? Which program did you use for this? Please share this and more in the comments below!