How to Upload Images
Table of Contents
Image Optimization: What is it? Why is it Important?
Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality. So, when adding images to your website, it is important to realize that size matters. Image file size is important because images often make up a large portion of the overall size of your website or web page. By reducing image file size, you will improve website speed, which improves search rankings(Google) and provides a better user experience for your consumers. It also reduces storage costs and improves the performance of maintenance tasks such as malware scans and backups.
How to Optimize an Image
Your website has software that will automatically attempt to optimize images for you, but it is still a better practice to optimize before uploading.
The two most important factors for image optimization are image dimensions and image compression.
Image Dimensions
Website images do not need to be sized for print or publishing. Banner style images that will span across the entire page can usually be set to a width of 1200 pixels. Most other images should be set to either 800 or 500 pixels for its largest dimension. Vertical dimension for a portrait style image, or horizontal for a landscape image. Just use your best judgement for choosing which size. Think small(profile pic,500px), medium(featured image,800px), and large(banner,1200px).
Image Compression
There are many tools for compressing images, however if you are not familiar with these, we recommend going to TinyJPG and using their free web app. All you have to do is go to their website and upload your images (simple drag & drop). Then, you will download the optimized image. When downloading, rename the image by appending the name with something like “opt” or “comp”, i.e. [ image.jpg -> image-opt.jpg ].
Now you’re ready to add an optimized image to your website. Here’s how to do it:
Add an Image
You will usually upload images while you are creating a post(NEWS) or an event. However, you may upload images at any time, and use them later by selecting them when you create a post or event. The process will be the same.
Media>Add New.
From the menu on the left, select Media>Add New. This will open a page where you can either drag-n-drop your image, or click the “Select Files” button to browse your computer folder.
You can upload several files from this screen. When done, click on the image to open its details.
Add alternative text
For accessibility purposes and search engines, it is best practice to add “alternative text” to images. This enhances user experience for visually impaired people viewing your website with a screen reader.
After clicking the image/image title which opens the “Attachment details” window, enter a brief description of the image into the “Alternative Text” input. Be brief, but somewhat specific. Your changes will be autosaved.
Add your image to a post or event
When you create a post or event, you can select “Featured image” to add the image for the top of the article or use the Block Editor to add an image into the page.
Media Library
The Media Library window opens when you choose to set a featured image or insert an image into a page. There will be an option to use the “media library” or to “upload image”. Either choose an image you have already uploaded to the library, or upload a new optimized image.
Congratulations! You are now a website image uploading guru!