Images

This chapter provides step-by-step instructions on how to upload and optimize images for web use, including the process of uploading an image, optimizing images for web use, and how to adjust the size of images using EdTech Books’ editorial tools, placing and accessing images, and making images accessible.

Uploading an Image

To upload an image:

  1. Start on the page that you wish to edit.
  2. Click on the pencil icon to start editing the page.
  3. Select the area where you wish to add the image.
  4. Click on the “+” button in the top right-hand corner.
  5. Select “Image” from the features.
  6. Click on “Browse/Upload.”
  7. Upload an image from your computer.
  8. Once your image has been uploaded, save your content.
  9. Exit out of the editor by clicking on the “x.”




Image Sizing

Image sizing on the internet can be a bit more complicated than authors initially think, because you want your work (a) to look good, (b) to download quickly, and (c) to adapt to different screen sizes. This means that images should be optimized for the web by making them the right size and format. Our editorial tools help you do some of this, but here are a few useful tips and guides.


1. Not too Big

Because your image will be shown on a website with fixed maximum dimensions, you should not upload any images that are wider than 1,200 pixels.

If you upload images larger than this, they will be scaled down to fit the screen, and the extra size will just make the page load slower for your readers.


2. Not too small

Having said that, any images smaller than the maximum will look fuzzy if you try to show them at full-screen width. So, if you upload anything smaller than 1,200 pixels wide, you should scale it down on your page to avoid fuzziness.


3. Use the sizing tools

You can adjust the size of your image to be small, medium, large, or full-screen.

To adjust the size of your images:

  1. Open the editor.
  2. Click on the image.
  3. Select the desired size from the right control panel.
  4. Save your content.



Image placement

You can place the image to the left, right, or above the text. 

To adjust the placement of your images:

  1. Open the editor.
  2. Click on the image.
  3. Select the desired placement option from the right control panel.
  4. Save your content.



Image accessibility

  • If possible, use high-contrast images to ensure visibility.
  • Avoid text within images; if necessary, provide a text description.
  • Ensure images are relevant and add value to the content.
  • Add alt text.

Adding alt text

Include descriptive alt text for all images. To add alt text:

  1. Open the editor.
  2. Add the image description to the alt text box.
  3. Save your work.