6 tips for formatting images for your website
Images are important for your website as they help visitors connect. Images cause a faster and stronger reaction than words. It helps people focus and remember things. So it is key you use images on your website. However you need to format them correctly so that it doesn’t slow down your website and harm your SEO.
In this blog I will talk you through 6 tips on how to format images.
1) File types
Save your images in .jpg, .gif, or png format only. The other formats are not website compatible. Now we always see the terms .jpg, .gif, and png but what do they actually mean? Here are some brief fun facts about the three: Jpeg stands for Joint Photographic Experts group and it is a lossy compression method. Lossy compression means that when a .jpg file size is reduced it loses data and quality from the original version. Gif stands for Graphics Interchange Format. GIF uses Lossless compression which means it does not degrade the quality of the images. PNG stand for Portable Network Graphics. PNG also uses Lossless compression. PNG tends to be a larger file size than JPG. So If you have issues in reducing the size of your file try and change it to .JPG
2) Name file
Make sure to name your file descriptively. So if the image is of a girl drinking a cup of coffee, use that as the name. This will help people who are using assistive screen readers or who have images disabled on their browser. It will help with SEO as well. Where possible add in key words but only when it makes sense. Use only small letters, number, underscores and hyphens. Other characters might not work or display an image properly. Keep the images names short, 8 words or less.
3) The size of the file
Try and use images that are less than 500KB. The larger the image the longer it takes for the web page to load and this again will affect your SEO. How do you know how large your file is? Right click on your image and click on properties. There it will show you the size of the file.
Here is an overview of the file sizes from smallest to large:
1024 bytes = 1 KB (Kilobyte)
1024 KB = 1 MB (Megabyte)
024 MB = 1 GB (Gigabyte)
1024 GB = 1 TB (Terabyte)
1024 TB = 1 PB (Petabyte)
Let say you have an image of 4MB there are tools online that you can use to resize your image. I have used https://tinyjpg.com/ in the past to reduce my images. You just upload the image you need reduced (max 5MB) and then it resizes it for you! Do keep in mind that resizing your images won’t mean you can post as many pictures as you like on your website. Squarespace suggest to keep a page size to 5MB or under to avoid slow loading websites!
4) Colour mode
You want to save your images in the RGB colour mode, this mode is best for the web. So if you like to be creative and edit images for example in Abode Photoshop be aware of this when you save your image. RGB stands for Red, Green and Blue and it uses the base of these 3 colours to create about every other colour you can imagine. Because it can create such a wide selection of colours it is used in most applications. CMYK (Cyan, Magenta, Yellow and Key=black) this colour mode is used for printing.
5) The width of an image
Squarespace advises to upload pictures that are between 1500 and 2500 pixels wide for the best quality. Smaller amount of pixels will result in blurry or pixelated pictures when they are stretched out.
6) Image text
When you have an image with text on it, it is best to add that as an overlay instead of making the text part of the picture. This is because an overlay text can be read by the search engines. If your image does contain text you should save it as an .png file as this retains the quality and sharpness of an image better. After you upload an image to Squarespace creates up to 7 varieties of that image, all with different width. (100 pixels, 300 pixels, 500 pixels, 750 pixels, 1000 pixels, 1500 pixels, 2500 pixels) When someone visits your site Squarespace responsive design picks the right size for the screen the visior is using.
Collecting images for your website
I did mention this in my previous blog about ‘what do you need to organize before designing a website’. Whatever you do, do not take any random photo of the internet! All photos are licensed under the copyright law. You could get into serious trouble if you just choose any random pictures.
What you could do
• Become the photographer yourself and make the pictures yourself and no do not use your mobile phone pictures
• Hire a photographer
• Use image that are copyright free
• Buy stock photos
The website designer is not responsible for the pictures you choose or any infringement issues that may arise if you choose photos that you provided to be used on the website!