Step 1 – Compressing The Image

A. First, make sure you have the original image that you want to compress. If the original image file size is below 4.75mb’s then proceed to step 2. If it is above 4.76mb’s then proceed to step 1a – 1f below.

1. As the original Image is above 4.76mb’s we must first reduce the file size. To do this, to go https://cloudconvert.com/.

2. Click Select File, and upload the image.

 

3. Once it has uploaded, click the spanner icon, then change the settings to be the same as the image below, the click the blue OK button to confirm those settings.

Tip to save time: you can compress multiple images at once

4. Next, click the red ‘Start Conversion’ button in the bottom right of the screen.

5. When the image has been processed click the green download button.

6. Now the image should be under 4.75mb’s, and you can move onto step 2. If it’s not, repeat the process of uploading the original image to Cloud Convert, and instead of using a max width of 4000px, change it to 3000px or lower, until the image is below 4.75mb’s.

B. Now, open https://tinypng.com/

C. Upload the image to this website for it to be compressed. To do this, either drag images into the green cut out area in the middle at the top of the screen, or click on the green cut out area and open the folder with your image(s) in and select all of the image(s) you want to compress and click the Select button.

D. After the image has uploaded, the website will take a second to compress it, then you can either individually download each image by clicking the download button on the right-hand side. Or if you want to download all of the images at once, click the ‘Download All’ button below the images.

Step 2 – Renaming The Image

Next, we want to rename all of the file names to be SEO friendly. You need to ensure there are no spaces in the file name as this means there will be less likelihood of issues on web servers.

1. If you have been provided with a filename for the image skip to step 2. If not follow the advice in section 1a below.

a. If no preferred filename has been provided for an individual image, you will need to make one up. The idea of the filename is to quickly describe the image. Here are a few examples:

• If the image is of a person, the field name will be that person’s name e.g. the person in the image below is Henry Reith, so the file name will be ‘henry-reith’.
   
• If the image is of a building such as The Sky Needle in Seattle, the filename of the image will be ‘the-sky-needle-seattle’.
   
• If the image is of an event, for example, a Fridge Networking Event in Melbourne, April 2017, then the filename of the image will be ‘fridge-networking-melbourne-april-2017’.
   
• If the image is of something specific within the event e.g. Henry Reith speaking on stage at the Fridge Networking event, then the filename will reflect that. So, in this case, it would be ‘henry-reith-speaking-at-fridge-networking-melbourne-april-2017’.
   
• If an image is of a company’s logo e.g. the Audi car company, then the filename of the image will be ‘audi-logo’.

2. If you have been provided with a file name, or have come up with a file name based on step 1a of this section then you just have to rename the file following these rules:

• All words must be lower case,
   
• All spaces must be replaced with hyphens “-“,
   
• Keep file name to a max of 120 characters.

3. If the image is a JEPG file – then having named the file – the next step is to add basic metadata to the image as shown below. If the image is a PNG then there is no need to add metadata.

a. Open the file profiles panel (right click ‘file’, then click ‘properties’) and navigate to the details tab on the properties panel.

b. In the title section, add the title of the image, this will generally be the file name of the image without the hyphens for spaces. In the Authors and Copyright sections, add the URL of the blog post or page that this image will be embedded in. If you don’t know the URL of the page the image will be embedded in, you can work it out by looking at the draft of the page you are creating.

3. Now, click ‘apply’, then ‘OK’ to save the changes.

Step 3 – Uploading The Image To WordPress

Now we have compressed the image in step 1 and edited the filename in step 2, we are now ready to upload the image to WordPress. The below process is the same for both Featured Images & images within the content.

1. First, make sure you have the blog post open that you want to add the image to. If you are adding a featured image, click the ‘featured image’ button on the right-hand side column of the blog post editing screen, this will open the image upload screen.

Or if you are adding an image to the content, first, ensure the image you are going to add has it’s own individual line. Then place your cursor on the line within the content that you want to add the image to and click the Add Media button at the top of the content editing screen. This will open the image upload screen.

2. With the image upload screen open, either click the ‘Upload File’ tab then ‘Select File’ button in the middle of the screen and navigate through your file system to the image you want to upload, select it and click ok to upload it. Or the easier way to upload an image is to drag it from your folder system into the central area of the image upload screen in WordPress.

3. When the image has finished uploading, you’ll need to fill in all of the image default meta options inside WordPress. Here is what you should fill in for each section:

• Title: This should be a short title for the image. Generally this will be the same as the filename of the image without the hyphens, but with spaces instead and with the first letter of each word Capitalised.
   
• Caption: This is the text that will be displayed below the image within the content to help give it a bit more context. This is great if you have a graph where you want to say where it’s from e.g. ‘Biggest Challenges Facing Startups Today Fridge Magazine’s SME Report 2017’. Or If it’s a photo from an event and is of specific people, the caption would be just their names e.g. From Left To Right: Henry Reith & Tom McCarthy. Or if the image is a company’s logo, the caption will be ‘Audi Logo’.
   
• Alt Text: The alt text is the most important part of the WordPress meta detail as this is the description text that people see if the image does not load on a page for some reason. Or if the reader is using a screen reader, the alt text is the text that is read to them to help describe the image that they cannot see. So the text in the box should be one sentence (5 – 15 words) that describe what the picture is. Examples:
  
  If an image is the Audi logo, then the alt text will be ‘Image of the Audi car’s logo’
  
  If the image is of Henry Reith speaking at a Fridge Networking event in April 2017, then the alt text will be ‘Henry Reith pointing at a screen and speaking at the Fridge Networking event in Melbourne – April 2017’
  If the image is a landscape in Australia, then the Alt Text will be ‘Image of the outback near Ayers Rock in Australia’.
   
• Description: The description meta box is mainly used to give a full paragraph description of an image. For example, if you run a photography or art website with image galleries, it may be helpful to provide a long description of the image and some background around it. However, on most article & content based website, the description field is not used. So unless otherwise instructed you should just copy the alt text you have written and use it for the description field as well.

4. (Complete this step if meta fields are available) Below the fields mentioned above, there may also be two extra fields ‘Attachment Photo Credit’ and ‘Attachment Photo Credit URL’. These allow WordPress to store and show the image credit data we can ensure we properly attribute photographer for the images.

If these fields are available then you should add the information to them. If you have been provided with the information, use that. If not, e.g. you have downloaded the image yourself as part of putting content together or information just hasn't been provided where possible add the name of the person or website who should be credited and add a link back to the website where the image came from.

Preferably a link to the actual download page, but if that’s not possible a link back to their home URL is fine.

5. Having added all the meta information possible, click either the blue ‘Set Featured Image’ or ‘Insert Image’ button.