3 Alternativas a Gif lógica | Posicionamiento

Compartir en: Share on FacebookTweet about this on TwitterShare on LinkedIn

GIF son uno de los formatos de imagen más antiguas en la web.

El Formato de intercambio de gráficos fue introducido por primera vez en 1987, y los avances en la tecnología de navegación en los años intermedios han reducido el número de escenarios en los que el formato GIF es la imagen más adecuada. En general, los gráficos animados son uno de los pocos bastiones del formato, lo cual es irónico, porque no es algo que el formato ha sido diseñado para:

El formato de intercambio de gráficos no está pensado como una plataforma para la animación, incluso si se puede hacer de una manera limitada.

En este artículo, vamos a explorar tres maneras la web moderna nos mejor animación puede ofrecer.

1. El video HTML5

La especificación de HTML 5 permite la adición de contenido de vídeo a las páginas casi tan fácil como la adición de imágenes, la mano Larguero paso a paso la necesidad de plugins especiales o de marcas originales. Soporte para los formatos de vídeo más modernas significa que para el bucle de clips estilo BuzzFeed, un vídeo de HTML5 a menudo puede proporcionar una solución más ligero que un GIF. Además, evitamos el límite duro de 256 colores aplicados por el anterior relación de aspecto.

A continuación, me presentó una animación cortesía glittering.blue planeta Tierra. A la izquierda es un GIF animado, y la de la derecha es un vídeo de HTML5. No me molesté para sincronizar las animaciones. no hay nadie tiene tiempo para DAT.

Ver alternativa de la pluma de GIF animados 1/3 -. HTML5 de vídeo por Tom Bennet (@tombennet) en CodePen

soporte de los navegadores para la tecnología de vídeo de arriba es de aproximadamente 90%. Los conflictos en torno a los contenedores y codecs que se prolongaron existen varias normas años se han apagado, y el vídeo H.264 codificada almacenada en un contenedor MP4 se ha convertido en el formato dominante. Dicho esto, incluyendo la liberación WebM en un documento aparte Fuente Declaración para una cobertura máxima del navegador no es una mala idea.

Curiosamente :. Esta es la misma técnica que se utiliza para alimentar su tamaño Imgur GIFV – todos los archivos GIF cargado al sitio se convierten automáticamente a MP4 y WebM

Recursos

2. CSS puro

GIF también se utilizan comúnmente para elementos de la interfaz de usuario animados y otras campanas y silbidos, especialmente en sitios de mayor edad. En situaciones en las que el elemento de animación se compone de líneas y formas simples (a diferencia, por ejemplo, una fotografía), gráficos vectoriales, tales como SVG o CSS puro es a menudo una solución mucho mejor que un formato raster como GIF o PNG.

carga spinner Verou Lea es un buen ejemplo:

Ver Pen alternativa a los archivos GIF 2/3 -. SVG Tom Bennet (@tombennet) en CodePen

formas y efectos con CSS puro que crea significa que son independiente de la resolución – a diferencia de los GIF, que puede ser infinitamente mayor escalar y siempre será clara y nítida. También son muy poderosos, y es posible crear imágenes muy complejas utilizando sólo los elementos de estilo HTML.

Es interesante observar que, aunque las animaciones de fotogramas clave CSS3 tienen un gran nivel de soporte de los navegadores (aproximadamente 90%), sino que también puede ser difícil crear escala, ya que por defecto se que carecen de los controles que podrían ayudar en la depuración de problemas con la animación.

Recursos

3. Sprites

A diferencia de las dos técnicas anteriores, los sprites son poco poco de un truco. En su defensa, sin embargo, los sprites son un truco muy viejo, que de alguna manera es preferible cortar newfangled faddish.

Un spritesheet es esencialmente una imagen gigante con cada fotograma de la secuencia de animación. De aplicar la imagen como Imagen de fondo a un elemento de la página, a continuación, utilizar los pasos () de CSS3 función de tiempo de animación de fotogramas clave para la navegación imágenes.

Ver Pen alternativa a los archivos GIF 3/3 -. Sprites Tom Bennet (@tombennet) en CodePen

El caso de la utilización de esta técnica son algo limitadas – se adapta bien a las actividades para las que SVG no es un buen ajuste (por ejemplo, el arte del pixel) y requieren transparencia o un extremadamente alto grado de control (no incluye vídeo). Google ha usado la animación de sprites en muchas de sus garabatos.

Además de ser ligero, animaciones spritesheet ofrecen un mayor nivel de control de un GIF, ya que pueden ser manejados en gran medida con CSS y JavaScript. Si usted está interesado en sprites, escribí un tutorial para construir el sprite reactiva complejo de entretenimiento utilizando GreenSock para SitePoint.com.

Recursos

Advertencia

se aplican

Todas las habituales reservas – estas no son las comparaciones científicas, simplemente manifestaciones de principios clave. Tu caso es distinto. También hay decenas de razones por las que la integración de estas técnicas en su flujo de trabajo puede ser difícil docenas. Aún así, la conciencia las posibilidades que ofrece la web moderno nunca es una mala cosa.

Gracias por leer!

Builtvisible son un equipo de especialistas que disfrutan de la investigación, la creación de contenido SEO y marketing que comunica las ideas y construye marcas.

Deja un comentario