Member Avatar for Kyla_1

Hello, first time poster. Total newbie.

It's a fairly specific question, but if you could look it over I would really appreiate it. I'm having trouble getting a really solid answer from web designers or video animation guys on odesk.

My problem is this:

  • I am using this theme:

http://www.cssvillain.com/chimera/

  • I need it customized

  • Where the car goes, I will add a, roughly, 30 second animation, of two models (15 secs per model, not 1 min total). The models are basically just one color with lights for buttons, and some textures.

  • Background, ideally, would be clear - but I can work around this if it can't be done.

  • Image quality must be very high

What file format do I need? I googled the pros cons but I'm not sure what will apply to this template, and video length.

I lean toward PNG or GIF because I can have a clear background, and it looks pretty universal -- but it looks like image quality/video length could be limited. Will my high quality, but only 30 second animation be limited by GIF? Will this template support any format, and how would I know? We need a format that will be very universal, does that limit my choices?

Just tell me what to pick. Maybe add why.

Thanks,

Kyla

Edited by pritaeas because: Moved to Web Design.
  • 2 Contributors
  • 1 Reply
  • 223 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

Short answer: for simple, flat models use a vector-based playback (Lottie/bodymovin). If you must deliver raster frames with a true alpha channel, prefer animated WebP or APNG over GIF. For the highest photoreal/texture fidelity go with a WebM (VP8/VP9) file that carries alpha and provide an HEVC (H.265) / MOV fallback for Safari. These choices balance quality, transparency and file size better than GIF. (github.com)

Why not GIF: GIF is limited to an 8‑bit palette (256 colors) and only binary transparency, so long, detailed animations look posterized and blow up in size for a 30‑second run. Modern formats give true alpha and far better compression. (developer.mozilla.org)

Practical raster options and compatibility: APNG gives 24‑bit color + alpha and now has broad browser support (good for shorter UI loops); animated WebP supports alpha and usually gives smaller files than GIF/APNG for the same quality. Serve WebP/APNG where supported and fall back to a static poster image or MP4/H.264 when needed; use server/content‑negotiation or a <picture>/feature‑detect approach to pick the best asset. Reduce resolution and FPS (e.g., 24→15) and loop smartly to keep file size reasonable. (caniuse.com)

If you need full motion video with complex textures: encode a WebM with alpha for Chrome/Firefox and a HEVC (H.265) with alpha (Apple’s “HEVC with Alpha” profile) for Safari/iOS; test on target devices and include a static poster for very old browsers. Since this sits inside a slider (as noted) you can usually inject an HTML layer that contains a Lottie player or a <video> element — Lottie for vector art will be smallest and easiest to scale. See Chrome’s alpha video notes and Apple’s WWDC guidance for HEVC+alpha. (developer.chrome.com)

Minimal video fallback example:

<video autoplay loop muted playsinline>
  <source src="anim.webm" type="video/webm">
  <source src="anim.mov" type="video/mp4; codecs='hvc1'">
</video>

Notes: test on your exact slider implementation (some sliders only accept image files), measure final file sizes on mobile, and prefer Lottie if your art is vector/simple — it will be the most universal, sharp, and smallest option. (github.com)

Member Avatar for dany12

Ok first of all what you have is a slider.
The basic idea behind it is that it moves images into the view and then out of the view.

If you don't know coding and you don't have a user interface or GUI, you will not be able to create what you want even, if you have the images as pngs.

Why png?

Simple png are transparent supported by all modern browsers fast loading and a good compresion rate.

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.