Today, there are many ways to build a website, either through ready-made templates or fully bespoke websites. Regardless of which method you select, there are several factors that must be taken into account when creating a website.
It is vital to consider an attractive design and make the content engaging to ensure that your website achieves its goals. In this respect, video and imagery play a very important role in amplifying the written content and the key messages of your website. The right video or image can transform an otherwise dull site into a remarkable and powerful communication channel for your brand. On the other hand, a bad choice or bad treatment of photos can spoil the entire design process or result in a bad experience for the website visitor.
This blog will help you to choose the right media for your website and includes a practical guide to select the suitable format, quality and resolution to ensure your site looks great and is still quick to load.
Choosing the Right Picture or Video
Images and videos are powerful tools that help the viewer connect to the content and messaging on your website. So when building your site it’s crucial to select the right images and videos to create the WOW factor and make a good first impression. The media content should always align with your brand and be consistent across the website. It’s good practice to select similar colour combinations, luminosity and style according to your brand guideline.
It’s essential to verify if the imagery transmits the right message – after all, a picture says more than a thousand words. Is the picture conveying who you are? Does it relay the message you want? Does it make the website stand out from your competitors?
Those are significant things to consider when choosing the image and also videos.
Videos can also play a key role in your website user experience. Our eyes are automatically attracted to movement, making videos very useful in drawing attention to the most relevant areas of your website and, like images, video content elicits emotion from the viewer. So, if you want to promote an energetic feeling you might include videos with fast gestures and actions, or if you want the visitor to immerse in a pleasant and relaxing atmosphere you can use videos in slow motion with beautiful, calming scenes.
For both videos or pictures, you must consider how your media will relate to the other content on your website and how visitors will interact with it. The use of lots of movement can irritate the web user or make it difficult to read – so, be careful and think about your audience even considering people with limited abilities such as dyslexia.
A good round of feedback from your closest clients can be quite helpful on this matter.
Choosing the Right Format and Size
When it comes to image file format, there’s no mystery, although you will see hundreds of different file extensions supported by your browser, here we run through the most common file formats to simplify it for you:
- JPEG (.jpg)
This file format is best for photographs. It can handle thousands of different colours in a manageable way allowing you to still have a good-quality image with almost any file size. - GIF (.gif)
This file format is primarily only used for animation because of its ability to save multiple frames within a single file. - PNG (.png)
This file format is best for any other type of image such as those with flat colour, large fields of colour, or transparent images. This file format is very powerful as it allows you to have semi-opaque portions of your image where the background shows through.
In summary, if you need to use a transparent background and any transparency use .PNG, if you need to animate it use .GIF, for anything else use .JPEG.
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. So, don’t worry about them for now. It’s best to keep it simple!
However, under this topic we will consider two additional types of files: Vectors and Videos.
- Vector Graphics
According to Wikipedia, “a vector graphic is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons.”
Vector graphics can be handy for simple images like logos, icons and diagrams. The most common and supported vector graphics is called SVG and it stands for Scalable Vector Graphics.
Is it getting a bit too complicated? Let’s stick only with JPG, PNG and GIF?
SVG images work exceptionally well for decorative graphics and other simple images that can be drawn using only code. They can be recorded in very small files and scaled in any size without damaging the quality. Resulting in perfectly crisp and clear imagery, no matter how large or small it is.
To make it simple again: Use SVG for logos, icons and diagrams, and if the shapes are simple and not too colourful.
NOTE: Don’t use vector graphics too often as when rendered on devices with limited resources, excessive use can make the navigation slow.
- Video Files
Although there are a vast number of video file formats, HTML only supports three which include MP4, Ogg, and WebM. That makes our life easier.
The most popular is MP4 (abbreviation for MPEG-4 Part 14) and it’s highly recommended due to its type of compression and quality.
Why Is File Size Important?
Your website loads its content, including media files, to a visitor’s browser using the internet. Regardless of how beautiful you have made your website and despite the work that went into the design, if you don’t consider the file sizes it can drag your website’s speed down.
Don’t put all the painstaking effort to waste by ruining the users’ experience before the website has even loaded. Not to mention damaging your brand with a slow website. Visitors leaving your site due to loading speed can also be detrimental to your rankings on Google as websites with a faster loading speed take precedence over slow-performing websites.
The moral of the above is to use smaller file sizes. Web images with smaller file sizes allow your website to load faster, as well as reduce the size of your image library and play a critical role for many people who have a slow internet connection, use an older computer, or are on their phones.
Consider that there’s a price for each byte loaded and it’s your responsibility to balance the cost vs benefit of each media file. You will need to find the perfect balance between quality and performance.
In the end, you want your website to look amazing and still be super-speedy.
To achieve that, we have prepared a practical guideline to help you evaluate your media files and properly size them to result in the best website efficiency.
Properly Sizing Image or Video
Each website has its dimension, and your files should be appropriately sized based on the dimensions they will be displayed at. However, we have provided a guideline for sizes that are standard and will apply to most websites.
We recommend targeting a file size according to your website’s sections and grids, like outlined in the size guide below.
IMPORTANT:
– For the image dimension the target is based on the width and the height. You should always constrain proportions (keep aspect ratio); please never squeeze or stretch an image.– The target size is only a target, and there will be cases when you need an image with a sharp resolution or lots of colours. In certain rare cases, the file size may increase above 50KB, beyond the target, but should never exceed 100 KB.
Now that you understand the basics you can begin preparing your files…
How to Optimise Your Pictures Individually or in Batches
Before you start, we recommend you think about the number of images you are going to use. If you need to add several pictures to your website, adjusting the media size can be time-consuming. So, it’s essential to prepare first and have the proper tools to make your work efficient.
If you have a number of pictures to be added, or if you are not sure where to place the images on the website and want to test how they will look, you can follow the Image Optimisation in Batch process below.
However, if you need to adjust only a few images or if you don’t have a tool to resize, you can jump straight to the Individual Image Optimisation process.
Image Optimisation in Batch
Processing your images in batch can be quite efficient to automate tasks that you frequently do, such as resizing images and renaming them. A good practice for web design is to separate all client images in a folder and process them in batches, according to the size guide – see it here.
There are several tools that you can use to automate your image optimisation process, but our favourite one at Digital Glue is ACDSee Photo Studio. ACDSee Photo Studio is an all-in-one solution for editing photos and keeping them organised.
“I began using ACDSee in the 90s as an alternative to Photoshop. I was starting my career and I didn’t have enough resources to buy Adobe’s expensive packages so I found ACDSee and I had it running on my dear old PC with Windows 98. Now it’s great to have ACDSee as a client at Digital Glue as we support them with PR and influencer marketing and I have it now on my MAC running smoothly as always.
It’s good to see that ACDSee has evolved over the years and is still the best alternative to Adobe Photoshop or Adobe Lightroom – and it’s faster, lighter, and easier to use, set up and administer. “
– Fabiano Carvalho, Lead Developer
Follow the step-by-step guide below to help you to process your images for your website.
Using ACDSee Batch Edit Wizard
ACDSee (https://www.acdsee.com/) provides a “Batch Edit Wizard” to help make many types of edits to multiple images. You can also save your editing settings as presets to save time in the future. In our case, we created four workflow presets to:
- Change the format;
- Resize the images based on the size guide;
- Rename the file;
- Save in a separate folder;
To edit multiple images you will need to:
1. Select the files you want to edit.
2. On the top left, click on Batch > New Batch Workflow
3. Select Change Format
In this example we will use JPEG, but you can use PNG as well – see guide here.
4. Select Resize
In this example we will resize the files for a Hero image.
Note: that if your image is landscape you should restrict it to fit within “Width Only” – or for a portrait use “Fit Within: Height Only”. This avoids the image being stretched or squeezed and preserves the relative width and height.
5. Select Rename
In this example, it will keep the original name and add _hero at the end. This facilitates searches inside your media folder and to keep it organised. Try to rename your image accordingly to the subject before running the batch.
6. Select Copy
We are saving the images inside the original folder and placing it within a subfolder called “Hero”
7. Save the Preset
8. Press “Run Batch”
Voila! You have resized your images.
Note: The pictures in a portrait format kept their height. If you want to use a picture in a landscape, to use in the hero, for example, you should crop them first.
Now you can create “Workflow Presets” for other dimensions of the size guide.
At Digital Glue we create these dimensions:
- Hero
- Standard
- Rectangular
- Squared
Tip: You can create all the formats in advance and upload them to the Media area on your CMS. This can be helpful, if you are not sure about which images to use or want to trial them on your website to determine if you’ll use them.
Individual Image Optimisation
You can optimise images using your preferred software or ACDSee as mentioned above. Make sure you use the right file format and resize the image accordingly.
Here we show you how to resize individually using three different options:
a. ACDSee
ACDSee is a full-equipped tool when it comes to image editing, for me it’s better than Adobe Lightroom with a wide-range set of attributes to improve the image and It has a good batch workflow processor. It seems like ACDSee was developed to work in a batch, so working individually doesn’t make any difference. You can follow the same process above to change format and resize for individual pictures.
b. Ezgif – Free Online Tool (https://ezgif.com/)
If you don’t want to bother downloading software and if you want to adjust only a few pictures, Ezgif it’s a good tool and handy to edit pictures individually.
You have a set of options to change the format, from BMP to PNG, PNG to JPG, etc
To resize the image, click on “Resize” on the top menu, upload your picture and choose the size accordingly with the size guide.
Make sure you select “Center and crop to fit” otherwise your picture will be stretched. If you don’t like the way it was cropped automatically, you can crop it manually by clicking on the button “Crop” on the top menu.
After adjusting the image, hit “Resize image!” and click on the “Save” button that will appear on the Resized image.
Ezgif has a good compression ratio and also allows you to save the images in a modern web format like WebP.
c. WordPress
Another good option is to edit straight into WordPress, if you are it as your CMS platform for your website. To edit straight into WordPress, you can:
- Upload the image on your post or page
On the post or page WYSIYWG editor there’s a button to “Add Media” - After uploading, you will see the file properties on the right side – Click on “Edit Image”
- You can scale the image to the size you want, based on the size guide and then hit “Save” to add it to your page or post.
How to Optimise Video for Web
Rendering a video can be quite complicated, there’s thousands of variations you can create based on pixel definition, resolution, frame rate, ratio, audio, compression, etc. There’s no one-size-fits-all setting for websites and you might find other recommendations between web developers experts, but here is the setting we use and it works well.
Independent of the tool you use for video editing (ACDSee Video, Adobe Premier, Adobe After Effects, Apple Final Cut, Sony Vegas, etc.) you will find these settings under File – Export – Media, or something similar. They all look the same.
After finding out how to export your video, you will find the settings and here is what we use:
Format: H264 (MP4)
Frame Size: (Use the Size-guide – link here)
Frame Rate: 23K fps
Aspect: Use 16:9 for horizontal (landscape) or 9:16 for vertical (portrait).
Audio: If you are going to use the video for a hero or something that doesn’t require sound, remove the audio options completely – as it takes space. If not, use AAC, 320Kbps, 48kHz.
If you don’t want to bother compressing your video files on your video editing tool, you can use VEED. It’s an Online Tool which takes large video files and compresses them to a smaller file size, without significant reduction in visual quality.
Click here to learn more about VEED.
What Else Can We Improve on Website Performance?
We hoped this post helped you to choose the right format for media files that will improve the performance of your website. There are other resources that can be helpful to improve it further and make your website slick and speedy.
We recommend further reading on:
- Cache Efficiency
- CDN
Digital Glue works with companies to help them maximise their website potential and create their next breakthrough. Contact us to see how we can help level up your business.
Alternatively, you can access more exclusive news and tips by signing up for our monthly newsletter.
