Adding Media

For information on how to choose images for your website, see Images

Image Alt Text (Alternative Text)

Image alt text serves a couple of purposes on your website. The most important thing is that it makes your site accessible. The easiest way to manage this is to always include the alt text when you add a new image to your media library. That way, anytime you use that image the alt text will be included.

The alt text also adds searchable keywords to your website improving your Search Engine Optimization (SEO). If you can, you should try to use keywords in your alt text; however, the text still needs to make sense and give an appropriate experience for those using a screen reader.

Tip

If you are planning to work is K-12 or Higher Education, your portfolio must be accessible. Don’t skip this step!

Reducing Image Size

You will soon discover that if you are planning to load large items like Articulate Storyline modules, or Captivate modules, that you have limited disk space with your website provider. There are a few things you can do to reduce your disk usage when it comes to images: (1) store images in image repositories, (2) resize the images, (3) use jpg format, and (4) compress the images. 

Your feature image needs to be in your media library. However, other images do not need to be stored locally on your system. If you use another image repository such as Flickr or Smugmug you can embed your images rather than storing them directly on your website. 

Another thing you can do to reduce the file size is to resize the image. I recommend resizing to twice the size you needed, which helps keep the image looking sharp on high resolution screens. For example, if my image is 900 x 1200 on the screen, then I would crop and resize my image to be 1800 x 2400. 

Images can be stored in a variety of formats including jpg, png, gif, and svg. JPG images result in the smallest file size and if they are resized as above they still appear clear.

Finally, you can use a tool to compress your image. I find that the free tool, compressor.io to do a great job of making my images smaller without negatively impacting the quality.

Image Workflow

For images that will be stored on my website, such as feature images and icons:

  1. Choose image, ensuring it is free of copyright.
  2. Resize and crop the image to 2X what you need.
  3. Export resized image as jpg.
  4. Run image through compressor.io.
  5. Upload image to media library.
  6. Add description and alt text.

This content is provided to you freely by EdTech Books.

Access it online or download it at https://edtechbooks.org/professional_presence/media_library.