Hay muchos tipos de medios que puedes usar para mejorar la experiencia de tu Flipbook. Sin embargo, hay algunas limitaciones que debes considerar ya que, aunque un archivo funcione, puede afectar la experiencia de los clientes si visitan tu Flipbook desde un celular o con una conexión a internet lenta.
📖 Este artículo explica:
¿Qué tan grande es demasiado grande? Límites generales de tamaño
Mejores prácticas para archivos de imagen
WebP vs PNG vs JPEG: Cuándo usar cada uno
Iconos para enriquecimientos de compra
Optimización de imágenes para iPaper
Cómo optimizar imágenes para la Vista Detallada del Producto
Mejores prácticas para archivos de video
GIF o Video: Cuándo usar cada uno
Herramientas de optimización
Capas en Flipbooks
1. ¿Qué tan grande es demasiado grande?
1. ¿Qué tan grande es demasiado grande?
Somos bastante flexibles con los tipos y tamaños de archivos que puedes subir a iPaper, pero hay algunas reglas básicas a considerar:
El tamaño máximo de un PDF que puedes subir a la Biblioteca de Medios es de 1 GB (1024 MB).
El tamaño máximo de un video (MP4) que puedes subir es de 250 MB.
El tamaño máximo de cualquier imagen que puedes subir es de 10 MB.
2. Mejores prácticas para archivos de imagen
2. Mejores prácticas para archivos de imagen
iPaper permite varios tipos de imágenes en tus Flipbooks:
JPG/JPEG: No deben superar los 500 KB para mejor rendimiento.
GIF: No deben superar los 3 MB para un rendimiento óptimo.
PNG: No deben superar 1 MB.
SVG: No deben superar los 50 KB.
WebP: No deben superar 1 MB.
Cada formato tiene sus pros y contras, y podrías estar usando imágenes preexistentes con formatos ya definidos. Cuando subes un Flipbook a iPaper, optimizamos automáticamente las imágenes dentro del PDF.
Sin embargo, las imágenes que subas manualmente a la Biblioteca de Medios no se optimizan automáticamente. Estas pueden incluir íconos para compras o imágenes para banners.
3. WebP vs PNG vs JPEG: Cuándo usar cada uno
3. WebP vs PNG vs JPEG: Cuándo usar cada uno
Si has trabajado con imágenes antes, seguramente conoces formatos como JPEG y PNG. Sin embargo, si buscas una experiencia rápida y optimizada en la web, considera usar WebP.
WebP es un formato creado por Google que permite compresión con pérdida y sin pérdida, con archivos más pequeños en comparación con JPEG y PNG.
✅ WebP tiene tamaños de archivo más pequeños en promedio
Google estima que WebP puede ser un 25-34% más pequeño que un JPG de calidad comparable y 26% más pequeño que un PNG cuando usa compresión sin pérdida.
✅ WebP soporta transparencia
Al igual que PNG, WebP permite fondos transparentes, pero con archivos hasta 3 veces más pequeños que los PNG.
✅ WebP soporta animación
WebP puede usarse para imágenes animadas como los GIFs, pero con tamaños de archivo mucho más pequeños.
¿Cuándo usar qué formato?
Si necesitas pequeño tamaño de archivo y transparencia, usa WebP.
Si necesitas compatibilidad máxima, usa JPEG o PNG.
Si la imagen es un ícono simple, usa SVG.
4. Iconos para enriquecimientos de compra
4. Iconos para enriquecimientos de compra
Los iconos para compras pueden hacer tu Flipbook más interactivo. Para la mejor experiencia:
Los íconos no deben superar 500 píxeles de alto o ancho.
Se recomienda subirlos en formato SVG o GIF:
SVG es ideal porque es un formato vectorial que mantiene calidad sin importar el tamaño y puede incluir animaciones. Lee nuestra guía para las mejores prácticas sobre el uso de SVGs como CTAs.
GIF es útil para animaciones simples pero no tiene los mismos beneficios que un SVG. Aquí puedes leer más sobre cómo usar los GIFs como CTAs.
5. Optimización de imágenes para iPaper
5. Optimización de imágenes para iPaper
Programas como Adobe Photoshop incluyen herramientas para optimizar imágenes para la web. Si no sabes cómo hacerlo, pero tienes nociones básicas de Photoshop, aquí tienes una guía que recomendamos para optimizar tus imágenes.
6. Cómo optimizar imágenes para la Vista Detallada del Producto
6. Cómo optimizar imágenes para la Vista Detallada del Producto
La vista detallada de producto es un tipo de enriquecimiento automático que permite mostrar productos con imágenes y texto dentro de tu configuración de tienda.
Para una carga rápida y sin pérdida de calidad, es recomendable usar archivos PNG.
El tamaño del archivo no debe superar 1 MB.
7. Mejores prácticas para archivos de video
7. Mejores prácticas para archivos de video
El video es una de las mejores formas de hacer un Flipbook más atractivo, pero hay algunas cosas que considerar:
iPaper solo soporta videos en formato MP4: este formato ofrece un buen tamaño de compresión sin comprometer la calidad del sonido o la imagen. Además, es un formato bastante universal, soportado por la mayor parte de los navegadores.
Tamaño recomendado: Mantén los archivos de video menores a 15 MB para que carguen rápido.
Herramienta recomendada: utiliza Adobe Media Encoder para comprimir videos sin perder calidad. Aquí tenemos una guía al respecto.
Considera tu audiencia y la forma en que exploran tu catálogo. Si tienes un video que se reproduce automáticamente, puede generar una experiencia muy elegante pero también a un mayor uso de datos por parte de tus usuarios.
Alojamiento del video: Si subes el video a iPaper, se reproducirá tal cual, sin optimización automática para diferentes relaciones de aspecto o plataformas. Por otro lado, si lo subes a YouTube o Vimeo, el video se optimiza según el navegador y la conexión del usuario, pero tendrá el reproductor y branding de la plataforma que elijas.
8. GIF o Video: Cuándo usar cada uno
8. GIF o Video: Cuándo usar cada uno
Puedes usar GIFs, WebP y archivos de video para crear experiencias inmersivas en tu Flipbook. Sin embargo, aunque puedan parecer similares, los GIFs y los videos son muy diferentes en la forma en que los dispositivos los procesan y cargan.
GIFs
El formato de archivo GIF ha existido casi tanto tiempo como el Internet y se crea y sube de manera similar a otros formatos de imagen, pero se comporta como un video porque admite animaciones. Es recommendable usarlo en:
Botones de llamado a la acción (CTA)
Iconos pequeños
Imágenes simples y pequeñas (dibujos de líneas, bordes de un solo color, animaciones sencillas)
Animaciones cortas
👍 Ventajas | 👎 Desventajas |
Soporta transparencias | Máximo 256 colores |
Compatible con todos los navegadores | Generalmente, archivos grandes |
No incluye una interfaz o controles extra | El archivo debe cargarse completamente antes de reproducirse |
| Es un formato antiguo e ineficiente |
Video
El video tiene varios formatos, pero iPaper solo admite MP4 y WebM.
MP4 es uno de los formatos de video más utilizados en Internet y admite streaming, lo que significa que el video no necesita descargarse completamente antes de reproducirse.
WebM es un formato de video creado por Google en 2010. Diseñado para la web, WebM es un estándar cada vez más común en HTML5, compatible con la mayoría de los navegadores modernos.
Considera usar un video:
En fondos de página completa
Cuando la calidad y el rango completo de colores son importantes
Animaciones o movimientos complejos
👍 Ventajas | 👎 Desventajas |
Compatible con todos los navegadores | MP4 no admite transparencia. |
Alta calidad de imagen | MP4 y WebM usan compresión con pérdida (se pierde calidad) |
Tamaño de archivo reducido en comparación con GIF | Se deben adaptar a resoluciones más bajas para dispositivos móviles |
Rango completo de colores | No se optimizan automáticamente antes de reproducirse (a menos que se usen desde una plataforma de streaming) |
El archivo se transmite en lugar de descargarse completamente antes de reproducirse | El códec puede afectar la compatibilidad en diferentes navegadores |
9. Herramientas de optimización
9. Herramientas de optimización
En iPaper, nos encantan las herramientas que pueden ayudarte a optimizar tus imágenes, vídeos, PDF y otros archivos multimedia. Y lo mejor, ¡todas éstas son gratuitas!
TinyWow → Optimiza imágenes, videos y PDFs gratis.
CompressJPEG → Reduce tamaño de imágenes sin perder calidad.
SVG Artista → Agrega animaciones a archivos SVG.
10. Capas en Flipbooks
10. Capas en Flipbooks
Tu Flipbook se compone de un PDF base más diferentes capas de contenido multimedia.
Si actualizas un archivo, reemplázalo en lugar de añadir una nueva capa, así puedes mantener el tamaño del Flipbook al mínimo y asegurar una carga rápida.
Estas son solo recomendaciones. Te animamos a probar qué funciona mejor para optimizar tu Flipbook. Si tienes dudas, puedes contactarnos a través del chat de la esquina y con gusto te ayudaremos. 😊
Convierte tu PDF en una experiencia interactiva de compras en línea
Entiende cómo esta y otras tácticas para Flipbooks pueden ayudarte a atraer e inspirar a tus clientes en nuestro Marco de Éxito.