How to make your webpage images pop? - add a drop shadow!
Images should be the cornerstone of every good website, whether for an eLearning course or any other product - they can be used to inspire, inform and attract the eye of viewers.
As they say “a picture is worth a thousand words”, and in today’s visual media-driven world having a neat looking website full of relevant images not only improves the effectiveness of your site but also helps it to rank better.
Google has long encouraged the use of images and video in their ranking algorithm, and with stock image sites offering incredible pictures at fairly low cost there really isn’t any excuse to not have a visually arresting website to promote your online course or product.
Whilst adding images can make your course website look great, there is a simple trick that can literally make your images ‘stand out’! Adding a drop shadow to the image gives it a three dimensional appearance, and can really help to draw the viewer’s attention to that specific image (which could then be the click trigger for something important like a lead magnet).
Using images on your site
Whilst using images on your webpages is strongly encouraged, there are a few top tips that will help you enhance the process and ensure you gain the most benefit from doing so:
Relevance
It goes without saying that not all images are equal. To tell the story you want, or to give context or back up what you are saying in your text content, a well-placed and relevant image is incredibly powerful.
By the same token, an irrelevant image can be confusing and even misleading. So we have to pick images carefully.
We can either use our own images that clearly demonstrate our message, or buy in stock images that do it better than we could ourselves.
Just make sure that the images you choose are placed next to the related content on the page, and perhaps give an example of what you are describing, or even a demonstration of something being discussed.
Image Size
One of the most important factors when designing a website is how fast it loads.
A slow-loading site will frustrate visitors causing many to go elsewhere before your site even loads. Search engines also rank sites based on many factors, including usability, and a slow-loading site will be judged to be less user-friendly and will most likely rank lower because of it.
Although there are not many factors we can control to enhance page load speeds, especially if we are using a website host like Squarespace or Wix, the total data component of images for each page has a substantial impact on page load times.
Not only that, but if our images are having to be automatically resized by our webhost each time they are displayed, that process also takes time, lowering our page load speed.
When adding images to our page, we want to upload correctly sized images with the smallest file-size whilst still giving a crisp, clear image. We also want to use the correct image file type for our chosen situation (see below).
To do this, we need to do the following:
Work out roughly what size of image we need for the location and placement of each individual image. Is it to be a large header image, a medium-sized side image alongside text, or a small icon image for use as a button?
In our blog posts we use these sizes as a rough guide:
Large post banner images are 1200 pixels wide
General inter-section images are 800 pixels wide.
Medium inner-page images for alongside text are around 250 pixels wide.
Small button images can be as little as 50 pixels wide.
Use an application like Gimp or Photoshop, or a free online image resizing site such as Img2Go to resize our image and reduce the image size using compression.
File type
The two most common image files used in websites are:
.jpg - these offer the smallest file size and are great for most applications that don’t require a transparent background
.png - this file type allows for images with transparent backgrounds (they look like they are sitting on top of whatever is behind), but that functionality comes at a file size cost.
So if our drop-shadow image is to placed on a white page, then we can use a .jpg with a white background under the shading. Otherwise, we will need to use a .png image that allows for a transparent background.
Alt tags
As well as the visual elements of adding an image, there are SEO benefits too, and these can be maximised by adding an ‘alt tag’ description to the image.
Alt tags are pieces of text that can accompany an image in the page’s source code, and can be used by the browser when the image file is broken or people with sight problems are using an audio version of the page.
Adding these can bring SEO benefits, as they help to describe to search engines what the page is about, showing its relevance in searches. Particularly if we use keyword phrases within the alt text.
Adding a drop shadow to an image
OK. So let’s say that I want to add a drop shadow to the following .jpg image for my lead magnet.
The image looks good as it is, but doesn’t really scream button, and could get a bit lost in all the images on my page.
So how do we go about adding a drop shadow to make our image look like it is coming out of the page? Well to start with we need to download a free image manipulation application (basically an open source version of Adobe Photoshop) called Gimp. Download it here.
When you have downloaded and installed the application on your computer, you will be able to right-click on an image file and select ‘Open With’ and then ‘GIMP’.
Now Gimp opens with our file ready for editing.
To add a drop shadow to our image, we need to select the ‘Filters’ menu, then the ‘Light and Shadow’ sub-menu, and then select ‘Drop Shadow (Legacy)’.
This brings up the settings pop-up panel for our drop shadow.
Let’s keep the default settings (Offset X: 4, Offset Y: 4, Blur radius: 15, Opacity: 60) and click ‘OK’.
Gimp has added a transparent background, and a drop shadow around our image. To fit this shadow it has had to enlarge the image slightly.
If we want to use the image over a non-white background, we would need to export the new image file as a .png file (see above). As my website is white, I am happy for the image to have a white background so I can export it as a .jpg file.
To do this, I go to the ‘File’ menu and select Export As.
I don’t want to write over my original image and I want to be able to identify it as having the drop shadow added, so I usually add ‘shadow’ to the end of the file name.
Last of all, I click ‘Export’. And that’s it. I have my new image file with drop shadow added.
All that is left is to upload it to my website………
I can now leave it as it is, or click the ‘link’ icon in the image edit panel and turn my image into a linked button to my course lead magnet sign-up form (try it now!)
Receive this FREE ‘Beginner’s Guide to Creating Online Courses’ today
This FREE email mini-series answers some of the most common questions about building your own eLearning course, and includes:
‘Why teach online?’
‘What is involved in creating an online course?’
‘Your first steps towards becoming an online teacher’
