It is best to customize any images you want to use on your pages, before uploading them. There is also some text you need to add to each file’s description before using it.
You need to create two versions of your images beforehand. One is a small one that will appear on your page. The other one is a larger version that will be displayed when someone clicks on it.
The width of a page is fixed at 800 pixels, to make it easy for people to read the text without having to turn their head left and right, which causes eye strain. So you need to keep this in mind when sizing your page images.
Think of where you want your page image to appear. If you want to make it the whole width of the page, then make it 750 pixels wide (50 pixels are used for white space either side). If it is going to be part of some text and on the left or right hand side, then make it 200 to 400 pixels wide, as I have done below.
Pages and images are automatically resized down by WordPress when viewing them on handheld devices such as tablets or smartphones. You don’t have to make different sized images for these types of devices. On very small screens, the layout will also change, to focus on only the content you are actually viewing at the time.
Full Size Image
You then need to make a full-sized version. You are not limited to any width for this one, but anything wider than 1600 pixels for a landscape or 900 for a portrait image is going to be an overkill and is the maximum I would recommend.
To easily tell which one is which in the Media Library, I suggest you name your images:
“imagename-th.jpg” for the small one and,
“imagename.jpg” for the large one.
I recommend you only use JPG, PNG or GIF file formats. Other types will be very large in physical bytes, causing your page to load very slowly.
How to Upload Your Images
Once you’ve created your two images, click on “Media”, then “Add New”. You can either upload your images by browsing your computer or simply drag and drop the images into the dotted line box. Once they are uploaded, click on “Library” and you will see all your images.
You can only see your own uploads, not those of any other member.
It is possible an image belonging to another member has the same name as the one you want to upload. If so, yours will have a suffix added such as “-1”. If you don’t want this, delete your image, rename it, and upload it again.
Preparing for Image Linking
How you link the images will be explained later, but the important thing to remember for now is, the name of the image that will show for the larger one is taken from the “Alternative Text” for the image.
To set this, change to “List View” by clicking on the icon shown at #1 in the screenshot.
You can now see the names of all your images. Hover over an image and click on “Edit”.
Do this for each image you have just uploaded.
Your images are now ready to be used whenever you need them.