Add Images

Images are a great addition to a blog post, as they can help to illustrate a point, and help to break up the monotony of an all-text entry by adding some personality.

Because a blog is a web-based system, it is extremely important to resize and optimize all images for web delivery before uploading them!

This keeps your blog loading fast, and ensures you don’t eat up your blog quota too quickly.

Each blog has a maximum file space of 200MB.

Each file can be no larger than 2MB.

We recommend keeping images to 200KB or smaller, and hosting audio/visual content on a streaming server (like Google Drive or Youtube).


Before you begin

These steps are useful for anyone who is comfortable using an image editing program, such as Photoshop, Photoshop Express, iPhoto, Gimp, etc. Since each program is different, the instructions below are quite general – referring to the task, instead of the specific name of a tool or button in the program. Please refer to the help documents in your software as needed.

Prepare your image file

  1. Open your image in your image editing software of choice.
  2. Look at the dimensions of your image. Your blog post can only display the image at a certain size, so a 1000×1000 image will need to be cropped and/or resized in order to fit.
  3. Crop: Take a look at the image – is there anything that you can cut off of the image? Cropping tools are great for helping you focus on the most important part of the image.
  4. Resize: Once the image is cropped as much as it needs to be, it needs to be resized. Your image editing program will have tools that allow you to resize an image to an appropriate size.
  5. Web-ready format: Save the file to a lower resolution web-ready format. In general, photographs should be exported as .jpg files, while graphics work better when exported as .gif files, but there are also quality settings that you should compare and consider.
  6. Be realistic. The web is not the place for high-resolution images or video. If you need to include these in your blog post, consider uploading them to Google Drive first, then embedding them in the post.

Need a quick way to resize an image?

If this is your first time having to worry about things like image file size and formatting for the web, and aren’t comfortable using image editing tools like Photoshop, this is a great first step.

Adobe has an online image editing tool, called Adobe Photoshop Express, which will allow you to quickly and easily resize your image and reduce the file size.

  1. Go to this page in your web browser and upload your image file: https://photoshop.adobe.com/resize.
  2. Start with the “Resize image” settings. Since you will be posting this image to a blog, you likely don’t need anything wider than 1000 px. Set the width as you like, then click outside of that box. It will automatically adjust the height so that the proportions of the image are maintained (you don’t want to stretch or squish your image).
  3. Click the “Resize Image” button at the bottom of the page to save the changes and resize the image.
  4. Click the “Download” button at the top.
  5. If your image is a photograph, be sure the file format is set to JPG. If it is a graphic (i.e an illustration or a logo), set it to PNG.
  6. Look at the quality – the file size is listed below. Slide the quality marker so that the image is below 100 kb. 
  7. Download the image to your computer.

Take a look at the image – if the quality was degraded a bit too much, you can try resizing the image again with a higher quality setting. The goal is to keep the file size as low as possible while maintaining a decent looking image.

I have only highlighted the resizing and downloading options of this tool – be sure to check out some of the other available options, like cropping!

*Please note: Ryerson can make no claims or promises regarding the software described here, as it is not within our control. This is being offered as an option for you to consider, and use at your own discretion.

Only upload file formats that are appropriate for the web. It is important to determine the best settings that will give you the smallest possible file for web delivery, without degrading the image too much.


Add an image using the “Image” block

Steps to add an image block
Add the ‘image’ block to the post or page.
  1. Click the plus symbol (+) in the upper-left corner of the editing window.
  2. From here, you will be presented with a number of options – the simplest thing to do is start typing the word ‘image’ into the search field. WordPress will show you any blocks that it thinks you may be interested in.
  3. Locate the ‘image’ block and click on it. This will place the new image block at the bottom of your document.
Steps to add your image to the image block
Add your image, then arrange as you like.
  1. If you have already uploaded the image to the blog, click “Media Library”, and select the image from the collection. If you need to upload the image from your computer, click the “Upload” button and follow the on-screen prompts to upload the image.
  2. When the image block is selected, you can choose to align the image centre, left or right.
  3. When the image block is selected, use the arrow icons on the left side to move the block up or down the page.

IMPORTANT!!! ADD ‘ALT’ TEXT
Immediately after uploading an image, look to the right-hand sidebar to add some important details. ‘Alt’ text describes the image for visitors with limited vision – this text is read to them using assistive devices.

Steps to customize an image block
  1. When the image block is selected, click the icon in the top-left corner of the block for some additional style options.
  2. Choose to display the image in the default (rectangular) shape, or in a rounded shape.
  3. If you change your mind about the type of block you want to use to display this image, you can transform it to another image-related block type by clicking the block type at the bottom of the pop-up.
  4. Delete any unused images from your blog’s Media manager, to free up the space. Be careful not to upload duplicates of the same image!

About resizing and optimizing

Image Size

Your blog’s content area has a limited width, taking into account any sidebars that make up the full width on the right and/or left. That means you are limited to a certain width of image. It is important to make a version of your image that fits within this space before uploading it to the website.

To get the image to the proper width, you may choose to crop it, removing any unnecessary parts around the perimiter of the image. Otherwise, you can resize/scale the image.

Since different blog themes may have space for different sizes of image, you may need to try a couple of different sizes in order to find the best one.

Don’t forget to delete any old files from the Media folder, otherwise you are using your blog quota for images that aren’t even being used!

Optimize file size and format

Once you have cropped and/or resized your image to the appropriate size, you will need to save or export it in a format that is web-friendly. One of the most important parts of this process is to bring down the quality of the image, and therefore lower the filesize.

Your image file should be no larger than 100KB, preferably no larger than 50KB.

In general, JPG is the format used for photographic images, while GIF or PNG are used for graphics.


Additional resources