nextlevelbrosQ: Hi, I use mostly SVG's and videos on my website.
I am wondering what benefit twicpics can provide to already-optimised SVG's? Always looking to gain more speed. I suppose inline SVG's cannot be handled by twicpics at all.
Regarding videos, I use some videos that autoplay muted above the fold and others that need to be clicked to play or may have audio (e.g testimonials).
So I am wondering what benefit it can provide for videos that are already hosted on a CDN with streaming capabilites that re-encodes the videos and serves appropriate resolutions in a streaming format (not as one huge file). I use Bunny CDN currently.
One thing that irks me is when video players do not handle not-standard sizes well ending up with black bars on the side, sometimes these may be a pixel or two thick, but still super annoying when you are trying to make the video blend into the page seemlessly, or when the video loads an ugly black rectangle appears however briefly before the thumbnail or video loads. Can you please tell me what my experiece with twicpics would be as far as these concerns go?
Finally, also wondering what customizability there is for the video player, if you can turn on and off feature like volume control, duration, play bar, fullscreen, if you can load subtitle files and control fonts size and colors, edit the interface color and so on, and if you can have different video player configurations for different groups of videos. One size does not fit all.
Thanks!
- Alexander
Julian_TwicPics
May 14, 2024A: Hello Alexander,
Lots of questions. So let me try and answer them one by one.
First of all, we don't touch SVG files that pass through our infrastructure because they're usually lean enough and rasterizing them usually butchers them, especially when compressed as JPEG or WebP.
As a matter of fact anything that is not an optimizable image per our standards, be it CSS, JS, HTML or, in that case, SVG just passes through our infrastructure and is distributed as is by our CDN.
We know that when it comes to video one size does NOT fit all for sure! So we decided to tackle a very specific use-case: short 30 second max videos with no sound. In essence, short animations that would be used in place of a static image.
As such, we only use the video track in a video that passes through our infrastructure. We provide all the transformations we have for images, including, but not limited to, watermarking, resizing, flipping and colorblind filters with the only exception being AI algorithms.
We don't provide a specific player, that's not our business and there are a lot of options in the wild, we rather recommend using the standard HTML video element. Using our components or our Script with a video element, you get an auto-playing, looping visual with no sound. It is also lazy-loaded right out of the box to boot. One big advantage is that you can use CSS to determine how the video will be presented: "object-fit: cover" will have the video filling the area while "object-fit: contain" will have those black bars you seem to dread. We also support extracting the first image of a video to use as a placeholder, be it as a simple image or as a blurry preview.
For other video needs (long format, with sound, etc), there are already a ton a streaming solutions and a ton of highly customizable players. What we wanted to democratize was the use of videos in galleries, such as a list of products on an e-commerce website: we handle responsive designs flawlessly without iframes or 1MB of JavaScript. Your video is also delivered using the best codec for the browser in use, be it H264, VP9 or H265.
Hope this helps!
All clear, thanks for the comprehensive response Julian.
My only comment is that I would have preffered if your duration limit for videos was a bit longer than 30 seconds. I go up to 45 seconds for these type of autoplaying videos, certain things just benefit from that little bit longer play time.
The exact limit is 900 frames. So 30 seconds at 30fps, 37.5 at 24fps (what we recommend for the web).
Our limits on images have raised over time so I expect this limit to raise also in the future but we prefer to ensure stability for the time being.