Optimising Media for Your Refari Website: A Guide to Image and Video Formats

Created by Ritesh WebDev, Modified on Tue, 6 Feb at 11:04 PM by Liam Refari

In the digital age, the visual appeal of your website is paramount. At Refari, we understand the importance of crisp, high-quality media in enhancing user engagement. To ensure your website stands out, it’s crucial to focus on the right formats for your images and videos. Let's delve into the best practices for preparing your media for a Refari-designed website.

1. Image Formats

a. Logos and Illustrations: The SVG Advantage

For logos and graphical elements, SVG (Scalable Vector Graphics) remains our preferred format due to its vector-based nature, which ensures images retain their quality at any size. This characteristic makes SVGs ideal for high-resolution displays, enhancing website performance without compromising visual quality.

b. Backgrounds, Media Files, and General Use: PNG or JPG

PNG is recommended for images that require rich detail and color variations, thanks to its support for transparency and ability to maintain high-quality detail. For general use, particularly when optimising for website performance, JPG is an excellent choice. PNG serves well for detailed focal points, while JPG is suited for less critical backgrounds or elements overlaid with text, colour filters, or other images.


When providing images, we recommend a maximum width of 2560px to ensure they fit well within the website's design.

To ensure the optimal format for web use, all images are converted to WebP on our end. This step maintains the visual quality of the images while optimising them for web performance, enhancing your website's loading times and user experience.


2. Video Formats: Seamless Integration for Enhanced Engagement

a. Resolution and Format


For superior quality, provide videos in 1980 x 1080 resolution. This ensures high-definition content delivery. Our team optimizes these for web use, maintaining quality and loading efficiency.


b. Preferred Video Hosting: Vimeo and Loom


For an optimal video hosting solution, we highly recommend using platforms like Vimeo and Loom. These platforms are chosen for their exceptional performance and reliability. Hosting videos directly on your website can lead to increased loading times, which might be off-putting for visitors. Vimeo and Loom provide high-speed streaming technology, ensuring a smooth and efficient viewing experience for your audience. This approach not only boosts website performance but also engages users with a high-quality video interface.


For instance, Refari, our global software company, has recently transitioned from hosting its videos on YouTube to using Loom. This switch was made in pursuit of better integration and enhanced viewer engagement, illustrating the practical benefits of using advanced platforms like Loom for video hosting.


b. Video Links: Effortless Integration Process


Provide us with the video links from Vimeo, Loom, or YouTube. We'll ensure they're seamlessly integrated into your website for a smooth user experience.



3. Additional Considerations


a. Accessibility: Ensuring Inclusivity

While focusing on formats and resolutions, it's also vital to consider accessibility. Adding descriptive alt texts to images and captions to videos can make your website more inclusive, catering to a wider audience, including those with visual or hearing impairments.

b. Brand Consistency: Visual Harmony

Ensure that your media aligns with your brand identity. Consistency in style, colour, and quality across all images and videos reinforces your brand message and creates a harmonious visual experience for your users.

c. Image and Video Sources: Exclusive and Licensed Options

Selecting the right images and videos is crucial for aligning with your brand's visual identity. For our clients, we offer exclusive access to high-quality, licensed media through our paid plans with Envato Elements and Adobe Stock Photos. Here’s how you can make the most of these resources:

  • Envato Elements and Adobe Stock Photos: As a client of Refari, you have the privilege of selecting from a vast array of premium images and videos available on these platforms. Simply browse through Envato Elements or Adobe Stock Photos, pick your preferred media, and send us the link. Our team will handle the rest, ensuring that these high-quality visuals are seamlessly integrated into your website. For Adobe Stock there are some restrictions about what asset types we have licences for, firstly each client can only pick up to 5 images from this image repository, secondly Adobe bundles in premium images which you pay extra for with their standard licenced images which we do have a subscription for. More about that here: https://www.loom.com/share/8bfb8d400b3a431aa6eebc8bb6ed7ecb

  • Free Sources: You can also opt for images from free sources like Unsplash (excluding Unsplash+ images) and Pexels (excluding iStock images), as well as any Creative Commons licensed media.

  • Purchased Media: If you wish to use images from other stock image websites, you're welcome to do so. Please provide us with both the image URL and a copy of the image's license. For images from the aforementioned sources, only the URL is needed.

Conclusion: Crafting a Visually Stunning Website


By adhering to these guidelines, you can provide us with the ideal media formats for your website. Our team at Refari is dedicated to creating a visually stunning and high-performing website that not only meets but exceeds your expectations. If you have any questions or need further guidance, our team is always here to assist. Let’s make your website not just a platform, but a visual masterpiece.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article