Sempre fui fascinado por formatos de mídia e pela conversão de imagens e vídeos de um formato para outro. A conversão de mídia nos permite reproduzir vídeos em dispositivos ou aplicativos com requisitos de mídia exigentes e carregar formatos otimizados para aumentar a velocidade de download. Eu escrevi vários posts relacionados à mídia compartilhando como realizar todos os tipos de conversões de mídia usando ImageMagick, ffmpeg, gifsiclee outros, mas todos eles dependem da disponibilidade de ferramentas de conversão de mídia no computador host, do conhecimento dos melhores sinalizadores de configuração e do tempo para fazer o trabalho.
Durante meu tempo de uso do Cloudinaryfiquei impressionado com sua capacidade de realizar conversões de formatos de mídia com facilidade. Quer se trate de vídeo, áudio ou imagem, o Cloudinary tornou sua API fácil de usar e tão útil que a otimização e o fornecimento de mídia convertida para os seus usuários é uma reflexão tardia. Vamos ver como o senhor pode usar o Cloudinary para fornecer mídia otimizada ao cliente!
Modificação simples da extensão de arquivo
A maneira mais fácil de converter formatos de mídia com o Cloudinary é simplesmente alterando a extensão do arquivo. Supondo que eu tenha feito o upload de jack-bike.jpg, posso facilmente servir um formato diferente:
<!-- Load the original format --> <img src="https://res.cloudinary.com/david-wash-blog/image/upload/jack-bike.jpg"> <!-- Let's load a WEBP instead! --> <img src="https://davidwalsh.name/.../image/upload/jack-bike.webp">
O mesmo pode ser feito para arquivos de vídeo e áudio:
<!-- Load the original format --> <video src="https://res.cloudinary.com/david-wash-blog/video/upload/jack-wind.mp4"></video> <!-- Let's load a WEBM instead! --> <video src="https://davidwalsh.name/.../video/upload/jack-wind.webm"></video>
Como o Cloudinary oferece bibliotecas auxiliares em uma dúzia de linguagens do lado do servidor, o senhor também pode usá-las para gerar o HTML da imagem:
// Node.js - convert JPG to PNG
cloudinary.image('jack-wind', { format: 'png' });
// PHP - convert JPG to PNG
cl_image_tag('jack-wind', array('format' => 'png'));
# Python - convert JPG to PNG
cloudinary.CloudinaryImage('jack-wind').image( format="png")
A conversão de vídeo é especialmente útil ao fornecer várias fontes das quais o navegador ou o dispositivo pode escolher:
<!-- Cloudinary can create your video poster image too! -->
<video width="640" controls
poster="https://res.cloudinary.com/david-wash-blog/video/upload/jack-wind.jpg">
<source
src="https://davidwalsh.name/.../video/upload/jack-wind.webm"
type="video/webm">
<source
src=".../video/upload/jack-wind.mp4"
type="video/mp4">
<source
src=".../video/upload/jack-wind.ogv"
type="video/ogg">
</video>
E da mesma forma com a imagem srcset:
<img srcset="https://davidwalsh.name/.../image/upload/jack-bike.jpg 320w,
https://davidwalsh.name/.../image/upload/jack-bike.jpg 480w,
https://davidwalsh.name/.../image/upload/jack-bike.png 800w"
src="https://davidwalsh.name/.../image/upload/jack-bike.png">
É possível até mesmo trabalhar entre tipos de mídia, como carregar um GIF animado, mas renderizá-lo como MP4, como a maioria dos sites de mídia social faz:
<!-- Convert an animated GIF "jack-animated" to MP4! --> <video src="https://davidwalsh.name/.../video/upload/jack-animated.mp4"></video>
A modificação simples da extensão do arquivo também facilita o carregamento lento de imagens com base nos recursos do cliente; por exemplo, detectar suporte a WEBP ou fallback:
// Detect WEBP support
async function supportsWebp() {
if (!self.createImageBitmap) return false;
const webpData="data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
const blob = await fetch(webpData).then(r => r.blob());
return createImageBitmap(blob).then(() => true, () => false);
}
// Lazy load image formats based on WEBP support
(async () => {
if(await supportsWebp()) {
myImage.src="https://davidwalsh.name/.../image/upload/jack-bike.webp";
}
else { // No WEBP support, fallback to original
myImage.src="https://davidwalsh.name/.../image/upload/jack-bike.png";
}
})();
E o senhor sabia que também pode detectar os tipos de vídeo que o navegador pode reproduzir?
function supportsVideoType(type) {
let video;
// Allow user to create shortcuts, i.e. just "webm"
let formats = {
ogg: 'video/ogg; codecs="theora"',
h264: 'video/mp4; codecs="avc1.42E01E"',
webm: 'video/webm; codecs="vp8, vorbis"',
vp9: 'video/webm; codecs="vp9"',
hls: 'application/x-mpegURL; codecs="avc1.42E01E"'
};
if(!video) {
video = document.createElement('video')
}
return video.canPlayType(formats[type] || type);
}
// Usage
if(supportsVideoType('webm') === "probably") {
myVideo.src="https://davidwalsh.name/.../video/upload/jack-animated.webm";
}
else {
myVideo.src="https://davidwalsh.name/.../video/upload/jack-animated.mp4";
}
E não se esqueça de que a troca de formato é apenas uma única operação – o senhor pode transformar sua mídia ao mesmo tempo:
<!-- Modify the image size on the fly! --> <img src="https://davidwalsh.name/.../image/upload/w_300,h_300/jack-bike.jpg"> <!-- Video too! --> <video src=".../image/upload/w_300,h_300/jack-wind.mp4"></video>
Com a troca de alguns caracteres, o senhor pode otimizar o tempo de carregamento de todas as suas mídias! O Cloudinary é compatível com tipos de mídia de ponta, como webm, webp e outros, para que o senhor possa realmente ser agressivo com o desempenho da sua mídia!
Comece a usar o Cloudinary gratuitamente
Cloudinary tem um nível gratuito para que o senhor possa começar a experimentar a capacidade de transformar e converter sua mídia conforme necessário. Eles acabaram de anunciaram uma grande atualização para a camada gratuita portanto, há mais um motivo para dar uma chance a eles sem nenhum custo. Há muitas coisas que o senhor pode fazer com o Cloudinary; aqui estão algumas das minhas experiências anteriores:
O senhor pode instalar todo o software de conversão e manipulação de imagens que desejar, escrever quantos conectores e pontos de extremidade puder imaginar, mas nada é tão fácil quanto usar a API simples e bem documentada do Cloudinary para transformar, converter, personalizar e fornecer mídia otimizada.
