Website Visual Asset Format Guide

Modified on Fri, 3 Jul at 3:20 PM

TABLE OF CONTENTS


Choosing the right images, icons, videos, and file formats helps your website load faster, look better, improve SEO, and deliver a stronger visitor experience across desktop and mobile.

Why Website Performance Matters


Every asset uploaded to a website affects page speed. Large images, outdated file formats, and oversized videos can slow down load times, increase bounce rates, and negatively impact search performance.  Using the correct asset type helps improve mobile performance, reduce bandwidth usage, support better Core Web Vitals, and create a smoother experience for visitors.


Performance Benefits

Faster Load Times

  • Optimized assets reduce page weight and help content appear more quickly.

Better Mobile Experience

  • Right-sized mobile images prevent visitors from downloading unnecessary desktop assets.

Improved SEO

  • Page speed and user experience can influence how well content performs in search.

Higher Engagement

  • Faster websites keep visitors on the page longer and reduce friction.


FormatBest ForWhy It's specified
.SVG Logos, icons, faviconVector-based, so it scales to any dimension with no quality loss and typically the smallest file size for flat graphics.
.WebPBanners, content images, featured & profile imagesPurpose-built for the web; strong compression with minimal visible quality loss keeps pages fast.
.AVIFDesktop video banners Next-generation codec that delivers motion or high-detail imagery at a fraction of the file size of GIF.
.PNGFallback for logos, icons, and images needing transparencyLossless and supports transparency, but produces much larger files than SVG or WebP, use only when the primary format isn't supported.
.JPG /.JPEGFallback for photographic imagesWidely supported but less efficient than WebP; reserve for tools or platforms that can't output modern formats.
.GIFFallback for video bannersUniversally supported but heavy and low-quality for motion; only use where AVIF isn't an option.




Recommended: SVG

Alternative: PNG

Dimensions: Small 280×65, Medium 420×70, Large 560×75, Mobile 280×65


SVG is ideal for logos because it stays sharp at any size and typically has a small file size.


Desktop Banner Image


Recommended: WebP

Alternatives: PNG, JPG, JPEG

Dimensions: 1500×650


WebP is optimized for the web and helps reduce load times while maintaining strong image quality.


Mobile Banner Image


Recommended: WebP

Alternatives: PNG, JPG, JPEG

Dimensions: Small 425×160, Medium 425×223, Half Page 425×472


Mobile-specific images improve performance by serving appropriately sized assets to smaller screens.


Video Banner


Recommended: AVIF

Alternative: GIF

Dimensions: 1500×650


Video and animation files should be used carefully because they can significantly increase page weight.


Content Images


Recommended: WebP

Alternatives: PNG, JPG, JPEG

Dimensions: Based on the content area and layout


Resize and compress images before publishing to avoid uploading oversized files.


Content Icons


Recommended: SVG

Alternative: PNG

Dimensions: Based on the content area and layout


SVG icons are scalable, crisp, and lightweight, making them ideal for website interface graphics.


Favicon


Recommended: SVG

Alternative: PNG

Dimensions: 16×6, 32x32


A favicon supports brand recognition in browser tabs, bookmarks, and search results.



Recommended: WebP

Alternatives: JPG, JPEG, PNG


Featured images should be optimized for both page speed and visual quality.



Recommended: WebP

Alternatives: JPG, JPEG, PNG


Optimized event images help event pages load quickly while maintaining a professional look.


Profile Image


Recommended: WebP

Alternatives: JPG, JPEG, PNG


Use consistent cropping and optimized file sizes for professional headshots and team profiles.


Note: AVIF and Webp are not supported in the banner configuration and are planned enhancements for the product roadmap.

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