Adding images to WordPress Posts using SiteContent and WordPress

byDynamicDavid

1.5K followers

Updated 7 years ago

When adding images to WordPress Posts, it is possible to make the size of the images smaller, both in the width and the height as well as the image file size.

Note: If you do not want to decrease the size of the image file, you might want to look at my "Changing Image Size inside of WordPress" article instead. This is at the following link:

https://my.wealthyaffiliate.co...

The rest of this article outlines how to make the size of the images smaller, both in the width and the height, as well as the image file size.

For instance I retrieved an image from SiteContent:

It was 940 pixels in width, 625 pixels in height, and 187 KB in image file size.

I decided that this image needed to be 1/3 of its width and 1/3 of its height for my WordPress Post.

When I followed the process below, my resized image was 310 pixels in width, 206 pixels in height, and 16.5 KB in image file size.

The resized image file size is over 11 times smaller than it was, so this also helps the image to load quicker for the viewer of my WordPress Post.

This is what I do:

Step 1 - Retrieve the image from SiteContent

• Site Content, Create New, Start a Blank Document
• No need to put in a Title for this
• Underneath where the title is entered, click the Image Icon
• Add in a Search term and click the Search box
• The next bit is to crop the image or select as much of the image that is required to make the selected crop in rectangle form or circle form
• The "image processing form" is inside a window, so it may be necessary to go down a bit to see the rest of that window
• Click on the "Save and Insert" box at the bottom of the "image processing form"
• The image is now in the SiteContent Editor
• Right click on the Image in the SiteContent Editor
• Save the image to the hard drive
• Image saved to the hard drive
• Using Windows Explorer, hover over the image file to see its properties:
• Of course, you might do this in a different way on your computer
• Note down its width (940 pixels), its height (625 pixels), its file size (187 KB), its file type (jpg)
• Of course, your file properties are going to be different
  

Step 2 - Make the image smaller

• Load up this image into PIXresizer
• See Making images smaller to learn about PIXresizer
  https://my.wealthyaffiliate.co...
  
• Select new size, in this case selected 33% (there are other options there, as well as custom size)
• In your case, decide what the values should be (Play around a bit)
• Select new file format, click on JPEG, and change value to 75
• In your case, decide what this value should be

• I explain why I use "75" in the article about PIXresizer
• Select Save Picture
• Edit Picture Name if required and save it
• Image saved to the hard drive
• Using Windows Explorer, hover over the resized image file to see its properties:
• Note down its width (310 pixels), its height (206 pixels), its file size (16.5 KB), its file type (jpg)
• Of course, your file properties are going to be different
• Note: Decide if a few sizes are required and if so, go through the above process for each one
• If featured images are used in your WordPress Theme, make sure that the physical size of the featured image is close to an actual image in WordPress Media Library for performance reasons. You might have a featured image and an article image for the same image
• The original image is say lake.png, the featured image is called say lake-featured.jpg, and the article image is called say lake.jpg
• In this case, only upload the lake-featured.jpg and lake.jpg images to WordPress Media Library
• You decide what is actually required in your case and what your approach is going to be
  

Step 3 - Adding the resized images into WordPress Posts

• Upload the resized image to WordPress Media Library
• Upload whatever images to WordPress Media Library
• Add the 'image code' to add the images to the applicable WordPress Posts
  

More detail regarding how to do the above tasks can be found here:
https://my.wealthyaffiliate.co...

Step 4 - Like this article

• If you liked this, feel free to push the "Like This” button :)

Question and Answer Session

Question:

I add some of images to my article in Site content. I crop the images round shape. Then I realized I have published my article, so I click Publish and Edit. Then in Word Press, I re upload images from my file, but I have no ideas how to make the images that I insert become round shapes, it only can be rectangle or square shapes. Do you know how to edit the images to be round shapes in Word Press? I preferred the images that I edited in the content in Site Content template, but I don't know how to re publish the content and images together. Do you know how to do it? Thanks very much.

(Thanks to one of our WA Members who asked me this question in PM)

Answer:

Do Step 1 - Retrieve the image from SiteContent (see above). NB Create a new document in Site Content - this is to grab the round image in Site Content, this new document in Site Content will not actually be used - you might delete it when you are finished with this process. Leave the original article in Site Content alone. This process is not going to touch it.

Do Step 2 - Make the image smaller (see above) if you need to.

Do Step 3 - Adding the resized images into WordPress Posts (see above) to bring the image into your WordPress Media Library.

Note the name of the image file - maybe the same name as your current rectangle ones with -round at the end. Say lakes.jpg is the name of your image file. When you re-do it, call the round version say lakes-round.jpg

Then do back to your WordPress posts and rename "lakes.jpg" to "lakes-round.jpg" remembering to change the dimensions of the file (width and height) if you have to. And remember to actually click on update. And always test the articles to ensure that the content looks right.

--------------

Question:

When I follow the instructions exactly as outlined in Step 1 - Retrieve the image from SiteContent above, I do not the option to do anything with it. Is there any other way to get it out of SiteContent?

Answer:

Another way to get it out of site content would be to publish the post with just the image to your web site. Then use FTP or FileZilla to get the image from your WP library folder to your PC. Remember to delete that post with just the image if you don't need to keep that post.

--------------

Like this article

• If you liked this, feel free to push the "Like This” button :)