Web Design Assets: Recommendations and Best Practices

This article provides guidelines for preparing and delivering web design assets (images and videos) used in Piano templates. Following these recommendations ensures optimal performance, faster page load times, and a consistent user experience across devices. 

Overview 

When providing assets for Piano templates — such as background videos, hero images, logos, or animated graphics — deliver files that are appropriately sized, compressed, and formatted. Oversized or poorly optimized assets negatively impact page performance, increase loading times, and can degrade the end-user experience. 

This guide covers: 

• Recommended image formats, dimensions, and file sizes 

• Recommended video and animation formats, dimensions, and file sizes 

• Compression guidelines 

• Asset hosting options (Piano CDN vs. client-hosted) 

• How to reference assets in template content fields 

• How to replace assets in existing templates 

Image recommendations 

Recommended formats 

Recommended dimensions and file sizes 

Compression guidelines for images 

• Use lossy compression for photographs and complex imagery (JPEG quality 70–85%, or WebP equivalent). 

• Use lossless compression for images with text, sharp edges, or transparency requirements (PNG or WebP lossless). 

Tools for compression: 

• Squoosh — browser-based, supports WebP and AVIF output 

• ImageOptim — macOS desktop application 

• TinyPNG — web-based batch compression 

Video and animation recommendations 

Piano templates support both video files and animated images (GIFs). Both formats are valid for use cases such as background loops, promotional banners, and decorative elements. File size discipline is critical regardless of format. 

Recommended video formats 

Where possible, provide both a WebM and an MP4 version for maximum browser compatibility. 

Recommended dimensions and file sizes 

Animation recommendations 

Animated images (GIFs, animated SVGs, animated WebP) are supported in Piano templates. The same file size rules apply: 

• Maximum 5 MB for mobile, 20 MB for desktop. 

• Static images are always preferred over animated ones for performance. 

• If animation is required, make sure it serves a clear purpose in the user experience. 

• Avoid animated logos or decorative animations that don't contribute meaningfully to the design. 

Compression guidelines for videos 

Remove the audio track for background and decorative videos. This significantly reduces file size. 

Use FFmpeg or a similar tool to compress and convert: 

# Convert to WebM (VP9), remove audio 
ffmpeg -i input.mov -an -c:v libvpx-vp9 -crf 30 -b:v 0 output.webm 

# Convert to MP4 (H.264), remove audio 
ffmpeg -i input.mov -an -c:v libx264 -crf 23 output.mp4 
  

Adjust the -crf value to balance quality and file size: 

• Lower values = higher quality, larger file 

• Higher values = lower quality, smaller file 

• Recommended range: 23–35 for background videos 

Asset hosting options 

Before referencing an asset in a Piano template, the file must be accessible via a public HTTPS URL. There are two hosting options. 

Option A: Piano CDN (recommended) 

Piano provides CDN hosting for template assets through its managed S3 infrastructure. This is the recommended approach because: 

• Assets are served from a globally distributed network, ensuring fast delivery to all end users. 

• No additional infrastructure management is required. 

• It's consistent with Piano template architecture. 

• It's suitable for clients who don't have their own CDN. 

To use Piano CDN hosting, provide the asset file to the Piano team. Once uploaded, a URL in the format https://i.piano.io/... will be shared for use in the template. 

Option B: Client-hosted CDN or web server 

Clients may also host assets on their own infrastructure — for example, on their own CDN, web server, or website. This is a valid option, provided the following conditions are met: 

• The hosting server supports HTTPS (required for secure template delivery). 

• The server has sufficient bandwidth to serve the asset to every end user who loads the template. 

• CORS headers are correctly configured to allow Piano templates to load the assets. 

• Assets are served with appropriate cache headers (for example, Cache-Control: max-age=31536000 for static assets). 

• The asset URL is publicly accessible. 

What is a CDN? A Content Delivery Network (CDN) is a geographically distributed network of servers that delivers content to users from the location closest to them, improving speed and reliability. Examples include Cloudflare, AWS CloudFront, and Fastly. If a client doesn't have a CDN, they can still host assets on a standard web server, as long as bandwidth is sufficient. 

Which option should I choose? 

Referencing assets in template content fields 

Many Piano templates use content fields to allow asset URLs to be configured without modifying the template code directly. For example, a template may include a content field named event_logo_url or background_video_url. 

To reference a hosted asset in a content field: 

1. Make sure the asset is hosted and accessible via a public HTTPS URL (see Asset hosting options above). 

2. Copy the full asset URL (for example, https://i.piano.io/managedservices/example/logo.svg or https://cdn.example.com/assets/logo.svg). 

3. In the Piano Dashboard, navigate to the template and open the content field configuration. 

4. Paste the URL into the appropriate content field. 

5. Save and preview the template in Sandbox before publishing to production. 

Replacing assets in existing templates 

To update images or videos in an existing Piano template:

1. Prepare the new asset following the format, dimension, and compression guidelines above.

2. Upload the asset to the Piano CDN (or your self-hosted CDN).

3. Copy the new asset URL after upload.

4. 1. Navigate to the template in question.

   2. Locate the image or video URL field (content field or template code).

   3. Replace the old URL with the new asset URL.

   4. Save and preview the template.

5. Test in Sandbox before publishing to production.

Quick reference checklist 

Before delivering assets for a Piano template, verify the following: 

• Images are in WebP or SVG format (with JPEG/PNG fallback if needed). 

• Image dimensions match the display size × 2 (for retina support), not larger. 

• Image file sizes are under 500 KB per image. 

• Videos are in WebM + MP4 format. 

• Background videos are under 5 MB (mobile) / 20 MB (desktop), maximum 30 seconds, with no audio track. 

• Animated assets are under 5 MB (mobile) / 20 MB (desktop); static is preferred. 

• All assets are accessible via a public HTTPS URL. 

• Assets have been tested in the Sandbox environment. 

FAQ 

Q: Can Piano host our assets, or do we need to provide our own hosting? Piano can host assets on its CDN — this is the recommended option for most clients. If you prefer to host assets yourself (on your own CDN or web server), that's also supported, provided the URL is publicly accessible via HTTPS and your server has sufficient bandwidth. 

Q: Can I just upload an image to my website and use that URL? Yes. As long as the URL is publicly accessible via HTTPS and your server can handle the traffic load, you can reference any web-hosted asset URL in a Piano template content field. 

Q: What is a CDN, and do I need one? A CDN (Content Delivery Network) is a distributed network of servers that delivers content quickly to users around the world. You don't need your own CDN — Piano provides CDN hosting for template assets. If you do have a CDN, you're welcome to use it instead. 

Q: Can Piano templates use animated images or GIFs? Yes. Piano templates support animated images, GIFs, and video backgrounds. The same file size limits apply: 5 MB maximum for mobile, 20 MB for desktop. Static images are always preferred for performance. If animation is required, make sure the file is compressed appropriately. 

Q: My video file is 1.5 GB. Is this acceptable? No. A 1.5 GB video file is far too large for web delivery. Background videos should be compressed to under 5–10 MB. A well-compressed video can deliver the same visual quality at a fraction of the file size. Use FFmpeg or a similar tool to reduce the file size (see Compression guidelines for videos above). 

Q: I have a 4K image for a small display area. Should I use it as-is? No. A 4K image is unnecessarily large for a small container. Resize the image to match the display dimensions × 2 (for retina support) and compress it. For example, a 300 × 300 container requires a maximum of 600 × 600 px — not a 4K source image. 

Q: If I swap a logo in a content field, do I need CSS changes? Not always — but it depends on the dimensions and aspect ratio of the new logo compared to the original. If the new logo has significantly different proportions, CSS adjustments to the template may be required. Contact the Piano team to confirm before making the swap. 

Q: What happens if I provide only an MP4 video? The template will work, but performance may not be optimal. Providing both WebM and MP4 allows the browser to select the most efficient format. WebM (VP9) files are generally smaller than MP4 (H.264) at the same visual quality. 

Q: How do I remove the audio track from a video? Use FFmpeg with the -an flag: 

ffmpeg -i input.mp4 -an -c:v copy output_no_audio.mp4 

This strips the audio without re-encoding the video, resulting in a smaller file. 

Last updated: August 07, 2026