Recommended Media Sizes and Formats

Overview

Several KineticHub blocks can display or interact with images, audio, video, thumbnails, and other visual media.

The final page performance depends not only on the block settings, but also on:

• Media dimensions
• File format
• Compression level
• File size
• Aspect ratio
• Hosting method
• Number of media files on the page
• Visitor connection speed
• Device capabilities

KineticHub does not require one universal image or media size.

Prepare each file according to the largest size at which it will actually be displayed.

General recommendation

Upload media that is large enough to remain sharp, but not significantly larger than the layout requires.

For example, do not upload a 6000-pixel photograph when the image will never be displayed wider than 900 pixels.

Oversized media can increase:

• Page download size
• Mobile data usage
• Image processing time
• WordPress storage use
• Backup size
• CDN usage
• Largest Contentful Paint time

WordPress may generate several image sizes, but the original upload still remains on the server.

Recommended image formats

WebP

WebP is a good general choice for:

• Photographs
• Background images
• Before-and-after images
• Cover artwork
• Portfolio images
• Video thumbnails

It usually provides smaller files than JPEG or PNG at a similar visual quality.

AVIF

AVIF can provide very small files with high image quality.

Use it when:

• Your WordPress setup supports AVIF uploads
• Your image optimization workflow creates reliable fallbacks
• You have tested the images in your target browsers

AVIF processing may require more server resources than WebP.

JPEG

JPEG remains suitable for photographs when WebP or AVIF is not available.

Use a reasonable quality setting rather than exporting every image at maximum quality.

PNG

Use PNG when the image requires:

• Transparency
• Sharp interface graphics
• Logos with transparent backgrounds
• Screenshots containing small text
• Visual elements that do not compress well as JPEG

Avoid PNG for large photographs because the file can become unnecessarily heavy.

SVG

SVG is useful for:

• Logos
• Icons
• Simple illustrations
• Decorative vector shapes

Only upload SVG files through a trusted and properly secured WordPress workflow.

SVG can contain executable or unsafe markup when it comes from an untrusted source.

Image size starting points

These are practical starting points rather than strict requirements.

Use case	Suggested starting size
Full-width hero image	1920 × 1080 px
Wide section image	1600 × 900 px
Standard content image	1200 × 800 px
Square card or cover	1200 × 1200 px
Portrait image	1200 × 1600 px
Video cover at 16:9	1280 × 720 px or larger
Small card thumbnail	800 × 600 px

A retina or high-density display may benefit from an image approximately twice the CSS display width.

Do not automatically upload twice the size when the page already uses very large full-width media.

File-size targets

There is no single correct file size for every image.

As a practical target:

• Small thumbnails: approximately 50–150 KB
• Standard content images: approximately 100–300 KB
• Large hero images: approximately 200–500 KB
• Complex transparent graphics: as small as reasonably possible

Some detailed images may require larger files.

Visual quality should remain acceptable, but several multi-megabyte images on one page should be avoided.

Kinetic Before/After images

Kinetic Before/After requires two images:

• Before image
• After image

For the cleanest comparison, use images with:

• The same pixel dimensions
• The same aspect ratio
• The same crop
• The same camera or subject position
• Matching alignment

Example:

• Before: 1600 × 1000 px
• After: 1600 × 1000 px

Using one landscape image and one portrait image can produce inconsistent cropping or alignment.

Before/After aspect ratios

The block provides aspect-ratio options for controlling the comparison frame.

Available configurations include:

• Auto
• 16:9
• 1:1
• 4:3
• 3:4

Use Auto when both images already have matching natural dimensions.

Use a fixed ratio when:

• You need a consistent section height
• Images have slightly different source dimensions
• The comparison appears inside a grid
• You want a predictable mobile layout
• You want to reduce layout movement while images load

The fixed ratio controls the frame. It does not restore missing image content that was cropped differently before upload.

Preparing comparison images

Before uploading Before/After images:

1. Open both files in the same image editor
2. Use the same canvas size
3. Align the subject
4. Apply the same crop
5. Export both with the same dimensions
6. Use similar compression settings
7. Confirm that the subject does not move between frames
8. Add meaningful alternative text where appropriate

The comparison will feel more accurate when only the intended difference changes.

Kinetic Video Modal sources

Kinetic Video Modal supports:

• YouTube URLs
• YouTube privacy-enhanced URLs
• Vimeo URLs
• Direct self-hosted video files

Direct self-hosted video URLs are validated for common file extensions including:

• MP4
• WebM
• OGG

Unsupported or malformed URLs are rejected rather than being inserted as an unrestricted iframe.

YouTube and Vimeo

Externally hosted video is recommended for:

• Documentation tutorials
• Product demonstrations
• Long videos
• Marketing videos
• Videos used on several pages
• Websites with limited hosting bandwidth

Advantages include:

• Video transcoding
• Adaptive streaming
• Reduced load on the WordPress server
• Multiple playback qualities
• Easier sharing
• Caption support
• Analytics provided by the video platform

Kinetic Video Modal creates the external player after visitor interaction rather than loading the third-party iframe during the initial page render.

This helps reduce the initial page workload.

Self-hosted video

Self-hosted video may be suitable for:

• Short decorative clips
• Private or controlled media
• Small looping demonstrations
• Content that cannot be hosted on a third-party platform

For broad browser compatibility, MP4 with H.264 video and AAC audio is a practical starting point.

The file extension alone does not guarantee playback. The codec inside the file must also be supported by the visitor’s browser.

Recommended self-hosted video settings

For normal web content, begin with:

• Resolution: 1280 × 720 or 1920 × 1080
• Format: MP4
• Video codec: H.264
• Audio codec: AAC
• Frame rate: 24, 25, or 30 FPS
• No unnecessary 4K export
• Web-optimized encoding
• Compressed bitrate suitable for the content

Use 4K only when the visitor can genuinely benefit from it.

A large 4K file used inside a small modal or card adds considerable download weight without improving the visible result.

Self-hosted video file size

Try to keep short web videos as small as practical.

A 20–30 second instructional or decorative clip should normally not require hundreds of megabytes.

The correct size depends on:

• Resolution
• Frame rate
• Motion complexity
• Duration
• Codec
• Audio
• Export quality

Review the final file on desktop and mobile before uploading it.

Video preload

Kinetic Video Modal provides preload behavior for self-hosted videos.

Lighter preload settings reduce the amount requested before playback.

Use a lighter option when:

• The video is below the fold
• Several videos appear on one page
• The visitor may not play the video
• Mobile data usage is a concern
• Initial page performance is more important

Use stronger preload behavior only when the video is central to the page experience and likely to be played.

Preload is a browser hint. Browsers may apply it differently.

Video cover images

A cover image is shown before the video begins.

Use a cover image that:

• Matches the selected aspect ratio
• Clearly represents the video
• Has enough contrast behind the play button
• Avoids important content near cropped edges
• Is compressed for the web
• Does not contain tiny unreadable text

For a 16:9 video, a cover image of 1280 × 720 px is a good starting point.

For a square layout, use a square cover such as 1200 × 1200 px.

Automatic YouTube thumbnails

Kinetic Video Modal can automatically retrieve a YouTube thumbnail and includes fallback handling when the highest-resolution version is unavailable.

Use automatic thumbnails when they fit the page design.

Use a custom cover image when you need:

• Consistent branding
• A specific crop
• Better text placement
• Matching thumbnails across several videos
• A designed call-to-action
• A higher-quality preview

Video aspect ratios

Kinetic Video Modal supports:

• 16:9
• 4:3
• 21:9
• 1:1

Choose the ratio that matches both the source video and the surrounding design.

Using the wrong ratio may introduce cropping, empty space, or an inconsistent cover image.

16:9

Recommended for:

• Standard YouTube videos
• Tutorials
• Product demos
• General widescreen content

4:3

Useful for:

• Older video material
• Classic presentation layouts
• Some screen recordings

21:9

Useful for:

• Cinematic presentations
• Wide hero sections
• Decorative showreels

Check the mobile layout carefully because very wide videos become relatively short on narrow screens.

1:1

Useful for:

• Square cards
• Social media videos
• Grid layouts
• Compact previews

Kinetic Audio Player sources

Kinetic Audio Player can use:

• An audio file selected through the WordPress Media Library
• A valid audio URL

Common browser-supported formats include:

• MP3
• WAV
• OGG

Browser support and playback behavior can vary depending on the encoding used inside the file.

Recommended audio format

MP3 is a practical default for:

• Spoken tutorials
• Podcast previews
• Music samples
• Voice demonstrations
• General web playback

It offers broad browser compatibility and manageable file sizes.

WAV provides high quality but usually creates much larger files.

OGG can provide efficient compression, but compatibility should be tested for the browsers and devices used by your audience.

Audio bitrate starting points

These are recommendations, not KineticHub requirements.

Spoken audio

A practical starting range is:

• 96–160 kbps MP3
• Mono when stereo is unnecessary

Music

A practical starting range is:

• 192–256 kbps MP3
• Stereo when appropriate

Higher bitrates create larger files.

Use the lowest bitrate that still preserves acceptable quality for the content.

Audio cover artwork

Kinetic Audio Player supports optional cover artwork.

For cover images:

• Use a square image
• Start with approximately 1000 × 1000 px
• Compress it as WebP or JPEG
• Keep important details away from the edges
• Avoid very small text
• Use consistent artwork across a playlist or series

The displayed artwork may be much smaller than the original file.

A very large image is unnecessary for a compact player.

Audio preload

Kinetic Audio Player provides browser preload options:

• None
• Metadata
• Auto

None

The browser does not intentionally preload the audio file.

Use this when:

• Several players appear on one page
• Audio is optional
• Initial page weight is a priority

Metadata

The browser can load basic information such as duration without intentionally downloading the complete file.

This is a balanced starting option for many pages.

Auto

The browser may preload more of the file.

Use it only when quick playback is important and the additional network use is acceptable.

Browsers may not follow preload instructions identically.

Multiple audio or video items

When a page contains several media blocks:

• Use lightweight cover images
• Avoid preloading every file
• Prefer externally hosted video for long content
• Keep audio files compressed
• Avoid automatic playback
• Test mobile data usage
• Check page behavior on a slower connection
• Confirm that only the intended player is active

Several small optimized files can still become heavy when combined on one page.

Kinetic Split Scroll media

Split Scroll can display a sequence of media alongside related content.

For a consistent visual result:

• Use images with a common aspect ratio
• Keep related images visually aligned
• Use similar export dimensions
• Compress every image
• Test object positioning
• Check the mobile content flow
• Avoid mixing extremely wide and extremely tall images without testing

A gallery with consistent source proportions produces smoother transitions and a more stable pinned layout.

Kinetic Cursor Reveal media

Cursor Reveal is intended to reveal visual media during pointer interaction.

Use images that:

• Remain recognizable at the displayed size
• Are compressed for quick reveal
• Share similar proportions when used as a sequence
• Do not contain essential text
• Have a suitable mobile fallback
• Load reliably before interaction

Heavy source images can make the reveal feel delayed even when the interaction code is working correctly.

Background and hero media

Large hero media is often one of the heaviest resources on a page.

For hero or background images:

• Use the correct crop before uploading
• Export close to the largest expected display width
• Use WebP or AVIF where appropriate
• Avoid unnecessary transparency
• Keep the visual focal point away from likely mobile crops
• Add an overlay when text contrast requires it
• Test both wide and narrow screens

Do not use a large photograph as PNG unless transparency or lossless detail is genuinely required.

WordPress image sizes

WordPress may generate multiple sizes after upload.

When selecting an image, WordPress or the theme may use:

• Thumbnail
• Medium
• Medium Large
• Large
• Full Size
• Custom theme sizes

Use the smallest generated size that remains sharp at the largest displayed width.

Selecting Full Size for every image can result in unnecessarily large downloads.

Responsive images

WordPress normally adds responsive image information such as srcset and sizes to compatible image output.

The browser can then select an appropriate source based on the layout and device.

Responsive image generation still depends on:

• Correct WordPress attachment data
• Available generated sizes
• Theme and plugin markup
• Image optimization settings
• The original upload dimensions

Do not rely on responsive markup as a reason to upload unnecessarily large originals.

Alternative text

Add alternative text when an image communicates meaningful information.

Good alternative text describes the purpose of the image in its page context.

Do not use alternative text only for search keywords.

Decorative images should normally use an empty alternative description when they do not add information.

For Before/After comparisons, describe the subject and the relevant difference where practical.

Captions and transcripts

For video with spoken content:

• Add accurate captions
• Review automatically generated captions
• Provide a transcript for important tutorials or instructions

For audio containing important spoken information:

• Provide a transcript
• Identify the speaker when relevant
• Make the playback control clearly labeled

Captions and transcripts are especially valuable for documentation content.

File names

Use clear file names before uploading.

Examples:

kinetichub-installation-tutorial.mp4

website-redesign-before.webp

website-redesign-after.webp

kinetichub-audio-demo.mp3

Avoid names such as:

IMG_8473-final-final2.jpg

Clear file names make the Media Library easier to manage.

WordPress upload limits

The maximum upload size is controlled by the WordPress hosting environment.

It may depend on PHP settings such as:

• upload_max_filesize
• post_max_size

A file that is supported by the block may still be rejected when it exceeds the hosting upload limit.

Increasing the upload limit does not make a very large media file suitable for the web.

Compress the media before increasing server limits.

CDN and external media

A CDN can help deliver images, audio, and self-hosted video from locations closer to visitors.

After enabling a CDN:

• Confirm that rewritten media URLs remain valid
• Test cross-origin audio and video playback
• Purge CDN caches after replacing media
• Confirm that thumbnails update
• Test secure HTTPS delivery
• Check browser console errors

A broken CDN URL can leave the block visible while the media itself fails to load.

Replacing media files

WordPress attachments usually keep the same URL unless a replacement tool changes the file.

After replacing or optimizing media:

1. Clear WordPress caches
2. Purge the CDN
3. Clear browser cache
4. Regenerate thumbnails when required
5. Reload the affected page
6. Confirm desktop and mobile crops
7. Test audio or video playback

Old media may remain visible temporarily when a CDN or browser cache is active.

Recommended workflow

Before uploading media:

1. Choose the correct aspect ratio
2. Crop the file
3. Resize it near the intended display size
4. Select the appropriate format
5. Compress the file
6. Use a clear filename
7. Add alternative text where needed
8. Upload it to WordPress or the selected platform
9. Insert it into the KineticHub block
10. Test desktop and mobile
11. Test on a slower connection
12. Confirm that the final quality is acceptable

Troubleshooting

An image looks blurry

Check whether WordPress is displaying a thumbnail or medium-size version inside a larger container.

Select a larger generated image size or upload a larger source image.

Do not automatically use the full-size source without checking its file weight.

The page loads slowly

Inspect:

• Large hero images
• Multiple full-size images
• Self-hosted video
• Audio set to Auto preload
• Several media blocks
• Uncompressed PNG files
• Duplicate mobile and desktop media
• Third-party embeds

Optimize the largest resources first.

Before/After images do not align

Confirm that both images have the same dimensions, crop, and subject position.

Use a fixed aspect ratio only after aligning the source images.

A video URL is rejected

Confirm that the URL is from a supported source:

• YouTube
• YouTube No-Cookie
• Vimeo
• A direct MP4, WebM, or OGG file URL

A normal webpage containing a video is not necessarily a direct video file URL.

A self-hosted video does not play

Check:

• File extension
• Video codec
• Audio codec
• HTTPS delivery
• Server MIME type
• CDN response
• Browser console errors
• Cross-origin restrictions

The extension can be supported while the internal codec is not.

A YouTube thumbnail is not ideal

Upload a custom cover image to control the crop, branding, and visual consistency.

Audio does not play in every browser

Test the actual encoding and URL.

Use MP3 as the general compatibility format or provide an alternative source through another implementation when broader format fallback is required.

Media changes are not visible

Clear:

• Page cache
• Image optimization cache
• CDN cache
• Browser cache
• Generated thumbnails

Then reload the page in a private browser window.

Mobile media is cropped incorrectly

Review:

• Selected aspect ratio
• Source image crop
• Object positioning
• Container height
• Mobile-specific settings
• Parent overflow

Prepare a more suitable crop when the important subject cannot remain visible at both wide and narrow ratios.

Next step

Continue with Safe CSS Customization to learn how to add targeted styles without editing KineticHub plugin files or creating fragile global overrides.