Uploading Images to Your Self-Hosted WordPress Site

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

This post is a is a quick guide on uploading images to your self-hosted WordPress Site. It sits alongside the series we have done on building a self-hosted WordPress site and installing Ultimatum Theme. Firstly, let’s see how we can upload an image to WordPress. Note that in the admin Settings => Media page I have the ‘Organize my uploads into month- and year-based folders’ unchecked (off), so anything I upload will go into the uploads main folder. I have an image ready to upload. In this case, I took a screenshot of me uploading a file. The file is the one we shall use as a site logo for our development site, called United. So, I have actually uploaded the logo and that screenshot.

Uploading Images to Your Self-Hosted WordPress Site - Upload ImageUploading Images to Your Self-Hosted WordPress Site - Upload Image Files MadeUploading Images to Your Self-Hosted WordPress Site - Save Resized Image

You might think that, therefore, there would now be two images in the uploads folder on my server. Instead, there are six! This is because WordPress also makes smaller versions of the files, according to your general Media settings. We covered this in Build a Self-Hosted WordPress Site – Part 4. I am going to point out something weird here. One of the two original files was called upload-image.png, and is sized 1043 x 707 and is 95.5KB in size. WordPress made a small version, at 800 x 542, which is over twice as big at 248KB. This seems to be a problem with WordPress when it re-sizes the larger image size. Much the same happens if I re-size the image in PhotoShop and save it. However, online help is at hand.

First, I download the four new files made by WordPress back to my local computer, meaning I have the six files on the server and my local computer. Using the ImageSplitter website, I upload the original of upload-image.png, and follow the 7 steps shown in the screenshot. Step 1 is to type 800 in the Width box. The height will automatically change. If the new height is above 600, type 600 in the height box and the width will automatically adjust to less than 800. Change the image type to match the original (in this case png), then click the blue ‘Resize Image’ button. Opt to save the file, browse to where your downloaded the files to, click on the name of the re-sized file that is already there, in this case it was upload-image-800×542.png, say Yes to the warning, and then Save. Note how this version of the file is only 92.5KB, a considerable saving. The six files at this stage on my local computer add up to 275KB.

Uploading Images to Your Self-Hosted WordPress Site - Upload To KrakenUploading Images to Your Self-Hosted WordPress Site - Save From Kraken

Now I open the Kraken website, and drag and drop the images there, leaving the settings at default. Then download the archive file that contains your six files to your local computer and extract them from the archive. They are now only 95.8KB. If you compared that to the six files still on your server, which total 429.9KB, you can see that these new files are more than 75% smaller, with no appreciable image quality loss. as you add images to your posts, the posts will load faster for your website users, and you will need less drive space and less bandwidth. Both the ImageSplitter and Kraken websites are free to use in the way I have shown. I have compared these results to the free plugins (there are a few, such as Smush.it and EWWW) and this method produces far better results. Kraken does have a paid for service plugin for WordPress, but it can get expensive.

 

Also in this series of posts:

Build a Self-Hosted WordPress Site – Part 1
Build a Self-Hosted WordPress Site – Part 2

Build a Self-Hosted WordPress Site – Part 3
Build a Self-Hosted WordPress Site – Part 4
WordPress SEO by YOAST for Beginners
Ultimatum Theme for your Self-Hosted WordPress Site
Ultimatum Theme for your Self-Hosted WordPress Site – Part 2
Ultimatum Theme for your Self-Hosted WordPress Site – Part 3
Ultimatum Theme for your Self-Hosted WordPress Site – Part 4
Ultimatum Theme for your Self-Hosted WordPress Site – Part 5 – Breadcrumbs
Ultimatum Theme for your Self-Hosted WordPress Site – Part 6 – Bootstrap Breadcrumbs
Customizing Ultimatum Theme and WordPress
Fix for mysql_get_server_info() bug/error in Ultimatum 2.7.3
Ultimatum Special Offer! Save more than 55% off Pro Version

Categories: WordPress.