Best Practices for Uploading Images & Videos to Your Website
Images are a crucial part of website design. Not only do they add visual appeal, but they also help with SEO and website performance. If you want to make sure that your website is performing at its best, you need to optimise your images for the web. In this blog post, we will discuss the best practices for uploading images to your website. We will also provide some tips on how to upload them correctly so that they look great without impacting negatively on your website!
Compress your images
It is vital that your website loads quickly, and one of the ways to ensure this is by compressing your images. When you compress an image, you are reducing its file size without compromising on quality. This means that your website will load faster, and your visitors will have a better experience overall. There are many tools you can use to compress images, including; TinyPNG, Compress JPEG or Kraken. Generally, a file size of less than 100KB is ideal. However, Google will look at the overall page size - not each individual image size. So if you are using a lot of imagery, consider making some smaller than others.Use relevant alt text
Alt text is the written copy that describes your image. Alt text (alt tags or alt descriptions) help search engines index your website effectively and ultimately has a positive effect on your rankings. Adding alt text to all of your images increases the chances of your content appearing in Google searches. Alt text also enhances the website experience for visually impaired users, by describing the image.Use original images
Original photography is prioritised over stock images. This is true for both Google and your visitors. Whilst there are sometimes no options but to use stock images, you should try not to fill your whole website with them or use ones you have seen on more than once occasion on other websites. Original imagery is especially important for eCommerce websites. Posting duplicated images or ones that don't actually picture your products could damage your reputation online and with your customers. When you begin an eCommerce business, take some time to photograph your products and create original images for your website.Rename your files before uploading
It may seem like a small, insignificant detail, but renaming your image before uploading it is an important step. It will directly impact how easy it is for search engines to interpret your image. Your file name should be similar to your alt text, possibly containing some keywords that describe the image.Use a third party site to host your videos
Adding videos to your website is a great way to connect with your customers and visitors, but uploading them directly to your website can be a mistake. They are large files and can slow your web page down! And you don't want that... So using a website such as YouTube or Vimeo means you can upload as many videos as you like and then embed them onto your website.If you would like to know more about how to get started with an Ecommerce website then please take a look at www.thewebguys.co.uk or even book in a meeting directly with Brian to discuss how to get started using this link https://thewebguys.zohobookings.eu/#/customer/brianlynggaard
How to Choose the Right Image Format
Before you compress an image, selecting the correct file format is a critical first step. The format you choose impacts file size, quality, and functionality. Here is a simple guide:
- JPEG (or JPG): Best for photographs and complex images with many colours and gradients. JPEGs use lossy compression, which means they can be made very small, but some quality is lost. This is usually the best choice for most photographic content.
- PNG: Ideal for graphics, logos, icons, and any image that requires a transparent background. PNGs use lossless compression, so they retain all quality but often result in larger file sizes than JPEGs.
- WebP: A modern format developed by Google that provides superior lossless and lossy compression for images on the web. WebP images are significantly smaller than their JPEG and PNG equivalents at the same quality, which dramatically improves page load times. Most modern browsers now support WebP.
For most websites, a strategy of using JPEGs for photos and WebP for everything else is a powerful way to balance quality and performance.
A 5-Step Workflow for Preparing Web Images
To ensure every image is perfectly optimised before it goes on your site, follow this repeatable process. This workflow combines the most important best practices into a clear, actionable checklist.
- Choose the Correct Format: Select JPEG for photos or PNG/WebP for graphics with sharp lines or transparency.
- Resize Image Dimensions: Crop and resize the image to the exact dimensions it will be displayed at on your website. For example, if your blog content area is 800 pixels wide, do not upload a 4000-pixel wide image.
- Name Your File Descriptively: Rename the file from IMG_2345.jpg to blue-suede-shoes-on-display.jpg. Use hyphens to separate words.
- Compress the Image: Use a tool like TinyPNG or an application like ImageOptim to reduce the file size without a noticeable loss in quality. Aim for under 150KB for large images and under 80KB for smaller ones.
- Upload and Add Alt Text: Finally, upload the image to your website and write descriptive alt text, such as A pair of blue suede shoes on a white store shelf.
How to Embed Videos Without Slowing Your Website
While using YouTube or Vimeo is the correct first step, the standard embed code can still slow down your page because it loads all the video resources immediately. To prevent this, you can implement lazy loading for your videos.
Lazy loading a video means the heavy video player only loads when the visitor scrolls down to it or, even better, when they click the play button. This is often achieved using a 'facade' method, where a lightweight preview image of your video is displayed initially. The actual YouTube or Vimeo player is only loaded after a user interacts with this image.
Many modern website platforms and performance plugins, such as WP Rocket or Perfmatters for WordPress, can automatically apply this optimisation to your video embeds. This ensures your page loads quickly while still offering engaging video content to your users.
Frequently Asked Questions About Website Images and Videos
- What is the best file size for a web image?
While there is no single perfect size, a good target is under 150KB for large, full-width images and under 80KB for smaller images within your content. The key is to balance quality with file size to keep the total page weight low.
- How do I write effective alt text?
Good alt text is descriptive and concise. It should describe what is in the image as if you were explaining it to someone who cannot see it. For example, instead of shoes, write A close-up of a person tying the laces on a pair of red running shoes.
- Does compressing an image visibly reduce its quality?
It depends on the level of compression. Tools that use 'lossy' compression, like for JPEGs, do remove some data, but at typical web optimisation levels, the quality difference is usually invisible to the human eye. 'Lossless' compression, used for PNGs, reduces file size with zero loss of quality.