Images

There are a few basic guidelines to keep in mind when uploading images for the wiki: adding an alt attribute to the image and compressing the image's size.

Image Compression

Image compression is the process of reducing image file size by eliminating unnecessary data; don't worry if that doesn't make sense, basically it cuts out chunks of an image (that are invisible to the human eye) thereby making the image's file size smaller. This is helpful for page load speeds, web-performance optimization, search-engine optimization, and the overall user experience. Compressing images is extremely simple, all you have to do is upload the image(s) to an image compression site, follow their instructions (which will vary per site), and then download the compressed images. Then your image(s) will be ready to be uploaded and placed into the wiki document that you are editing. There are a bunch of image compression sites available, however it's recommended to use kraken.io, as it has proven to offer a superior optimization service. There are a few options involved when using Kraken, as shown in the image below; simply follow the steps after for easy to follow guidelines.

Kraken.io Image Optimizer Options

• Upload the image(s) you'd like to use here
• Select Uploader - most likely these images are on your desktop, so select Uploader
• Select Lossless or Lossy
  • Use Lossy if you are uploading a "natural image", like a photograph
  • Use Lossless if you are uploading images that are not photographs
• Attach the image(s) to be optimized - use either option, whichever you are comfortable with
• And you're done! Download your image(s); the image below shows the download dialog:

Download Your Optimized Images

Process times will differ depending on the number of images being optimized, as well as the quality of the image(s), but times typically are brief. Once you've downloaded your optimized image(s), go ahead and place them into the wiki document you are working on. If you optimized more than one image, they are going to download in a zip file; before you can upload them, unzip the images onto your desktop, then place them into the document that you are editing.

Adding the alt Attribute

After inserting image(s) into a wiki document, it's important to add an alt attribute to it, briefly describing what the image is. So if you were editing a page and wanted to upload a picture of the Naval Asylum at Naval Medical Center Portsmouth, an equivalent alt attribute for it would be "Naval Asylum at Naval Medical Center Portsmouth". Now that we have our alt attribute defined, let's see how to add it into the wiki. First, insert your image(s) into the document, add a comment about the edit(s) you've made, and click save changes. The image below is an example document, displaying the page once it's been saved:

Adding Alt Attribute Example 01: Edited Document After Being Saved

Once the page reloads, select edit, and then select the Source option from the wiki editor atop the document. This shows the HTML that makes up the page's content, but don't be alarmed! You aren't going to have to do any coding. All you have to do is locate the image, here's what to look for: an <img element marker; this is the image you just uploaded. There should be a space after it, and immediately following a src="" attribute, with the image's name in it; in our case src="portsmouth-naval-asylum.jpg". It should look something like this:

Adding Alt Attribute Example: the Document After Selecting the Source Option. Uploaded Image is visible by src="portsmouth-naval-asylum.jpg"

Last step! Now all you have to do is add the alt attribute containing the image's description too the <img; in this example, we are going to add alt="Naval Asylum at Naval Medical Center Portsmouth" in between the <img src="portsmouth-naval-asylum.jpg". Make sure that there is a space between all three before you save. The example below demonstrates this:

Adding Alt Attribute Example: the Document After the Alt Attribute has been added

Once you've done this, add a comment in regards to the alt addition to the document and click save, your done!