NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
You already know that you can upload images either in the Files area, or in the Visual Page Editor when you upload a new image via the image component or background image. In this Episode, we'll look at some of the best practice tips for optimising your images and some of the functionality that lets MOBLE do the hard work for you.
There are 3 main ways to upload images on your MOBLE website. Let's have a look at each.
1. IN THE FILES AREA
Go to the Files Area
In the top right '+ Add File'
Upload an Image from your computer
Assign the 'Type' to 'Image'
Ensure you apply your Image Properties
'Title' this will display in the Widget if you choose to display 'Title'
'Summary' will display this in certain Widgets, if you elect to display Summary in the Widget Component
'Alternative Text' is important for SEO as it lets Search Engines know about the Image. Though also, Screen Readers for the Visually Impaired will read the Alternative Text.
'Tag' your Image, if you would like to group it or assign it to your Widgets.
'Sub Heading', 'Display Date', and 'Sort Order' are again important for your Widget preferences.
To Upload an Image Choose a File from your computer at set the image properties such as Tag and Alternative Text.
2. UPLOAD IMAGES IN BULK
On your computer place all of the images that you would like to upload into a folder.
Compress the folder as a .zip file:
PC: Press and hold (or right-click) the file or folder, select (or point to) Send to, and then select Compressed (zipped) folder. A new zipped folder is created in the same location.
Mac: Right mouse click and select "Compress Folder Name". A new zipped folder is created in the same location.
Rename the zipped folder to:import_files.zip.
Go to the MOBLE 'Files'
In the top right hand corner click '+ Add File'.
Choose the zip file named import_files.zip.
Assign the file 'Type' to 'Image'.
Tag the Images. All images will be tagged at once. E.g. If the images are a Photoshoot, Tag the images once and all images will automatically be tagged and assigned your Photo Gallery Widgets, without you having to even go to the page!
Click 'Save' in the top right, and your images will now start to upload.
Depending on the size of your file, uploading images in bulk might take some time. Wait until the file has finished uploading. Do not close your browser.
Once uploaded, your images will now appear in the 'Files' area. Refresh your Browser if you don't see all the images. Again it might take a minute or so to upload them all.
You may now edit images individually, should you wish to.
Upload Images in bulk by compressing your files into a zip file called import_file.zip.
3. UPLOAD IMAGES IN THE VISUAL PAGE EDITOR
First, in the Visual Page Editor:
Add an Image Component to a Frame via the '+' icon in the Frame Tools
Note, you can also drag in an Image Component from the 'Build' tab in the 'Layouts' drawer. Though, we find the '+' in the Frame tools is much more efficient than drag and drop, every second counts!
Second, whe the Image Component pops up:
Upload a new Image from your computer.
The Image and Image Properties such as Title, Alternative Text and Tags will be automatically added to the Files area, and therefore used as the Default Properties for the image.
Browse an existing image from the Files area. Now you can override the Image Properties such as Alternative Text, so that it is customised for this single instance of the image, even though it is the same Image. A great solution for saving space, site speed, and SEO. You keep one image but optimise specifically in different instances.
Uploading a new Image from the Visual Page Editor will save it to the Files area so that it can be used again later.
Once you've uploaded a File, you can override the Properties in the Image Component.
WHAT IS THE FILE URL AND WHAT IS A CDN?
When you upload an image or file, it is uploaded into the cloud and is given its own URL. You can paste the URL into a browser just like any other web page.
Your MOBLE website has a Content Delivery Network to store images on Amazon Web Services (AWS).
A Content Delivery Network (CDN) is a distributed network of servers and your images are mirrored across these servers. The advantage with your images across so many server locations is that they can be distributed to your users in the quickest possible time, no matter what country your users are located in. This is particularly important for images since they are larger files, shaving precious time off your page load speeds.
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.