Media & Visual Assets

Visual media—images, videos, and graphics—are crucial for creating engaging QR experiences. Learn how to use media effectively, optimize for performance, and create stunning visual impact.

Overview

Great visuals capture attention, communicate quickly, and make your QR experiences memorable. QRCompose makes it easy to add and manage media while ensuring fast loading and beautiful presentation across all devices.

Image Management

Uploading Images

Upload Methods:

Direct Upload:

1. Click Upload Image in any image field
2. Select file from computer
3. Image uploads to AWS
4. Public URL generated automatically

Paste URL:

• Paste image URL from anywhere
• Must be publicly accessible
• HTTPS required

Drag & Drop:

• Drag images directly into upload areas
• Bulk upload multiple images
• Automatic processing

Bulk Upload:

• Select multiple files at once
• Batch processing
• Auto-generate thumbnails

Supported Formats

Format	Best For	Notes
JPG	Photos, complex images	Good compression, no transparency
PNG	Graphics with transparency	Larger files, lossless
WebP	Modern format, best compression	Smaller files, excellent quality
GIF	Simple animations	Limited colors, avoid for photos
SVG	Logos, icons, vector graphics	Scalable, small files

Format Recommendations

• Photos: JPG or WebP
• Logos: SVG or PNG
• Icons: SVG
• Screenshots: PNG
• Animations: GIF (short) or video (longer)

File Size Optimization

Target File Sizes:

• Hero images: 200-500KB
• Content images: 100-300KB
• Thumbnails: 20-50KB
• Icons: 5-20KB

Compression Tools:

• TinyPNG/TinyJPG — Lossless compression
• Squoosh — Advanced options
• ImageOptim — Mac app
• Compressor.io — Online tool

Before Upload Checklist:

1. ✅ Resize to actual display dimensions
2. ✅ Compress with quality 80-85%
3. ✅ Convert to WebP if possible
4. ✅ Remove EXIF data (privacy)
5. ✅ Test file size (<500KB ideal)

Image Dimensions

Recommended Sizes:

Hero/Banner Images:

Desktop: 1920 × 1080px (16:9)
Mobile: 1080 × 1080px (1:1) or 1080 × 1920px (9:16)

Content Images:

Full-width: 1200 × 800px
Half-width: 600 × 400px
Thumbnail: 300 × 300px

Profile/Avatar:

Standard: 400 × 400px (square)
High-res: 800 × 800px

Logo:

Standard: 400px wide
Retina: 800px wide
SVG: Any size (vector)

Background Media

Background Images

Use Cases:

• Hero sections
• Full-page backgrounds
• Section backgrounds
• Card backgrounds

Background Options:

Fixed:

• Image stays in place while scrolling
• Parallax effect
• Creates depth

Scroll:

• Image moves with content
• Standard behavior
• Natural feel

Cover (Default):

background-size: cover;
background-position: center;

• Fills entire container
• Maintains aspect ratio
• May crop edges

Contain:

background-size: contain;

• Entire image visible
• May show space around image
• No cropping

Patterns & Textures:

• Subtle patterns
• Repeating textures
• Small file sizes
• Add visual interest without distraction

Background Videos

Creating Impact:

• Full-screen video backgrounds
• Auto-play (muted)
• Loop continuously
• Fallback to image

Best Practices:

File Specifications:

• Format: MP4 (H.264)
• Length: 10-30 seconds (loops)
• Resolution: 1920×1080 (1080p)
• File size: <10MB
• Framerate: 30fps

Content Guidelines:

• Subtle, not distracting
• No essential text/info in video
• Muted audio (or no audio)
• Smooth loop point
• Low-contrast (so text is readable)

Performance:

• Provide poster image (first frame)
• Disable on mobile (optional)
• Lazy load if below fold

Mobile Consideration

Background videos significantly increase data usage. Consider showing static image on mobile devices to respect user data plans.

Gradients

Uses:

• Backgrounds
• Overlays on images
• Accents
• Button backgrounds

Gradient Types:

Linear Gradients:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

• Direction specified in degrees
• Multiple color stops
• Smooth transitions

Radial Gradients:

background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

• Radiates from center
• Circular or elliptical
• Dramatic effect

Popular Combinations:

Blue to Purple: #667eea → #764ba2
Sunset: #ff6b6b → #feca57
Ocean: #2b5876 → #4e4376
Mint: #00b09b → #96c93d
Fire: #f12711 → #f5af19

Gradient Overlays:

• Place over images for text readability
• Darken or lighten images
• Add color tint
• Create depth

/* Gradient overlay on image */
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
            url('image.jpg');

Image Display Options

Image Aspect Ratios

Common Ratios:

16:9 (Landscape):

• Standard widescreen
• Videos, hero images
• Modern, cinematic

4:3 (Classic):

• Traditional ratio
• Balanced
• Nostalgic feel

1:1 (Square):

• Social media standard
• Instagram-friendly
• Symmetrical, clean

3:2 (Photography):

• Classic photo ratio
• Natural, professional
• DSLRs default

9:16 (Portrait):

• Mobile-first
• Instagram/TikTok stories
• Vertical video

Custom:

• Any ratio for specific needs
• Unique presentations

Image Presentation

Image Styles:

Full Bleed:

• Edge-to-edge
• No margins or padding
• Immersive

Contained:

• Within container bounds
• Margins on sides
• Controlled size

Rounded Corners:

border-radius: 8px;  /* Subtle */
border-radius: 16px; /* Noticeable */
border-radius: 50%;  /* Circle */

Borders & Frames:

• Subtle border (1-2px)
• Thick frame (8-16px)
• Drop shadow
• Elevated effect

Effects:

Shadow:

box-shadow: 0 4px 6px rgba(0,0,0,0.1);        /* Subtle */
box-shadow: 0 10px 25px rgba(0,0,0,0.15);    /* Medium */
box-shadow: 0 20px 50px rgba(0,0,0,0.3);     /* Dramatic */

Hover Effects:

• Scale up (1.05x)
• Lift (increase shadow)
• Brightness change
• Overlay appear

Filters:

filter: grayscale(100%);        /* Black & white */
filter: brightness(0.8);        /* Darken */
filter: contrast(1.2);          /* Increase contrast */
filter: blur(5px);              /* Blur effect */
filter: sepia(50%);             /* Vintage */

Responsive Images

Responsive Sizing

srcset Attribute:

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 768px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="Description">

Browser automatically selects appropriate image size based on screen.

Benefits:

• Smaller images on mobile (faster)
• Sharper images on retina displays
• Bandwidth savings
• Automatic optimization

Art Direction

Different crops/images for different screens:

<picture>
  <source media="(max-width: 768px)" srcset="mobile-image.jpg">
  <source media="(max-width: 1200px)" srcset="tablet-image.jpg">
  <img src="desktop-image.jpg" alt="Description">
</picture>

Use When:

• Mobile needs different framing
• Portrait vs. landscape orientation
• Focus on different subject areas
• Text needs different placement

Lazy Loading

Load images as user scrolls:

<img src="image.jpg" loading="lazy" alt="Description">

Benefits:

• Faster initial page load
• Reduced bandwidth usage
• Better performance scores
• Automatic browser support

Best For:

• Images below the fold
• Long pages with many images
• Galleries and catalogs
• Mobile experiences

Image Galleries

Gallery Layouts

Grid Gallery:

• Uniform squares or rectangles
• Clean, organized
• Product catalogs

Masonry Gallery:

• Mixed heights
• Natural aspect ratios
• Creative portfolios

Carousel/Slider:

• One image at a time
• Swipe/arrow navigation
• Featured content

Lightbox:

• Click to enlarge
• Full-screen viewing
• Navigation between images

Gallery Best Practices

Image Consistency:

• Similar editing style
• Consistent lighting
• Matching color grading
• Professional appearance

Loading Strategy:

• Load first 6-9 images immediately
• Lazy load rest
• Show loading indicators
• Thumbnail → full-res progressive

Navigation:

• Clear next/previous buttons
• Swipe support on mobile
• Keyboard arrows (desktop)
• Touch-friendly targets (44px+)

Icons & Graphics

Icon Usage

Icon Sources:

• QRCompose icon library (1000+ icons)
• Custom upload
• SVG code
• Icon fonts

Icon Styles:

• Outline (line icons)
• Filled (solid)
• Duotone (two-color)
• Colored

Icon Sizes:

Small: 16px  — Inline text
Medium: 24px — Default
Large: 32px  — Emphasis
XLarge: 48px — Hero icons

Icon Colors:

• Match text color
• Use brand color
• Consistent throughout
• Sufficient contrast

Vector Graphics (SVG)

Why SVG?

• ✅ Scalable to any size
• ✅ Sharp on all displays
• ✅ Small file size
• ✅ Can be styled with CSS
• ✅ Animatable

Use SVG For:

• Logos
• Icons
• Illustrations
• Diagrams
• Charts

SVG Optimization:

• Remove unnecessary elements
• Simplify paths
• Use SVGO or SVGOMG
• Minify code

Video Media

Video Specifications

Uploaded Videos:

• Format: MP4 (H.264 codec)
• Max size: 100MB (Standard), 500MB (Pro)
• Resolution: Up to 4K
• Framerate: 24, 30, or 60 fps

Optimization:

• Compress with HandBrake
• Target bitrate: 5-8 Mbps (1080p)
• Ensure video is web-optimized (fast start)

Video Thumbnails

Custom Thumbnails:

• Choose frame from video
• Upload custom image
• Design in 16:9 ratio
• High contrast
• Clear, compelling

Thumbnail Best Practices:

• Show action or key moment
• Include text overlay (optional)
• Faces perform well
• High quality, sharp
• Represents content accurately

Video Embedding

Supported Platforms:

• YouTube
• Vimeo
• Wistia
• Loom
• Custom embeds

Embed vs. Upload:

Embed (External hosting):

• ✅ No file size limits
• ✅ No bandwidth costs
• ✅ Platform features (playlists, etc.)
• ❌ Platform branding
• ❌ Ads (on free platforms)

Upload (QRCompose hosting):

• ✅ No external branding
• ✅ Full control
• ✅ Custom player
• ❌ File size limits
• ❌ Bandwidth costs

Best Practices

Image Alt Text

Why It Matters:

• Accessibility (screen readers)
• SEO benefits
• Shows if image fails to load

Writing Good Alt Text:

• ✅ Describe image content
• ✅ Be specific and concise
• ✅ Include relevant keywords (naturally)
• ❌ Don't start with "Image of..."
• ❌ Don't keyword stuff

Examples:

Bad: "image123.jpg"
Better: "Product photo"
Best: "Blue running shoes on white background"

Copyright & Licensing

Use Only:

• Your own photos/videos
• Licensed stock media
• Creative Commons (with attribution if required)
• Public domain content

Stock Photo Resources:

• Free: Unsplash, Pexels, Pixabay
• Paid: Shutterstock, Adobe Stock, iStock

Attribution:

• Give credit when required
• Link to source if possible
• Follow license terms

Performance Optimization

Checklist:

1. ✅ Compress all images
2. ✅ Use appropriate dimensions
3. ✅ Enable lazy loading
4. ✅ Use WebP when possible
5. ✅ Implement responsive images
6. ✅ Minimize video file sizes
7. ✅ Test on slow connections
8. ✅ Monitor load times

Tools:

• Google PageSpeed Insights
• GTmetrix
• WebPageTest
• Lighthouse (Chrome DevTools)

Accessibility

Guidelines:

• Provide alt text for all images
• Ensure sufficient color contrast
• Don't rely on color alone
• Provide captions for videos
• Avoid flashing/strobe effects

Troubleshooting

Images not loading

Check:

• File size within limits
• URL is publicly accessible
• Correct file format
• HTTPS (not HTTP)
• No CORS issues

Poor image quality

Improve:

• Upload higher resolution
• Reduce compression level
• Use PNG for graphics
• Use WebP format
• Check source quality

Slow page loading

Optimize:

• Compress images more
• Reduce number of images
• Enable lazy loading
• Use appropriate dimensions
• Consider image CDN

Images look different on mobile

Reasons:

• Different screen calibration
• Auto-brightness
• True Tone/Night Shift
• Color profile differences
• Test on actual devices

Next Steps

• QR Styling → — Design the QR code itself
• Themes → — Overall visual styling
• Layouts → — Organize media in layouts
• Galleries → — Create image galleries

---

next: /customization/qr-styling