Creating a website is a bit like decorating your home. Preparation is everything!
We all want to get to the nice bit of adding colour to the walls and transform the whole look and feel of the room, but without preparing the walls, filling in the cracks and rubbing it down so it’s smooth, it will never really be how you want.
So before adding images to your website to transform it into something beautiful, check they’re the right size and are as small a file sizes as possible so they don’t slow your website down.
Getting to grips with the preparation of images is incredibly important and the more you learn about images, the more visually appealing your website is likely to become for visitors who will stay for longer which in turn, will encourage Google to rank you higher.
This just a basic guide as things move quickly and there are other image formats available. Keep it simple for now and mostly just use jpegs and pngs.
Organise Your Bookmarks & Images
First of all, let’s start with the basics and get you organised. Create Bookmark folders so you know where to access helpful online image tools quickly and easily.
Also, create a temporary folder on your desktop (or on Google Drive) and move all the images to it that you want to use on your website. It makes sense to keep them all in one place and if there are lots of them, you can tidy them further into sub-folders.
This simple task will save you so much time and energy moving forward.
Ensure you save the original image you take with your mobile or camera, as a high resolution photograph, then Save As with different file names as you vary and edit the image with filters, re-sizing, etc.
You need a high resolution image (more pixels) for printing and a low resolution image (less pixels) for use on the internet. If you use a graphic designer to create artwork (which is always best), they will ask you for the best quality and largest file type you have so they can make their own adjustments.
Image File Types & Uses
File types can get confusing and very technical. Don’t get too hung up over them at this stage, but be aware that they exist. They are generally used in the following formats:
- JPEG (or JPG): for photographs
- PNG: for solid colour graphics like a simple icon or for images with transparent backgrounds.
- Logos for example, may be saved as jpeg and png files, depending where they are to be used, so save them in both formats.
- GIF: for animations
On Screen Image Size
Online software usually re-sizes or crops images automatically to fit how it wants it (like Facebook, Instagram, etc). I prefer to make them to the correct size (or slightly larger) to give me more control over what will actually be shown.
Why upload a 5Mb image when it’s going to end up being a small thumbnail? Re-sizing makes the job of uploading quicker, especially if you live in a poor broadband area, so this needs thinking about when constructing your image.
It’s always good practice to test your pages on devices (PC, tablet and mobiles) when uploading images, just to ensure they look okay.
Image File Compression
There is nothing worse than a website that’s slow to open. You will know from your own experience of searching the internet, that you only have a few seconds to capture people’s attention before they move on to the next website.
To ensure your web pages load super-fast and you keep your visitors on your site, compress the images so the file sizes are as low as possible without losing image quality. The very best compression tool on the internet (IMO) is Compress Or Die.
It’s much better than all the others and this single tool has transformed my working life – a dramatic statement I know, but it’s true!
Image Alt Tags
If you have good eyesight, you’ll be able to appreciate the beautiful images you create, but those with visual impairments, rely on dedicated software to read your website.
An Alt Tag is effectively adding a short description to the image describing what the image is about. Google can’t ‘see’ images either, so looks for Alt Tags when crawling your website to understand what your page is about.
It may well be you can include a keyword to your Alt Tag to also support your on-going search engine optimisation (seo) needs.
You’re likely to add your logo onto business cards, leaflets and brochures as well as over the internet on your website and directories.
You’ll therefore want to save various versions of it in a folder so you can access the most appropriate logo quickly and easily. Variations may include black on white and white on black backgrounds as well as some with transparent backgrounds, saved as a PNG file, to add on top of other images.
This is much better than displaying awkward squares or rectangular blocks around your logo. A great free logo creator is LogoMakr.
Image Editors And Design Platforms
I suggest you choose between either Canva or Kapwing or maybe use the free versions of both. My vote goes to the paid-for version of Canva.
Canva – One of the most popular online tools out there for manipulating images and creating leaflets and other artwork. There are free and paid versions and if you’re going to create a large number of graphics, I suggest you pay, for the full version, $12.99.
It offers a vast array of good quality stock images and having everything in one tool has saved me so much time. The free version is good too, but it doesn’t allow you to make transparencies or vary the size of your saved artwork, which is a little frustrating, but hey, that’s why it’s free!
Watch the video and investigate the many other videos available on Youtube. Go to Canva.
Kapwing – Another really good image editor and simple video-maker. They have lots of tools and ‘how to’ videos to help you make your own videos, memes and animations.
Importantly, they also have 2 methods for making backgrounds transparent, depending on your image, and if you’re staying with the free version of Canva too, watch the video below to learn how to do this – it’s a really good tool.
Watch other videos to see the full extent of what’s available in Kapwing. You’ll be glad you did. Go to Kapwing.
Royalty-Free Stock Images
Mobile Phone Image Apps
There are lots of image apps out there and here are a few worth investigating:
Motionleap (formerly) Pixaloop – Bring your still image to life with moving clouds, rippling water and many special effects. Great for Instagram or other social media.
Color Pop – A black and white colorise photo editor with lots of amazing Photo color splash & coloriser photo filters.
Background Eraser – For cutting pictures and for making a picture’s background transparent.
Snapseed – A complete and professional photo editor developed by Google.
PhotoSplit – To split your photos to a nine square grid and post them directly to Instagram.