Image and video optimization: formats, CDN, and accessibility

Loading speed is one of the main indicators of a website that can either retain or lose visitors. Bright media files enliven pages and make them attractive, but if they are not optimized properly, they slow down the resource, which leads to user churn. To prevent this, it is important to choose the right file formats and use modern content delivery technologies. We explain how to do this in this article.

Why it is important to optimize media files

Photos and videos are essential for users to enjoy a website. But it is important to remember that they are heavy and slow down the website due to:

• high resolution;
• large number of frames;
• use of inefficient formats.

When working with media files, the browser has to transfer and process more data, which increases the server response time and delays the display of elements on the page. As a result, the loading speed decreases and users are forced to wait longer than usual. That is why photo and video optimization is so important for a modern website.

Additionally, it is worth noting the following points:

• SEO images make the site visible to search engines and help attract organic traffic;
• reducing file sizes and using modern formats allows pages to load faster, retaining customers;
• Optimized media reduces the load on servers and CDNs, lowering the cost of storing and transferring files.

Thus, SEO optimization makes the resource faster. It also improves the website's search engine rankings, increases conversions, and makes content more accessible to users with slow internet connections.

Optimal formats and compression

Photos and videos for a website should be saved in optimal formats — WebP, AVIF, and MP4. It is also necessary to use tools that compress media files efficiently.

WebP, AVIF, MP4

Modern media formats allow you to reduce the size of media files and speed up website loading while maintaining high image and video quality. First and foremost, these are:

• AVIF — provides the best compression among raster formats, supports HDR and a wide color gamut;
• WebP — a universal image format for websites with a good quality/size ratio, supported by many browsers;
• MP4 — this video format for websites remains the most compatible option. It ensures stable playback on different devices and platforms.

Micro-markup of media files on a website helps search engines interpret photos and videos, improving SEO.

Lossless compression tools

Even if media files are recorded in modern formats, it is still better to compress them further for effective optimization. Tools such as the following can help when working with images:

• TinyPNG / TinyJPG — an online service and API for batch processing PNG, JPEG, and WebP files, which reduces file size by removing differences that are barely noticeable to the eye and unnecessary metadata;
• Squoosh — a web application from Google for local image compression, allowing you to compare different formats, adjust quality, and convert files to WebP and AVIF.

To compress video, you can use HandBrake or FFmpeg, which allow you to transcode it without noticeable loss of quality.

How MVP differs from a prototype

If you are working with an MVP or prototype, before optimizing images, you need to figure out whether it is necessary to do so. To understand this, you need to determine how a prototype differs from an MVP:

• A prototype is a quick and inexpensive way to see what the website interface will look like and how users will interact with it. That is, navigation, usability, layout, and work scenarios are tested. Instead of real images and videos, placeholders are usually used (for example, placeholder images and captions such as “video coming soon”). Accordingly, there is no need to optimize media at the prototype stage.
• MVP (minimum viable product) is a version that can be used by real users. Here, it is important to convert images to modern formats and compress them using special tools.

Thus, the main difference between an MVP and a prototype in the context of working with media files is that they only need to be optimized for a minimum viable product.

How to speed up content delivery

The better the transfer of media files from the server to the user's device is organized, the faster the page loads. At the same time, the speed depends not only on the characteristics of the hosting and the price of its services. How well the content delivery is configured also matters a lot.

CDN and lazy load

A Content Delivery Network (CDN) is a network of servers located in different parts of the world. When you connect to it, media files are cached on computers located close to the client. This shortens the data transfer path and reduces response time.

Modern CDNs can also automatically compress files and deliver them in optimal formats. At the same time, they take into account the characteristics of specific user devices and browsers.

It is also useful to set up lazy loading. It delays the display of content until it enters the user's field of view while browsing the site. This reduces the amount of data when the page is first rendered, which speeds up its loading.

Alt tags and accessibility

Alt tags and SEO descriptions for images help search engines and site visitors better understand the content:

• Alt tags for images are an HTML attribute that describes the content of an image, which is useful in cases where it does not load. It is necessary for clients with graphics disabled, search robots, and screen readers — programs that read text aloud and describe interface elements on the screen for people with visual impairments;
• SEO description is a broader concept that includes alt tags, file names, titles, captions, micro-markup, and the context of the image on the page. A competent description helps search engines understand what the image shows and index it correctly.

To learn more about image and video optimization, contact the specialists at Megasite. We have been developing websites in Kyiv and other cities in Ukraine for over 10 years and know how to make your content visible to search engines and convenient for users.