Image Formats
Acerca de los formatos de imagen válidos y como utilizarlos
La importancia del formato
Al día de hoy existen decenas de formatos de imágenes, y la mayoría está diseñada con propósitos muy específicos y cada formato de imagen es único por sus propias razones, y cada uno afectará un e-commerce como el de Elektra de manera distinta.
Tomamos cuatro factores en cuenta para escoger formatos de imágenes para el e-commerce de Elektra con el objetivo de conseguir un buen balance entre calidad y rendimiento.
En general, los formatos de imágenes se diferencian entre sí de acuerdo a cuatro factores distintos:
Apariencia:
La calidad es clave y la definición con la que veamos la imagen, no queremos una imagen que parezca sacada de un celular del año 2000. Las imágenes deben ser lo suficientemente nítidas para apreciar todos los detalles y más importante aún si la imagen contiene texto de cualquier tamaño.
Rendimiento:
¿Cuánto espacio usa la imagen y cuánto es necesario?
Cuanto más grande sea la imagen, más tardará en cargarse y más lento será un sitio web. Las webs lentas pueden afectar, en todo, desde la tasa de rebote (que afecta al SEO) hasta la adquisición y retención de clientes y esto verse reflejado en la conversión de ventas.
Escalabilidad:
Los mejores formatos de imagen no perderán su calidad si se aumentan o se disminuyen, pero otros se vuelven granulados y pixelados, generando una percepción de mala calidad en el producto digital. Esto significa que algunos formatos de imágenes son más escalables que otros.
Compresión de imagen:
La capacidad que tiene un formato de imagen para comprimirse es muy importante, ya que permite reducir el tamaño de los archivos de forma rápida y sencilla afectando directamente el rendimiento de carga del producto digital
Tipos de imágenes utilizadas
Existen dos tipos principales de archivos de imágenes web que sugerimos utilizar como base en el e-commerce de Elektra: imágenes de mapa de bits e imágenes vectoriales.
Imágenes de mapa de bits
Las imágenes de mapa de bits o imágenes rasterizadas se encuentran comúnmente en fotografías y representan muchas de las imágenes que están en las redes sociales, así como en la mayoría de los sitios web de contenido.
Usan una serie de píxeles para crear una imagen, y esto significa que se “pixelarán” cuando se amplíen. Si haces Zoom en una imagen rasterizada, verás una malla de píxeles y la imagen se verá borrosa. Los formatos de archivo más comunes incluyen .jpg, .webp, .png, .gif Y .tiff.
Imágenes vectoriales
Los gráficos vectoriales son esenciales, ya que no pierden calidad ni se pixelean cuando se aumentan o se minimizan porque no está formada por píxeles sino por instrucciones que generan las líneas, colores y efectos. El formato editable más utilizado es él .ai y .eps, para uso final en productos digitales, apps y webs es él .svg.
Calidad de las imagenes
El mejor tipo de archivo de imagen para uso en web o alguna app será la que ofrezca la imagen más nítida con el tamaño de archivo más bajo.
Después de todo, los archivos más grandes implican webs o apps más lentas y, dado que la mayoría de los usuarios de una web quieren velocidades de carga de página rápidas, la prioridad debe de ser el rendimiento y el tiempo de carga de las imágenes en nuestro producto digital.
Aquí es donde entra en juego la calidad de la imagen.
La calidad de la imagen se ve afectada por un proceso mediante el cual se codifican las imágenes para reducir su tamaño. Hay dos formas principales de hacerlo: sin pérdida de calidad y con pérdida de calidad.
Una imagen con pérdida de calidad (como .jpge) elimina datos de la imagen para reducir su tamaño, este proceso es irreversible, lo que significa que los datos no se pueden recuperar de la imagen comprimida y puede eliminar nitidez, por lo que hay que tener bastante cuidado al ir realizando compresiones en este formato, ya que la calidad puede bajar demasiado.
Las imágenes sin pérdida de calidad (como .png y .gif) solo elimina los datos no esenciales, como resultado, la calidad de la imagen no se reduce, pero la compresión no es tan significativa y contaremos con imágenes de mayor peso. Sacrificamos peso por una mayor calidad.
Formatos válidos
Los siguientes formatos de archivo son los más utilizados para imágenes en el e-commerce de Elektra y los sugeridos para mantener un rendimiento óptimo en la carga de las imágenes:
JPG:
Lanzado en 1992, .jpg son las siglas de Joint Photographic Experts Group y es un método de compresión con pérdida. Es considerado como uno de los mejores formatos de imagen para páginas web, es compatible con todos los navegadores, incluidos Chrome, IE, Firefox y Safari, sitios web y redes sociales. El formato .jpg mantiene el tamaño del archivo bajo sin afectar en gran medida la calidad de la imagen.
Se sugiere el uso de este formato en:
Home Slider
CTA Banners
Offer Cards
Category Cards
WebP
El formato .webp combina las ventajas del .jpg y el .png Es uno de los formatos de imágenes más interesantes de esta lista porque fue creado específicamente para ser utilizado en la web.
Utiliza compresión con pérdida y puede producir imágenes que son más pequeñas que las .jpg sin poner en riesgo la calidad. La mayoría de los navegadores son compatibles con .webp, incluidos Chrome, Firefox, Edge, Safari y Opera, y es conocido por su potencial en el web.
El formato .webp puede comprimir imágenes con pérdida y sin pérdida. En el caso de imágenes comprimidas sin pérdida, el tamaño es 26% menor a los .png, mientras que las imágenes comprimidas con pérdida son 25-34% más pequeñas que las imágenes .jpg.
.webp es un formato de imagen Open Source desarrollado por Google en el 2010, aunque aún no es tan popular como otros formatos de imágenes.
Se sugiere el uso de este formato en:
Product Card & Product Gallery
SVG
El formato .svg (Scalable Vector Graphics) fue creado por el World Wide Web Consortium (W3C) en 2001. Utiliza el tipo de archivo de imagen de gráficos vectoriales, lo que significa que se puede aumentar o disminuir sin perder calidad.
Todos los navegadores principales admiten este tipo de imagen (incluidos de forma total o parcial Chrome, IE, Firefox y Safari) y se utiliza sobre todo para logotipos, iconos, elementos UI e ilustraciones digitales.
Lo mejor es que el tamaño de los archivos .svg son aún más pequeños que los .jpg y .png cuándo la imagen es sencilla, como un logo o un ícono.
Naturalmente, este formato no es utilizable en el caso de fotografías para la web.
Se sugiere el uso de este formato en:
UI Elements
Illustrations
PNG
Este es un formato de archivo que admite la compresión de datos sin pérdidas en la calidad de la imagen.
Son las siglas de Portable Network Graphics y se desarrollo como reemplazo de GIF, ya que pueden incluir más de 16 millones de colores y se pueden generar imágenes con transparencias.
El formato .png fue creado por PNG Development Group en 1996. Es ideal para iconos y logotipos y es compatible con todos los navegadores, con la excepción de las versiones anteriores de IE.
Sugerencia de uso: Utilizar únicamente en casos o imágenes que por alguna razón no puedan manejarse en formato .jpg o .svg.
Formato de Imágenes en Vtex:
Las tiendas VTEX cuentan con compresión automática de imágenes para .webp. Esta característica posibilita una reducción de hasta un 25% en el peso del sitio.
El formato, desarrollado por Google, es más eficiente que el .jpg o el .png, sin necesariamente reducir la calidad de las imágenes. Genera fácilmente una ganancia de 1 o 2 segundos en el tiempo de carga de las páginas (variando según el layout).
Tanto la reducción en la velocidad como el uso del formato resultan también en mejor rankeamiento orgánico por Google. Los archivos se almacenan en su formato original, pero se convierten en tiempo real cuando se solicitan al servidor por navegadores compatibles.
Google Chrome es el principal navegador en este escenario: actualmente se utiliza en el 70% de los accesos a VTEX, y ya es compatible con la .webp.
Los navegadores que aún no son compatibles con el formato, como Firefox, y servicios como integraciones y marketplaces, reciben la imagen no convertida. Actualmente, el GIF no pasa por esa conversión.
Esta función en conjunto con el proceso Lazy Loading con el que cuenta la plataforma se conjuntan y nos permiten manejar imágenes de mayor tamaño sin perder calidad en la compresión ni un aumento sustancial de carga.
Fuente: VTEX Help
Prácticas recomendadas
Teniendo en cuenta este importante punto acerca del comportamiento del formato .webp en Vtex, se sugieren los siguientes puntos como buenas prácticas:
· Subir imágenes con fotos y/o textos en JPG con compresión especial para Web en alta calidad, la plataforma las convertirá automáticamente a .webp y aplicará la compresión para mejorar el rendimiento.
· Diseñar y guardar las imágenes principales como banners y similares con un aumento de al menos 1.5x de escala, esta se ajustará automáticamente al contenido del layout y se obtendrá una mejora significante en la definición y visualización de fotografías y texto.
· Utilizar, en lo posible, imágenes en formato .svg para garantizar la mejor calidad y menor peso en logotipos, elementos UI, iconos e ilustraciones.
· Evitar el uso de .gif para iconos o animaciones, en caso de requerir animaciones sencillas optar por la opción del .svg animado que despliega la máxima calidad y un peso muy ligero.
· Evitar el uso de imágenes en .png a menos que por alguna razón no se pueda utilizar .jpg o .svg.
Formato de imágenes en Apps
A lo largo de los años de desarrollo de aplicaciones (tanto en plataformas iOS como Android), ha existido el mismo problema, ¿qué formato debo utilizar, cuál sería el formato óptimo para este sistema operativo (Android o iOS), esa versión del sistema operativo, y el hardware que el dispositivo tiene, puede ejecutar lo que estoy construyendo en cuanto a rendimiento?
La mayor parte del tráfico de descargas consiste en imágenes. Por eso, cuanto más pequeñas sean las imágenes descargables, mejor será la experiencia de red que ofrezca tu aplicación a los usuarios.
Tanto por razones funcionales como estéticas, las imágenes son un elemento omnipresente en las interfaces de usuario de las aplicaciones. Pueden ser un factor diferenciador clave para las aplicaciones.
Muchas de las imágenes que utilizan las aplicaciones, incluidas las imágenes de inicio y los iconos, se almacenan como archivos en el paquete principal de la aplicación. Puedes tener imágenes de inicio e iconos específicos para cada tipo de dispositivo y optimizados para pantallas de alta resolución.
Densidad de pixel
Para empezar, sabemos que un pixel es un punto que emite un único color o escala de grises en una pantalla. Es obvio que cuanto mayor sea el número de pixels, más detalle y nitidez tendrá la imagen que estemos viendo, aquí es donde entra en juego la densidad de pixel.
Las pantallas se miden en pulgadas (1 pulgada = 2,54 centímetros), y cuando damos la medida de una pantalla, lo hacemos tomando como referencia su diagonal, cuando nos dicen que una pantalla es de 25 pulgadas, nos están diciendo que su diagonal mide 25 pulgadas, es decir, 25×2,54 cm
La densidad de píxeles es la cantidad de pixels que hay en una pulgada de una pantalla. Cuanto mayor sea este número, más nítida será la imagen y con más detalle. Esta cantidad de pixels que hay en una pulgada, se mide en pixels por pulgada, ppp o en ppi (pixels per inch) o dpi (Dots per Inch). Con lo cual una pantalla de alta densidad será aquella que más ppp tenga, esto significa que si hablamos de tamaños, cuando hacemos un botón, por ejemplo de 100x60px, se verá más grande en una pantalla de baja densidad que en una de alta densidad.
Para calcular la densidad de una pantalla; densidad de pantalla = anchura de la pantalla en pixels / anchura de la pantalla en pulgadas
Android
Las aplicaciones Android suelen utilizar imágenes que están en uno o más de los siguientes formatos de archivo: AVIF, PNG, JPG y WebP. Para cada uno de estos formatos, hay pasos que puede seguir para reducir el tamaño de las imágenes.
- Android 4.2.1- – El formato de imagen recomendado para la versión anterior de Android es PNG
- Android 4.2.1 (API nivel 17)+ – Se añadió soporte para webp.
- Android 12+ – Se añadió soporte para AVIF en Android 12+.
JPG
Si utilizas imágenes JPG, puedes hacer pequeños cambios que te permitirán reducir considerablemente el tamaño de los archivos. Por ejemplo
- Reducir el tamaño del archivo mediante distintos métodos de codificación (sin afectar a la calidad).
- Ajustar ligeramente la calidad para mejorar la compresión.
Estas estrategias pueden reducir el tamaño de los archivos hasta un 25%. A la hora de elegir las herramientas, recuerda que las herramientas de exportación de fotos pueden insertar metadatos innecesarios, como información GPS, en tus imágenes. Como mínimo, intenta aprovechar las herramientas existentes para eliminar esta información de tus archivos.
WebP
WebP es un formato de imagen más reciente compatible con Android 4.2.1. Este formato proporciona una compresión con y sin pérdidas superior para imágenes en la web. Usando WebP, los desarrolladores pueden crear imágenes más pequeñas y ricas. Los archivos de imagen sin pérdida WebP son, de media, un 26% más pequeños que los PNG. Estos archivos de imagen también admiten transparencia (también conocida como canal alfa) a un coste de solo un 22% más de bytes.
Las imágenes WebP son un 25-34% más pequeñas que las imágenes JPG con índices de calidad SSIM (Structural Similarity Index) equivalentes. En los casos en que la compresión RGB es aceptable, WebP también admite la transparencia y suele producir archivos 3 veces más pequeños que PNG.
Diferentes formatos de imagen son adecuados para diferentes tipos de imágenes. JPG y PNG tienen procesos de compresión muy diferentes, y producen resultados bastante distintos.
WebP vs PNG
Este formato proporciona una compresión sin pérdida y con pérdida superior para las imágenes. Con webp, los desarrolladores pueden crear imágenes más pequeñas y ricas. Los archivos de imagen sin pérdida webp son un 26% más pequeños que PNG. Estos archivos de imagen también admiten transparencia (también conocida como canal alfa) a un costo de solo un 22% más de bytes.
WebP, como formato, admite los modos con y sin pérdidas, lo que lo convierte en un sustituto ideal de PNG y JPG. Lo único que hay que tener en cuenta es que solo tiene soporte nativo en dispositivos con Android 4.2.1 (nivel API 17) y superior. Afortunadamente, la mayoría de los dispositivos cumplen ese requisito.
Imagen tipo Webp sin pérdida.
Imagen tipo PNG sin pérdida.
WebP vs JPEG
Vemos que el tamaño medio de los archivos WebP es entre un 25% y un 34% menor en comparación con los archivos JPEG, allí los resultados del estudio indican que WebP puede proporcionar mejoras significativas de compresión con respecto a JPEG.
Antecedentes
AVIF es un formato contenedor para imágenes y secuencias de imágenes codificadas con AV1. AVIF aprovecha el contenido codificado intracuadro de la compresión de vídeo. Esto mejora drásticamente la calidad de la imagen para el mismo tamaño de archivo en comparación con formatos de imagen más antiguos, como JPEG o PNG.
AVIF frente a PNG
Como formato de compresión sin pérdidas, las imágenes PNG son conocidas por su gran tamaño. AVIF admite tanto la compresión con pérdida como la compresión sin pérdida. Es esta versatilidad que da AVIF, una ventaja cuando se trata de tamaño de archivo.
Decodificar un PNG es instantáneo, gracias a la falta de complejidad, AVIF tiende a ser más complejo, por lo tanto, los sistemas más lentos pueden luchar un poco más para decodificar la imagen.
Actualmente, PNG sigue siendo el mejor formato para la compresión sin pérdidas, con tamaños de archivo reducidos y mayor compatibilidad con plataformas. AVIF es una excelente alternativa si está dispuesto a recurrir a la compresión con pérdida para reducir el tamaño del archivo, pero conlleva una complejidad que las plataformas más antiguas con hardware antiguo pueden encontrar difícil de renderizar.
AVIF – Tamaño de archivo: 61KB
PNG – Tamaño de archivo: 635KB
AVIF vs JPEG
Hoy en día, JPEG sufre en términos de calidad de compresión. De hecho, incluso el más moderno JPEG 2000 puede ofrecer una mejor compresión global. Por otro lado, AVIF tiende a ofrecer algunos de los mejores resultados que podemos conseguir con imágenes con pérdidas, no fotográficas.
Si se trata de una imagen de baja fidelidad, AVIF ofrece mejores resultados que JPEG. Pero AVIF también tiene sus contras, la imagen AVIF no admite el renderizado progresivo, por lo que los archivos deben descargarse por completo antes de poder visualizarse.
Comparación de velocidad
JPEG está obsoleto y fue escrito antes de la invención de los chips de CPU multinucleo. No está diseñado para trabajar con un proceso secuencial donde hay múltiples núcleos.
AVIF puede trabajar en paralelo con múltiples núcleos, lo que lo convierte en una forma más adecuada de compresión de imágenes.
Animación
JPEG es un formato de imagen. Esto significa que fue diseñado para mostrar imágenes fijas. AVIF se basa en un codec de vídeo real y proporciona capacidad de animación, lo que significa que puede soportar animaciones y JPEG no.
En general
Aunque JPEG 2000 supuso una mejora sustancial con respecto al formato JPEG original, no puede competir con AVIF en muchos aspectos:
AVIF se ha convertido en la opción ideal para quienes necesitan gestionar la codificación en un entorno con poco ancho de banda, y aunque JPEG admite el renderizado progresivo, carece de muchas de las funciones que ofrece AVIF.
JPG – Tamaño de archivo: 74.4 KB
AVIF – Tamaño de archivo: 18.2 KB
Algunos dispositivos con hardware lento/antiguo podrían ser capaces de obtener AVIF o webp basándose en su versión de Android, pero su hardware podría fallar a la hora de renderizar esos formatos (debido a poca memoria) o podría tardar mucho tiempo (debido a un procesador gráfico lento).
Al igual que en iOS, el formato óptimo para Android no solo puede determinarse en función de la versión de Android, sino que también hay que tener en cuenta el dispositivo Android.
iOS
Desde iOS 11, Apple ha introducido un nuevo formato de fotos para iPhone, el formato HEIC. Es más eficiente cuando se trata de tamaño de archivo, manteniendo la misma calidad de imagen en comparación con JPG. Antes de iOS 11 el formato de imagen recomendado era PNG.
HEIC vs PNG
El nuevo formato de archivo HEIC almacena imágenes con tamaños de archivo más pequeños si los comparamos con el formato de archivo de imagen común, es decir, PNG.
Aunque el tamaño de la imagen HEIC es menor que el del archivo de imagen PNG, la calidad de la imagen es similar a la del formato PNG.
En comparación con el archivo PNG, el archivo HEIC es mucho más flexible, ya que puede almacenar una sola imagen o una secuencia de imágenes. Mientras que, por otro lado, el archivo PNG sólo puede contener una imagen.
Además, el archivo HEIC contiene una imagen junto con sus metadatos.
HEIC SEQUENCE
HEIC vs JPEG
Compresión
HEIC ofrece un método de compresión mucho más eficaz y moderno que el antiguo formato JPEG. Divide las imágenes en archivos mucho más pequeños sin afectar a la calidad.
Espacio de almacenamiento
La mayoría de los archivos HEIC ocupan mucho menos espacio que los JPEG en un ordenador, tableta o smartphone. Su innovador proceso de compresión significa que HEIC puede utilizar tan sólo la mitad de espacio que ocuparía un archivo JPEG.
Calidad de imagen
Cuando se trata tanto de compresión como de calidad de imagen, los archivos HEIC ganan a los JPEG. El formato puede mejorar la calidad de las fotos gracias a sus capacidades de transparencia y rango dinámico más amplio.
Compatibilidad
Mientras que JPEG tiene una compatibilidad casi universal, los archivos HEIC no. El HEIC se ha generalizado en los últimos años, pero su uso principal es en dispositivos Apple. Puede que incluso tengas que convertir tus archivos HEIC a JPEG al transferir fotos de un iPhone a un PC.
Transparencia
HEIC admite la transparencia de imágenes de forma similar a los archivos PNG, en cambio, el formato JPEG no admite la transparencia.
Pero ahí no acaba la cosa, en dispositivos antiguos que aún soportan iOS 11 (iPhone 6 por ejemplo) HEIC podría seguir funcionando pero debido a la lentitud del hardware, podría tardar mucho tiempo en renderizar una imagen en formato HEIC.
Esto significa que la versión de iOS no es el único parámetro para determinar el formato de imagen, también debe venir del propio dispositivo.
HEIC – Tamaño de archivo: 256 KB
JPEG – Tamaño de archivo: 670 KB
También puedes consultar
Accesibility
Branding
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
