Uso de imágenes en Align

Enlaces destacados

1. Documentación de Shopify sobre imágenes
2. Documentación de Shopify sobre cómo añadir fotos de stock gratuitas a su tema
3. Documentación de Shopify sobre cómo cargar imágenes
4. Documentación de Shopify sobre cómo corregir los colores de las imágenes cargadas
5. Fotos de stock gratuitas de Burst
6. Licencia de atribución de Burst
7. Editor de temas de Shopify
8. Documentación de Shopify sobre los ajustes de medios del tema
9. Documentación de Shopify sobre la relación de aspecto de las imágenes
10. Página Files de Shopify

Videos útiles

Vídeo de Learn With Shopify: Cómo diseñar una tienda de comercio electrónico que venda: estrategias probadas y prácticas recomendadas

Vídeo de Learn With Shopify: Cómo diseñar una tienda de comercio electrónico que venda: estrategias probadas y prácticas recomendadas

Vídeo de Shopify Academy: Personalizar su tienda

Vídeo de Shopify Academy: Personalizar su tienda

Utilice imágenes de alta calidad que respalden su marca y se mantengan nítidas en distintos tamaños de pantalla. Esta guía explica cómo encontrar o cargar imágenes para su tema Company XYZ Align, elegir formatos adecuados, establecer puntos focales y preparar banners y presentaciones para diseños adaptables.

Recursos relacionados

1. Orientación sobre imágenes
2. Fotos de stock gratuitas de Burst
3. Orientación sobre imágenes de temas
4. Corregir los colores de las imágenes

Añadir fotos de stock gratuitas

Burst ofrece fotografías de stock gratuitas y de alta resolución en una amplia variedad de categorías. Puede explorar sus imágenes desde el editor de temas de Shopify y utilizarlas en áreas de su tienda Align que admitan imágenes, como presentaciones, entradas de blog y páginas de productos.

Las imágenes de Burst están disponibles con una licencia libre de regalías, por lo que puede utilizarlas y editarlas según sea necesario. Se recomienda la atribución, pero no es obligatoria.

Añadir una foto de stock

1. Abra el editor de temas
2. Seleccione la sección que contiene el selector de imágenes que desea actualizar.
3. Seleccione Explore free images.
4. Busque una imagen o explore una categoría.
5. Seleccione una imagen para previsualizarla en Align y, a continuación, seleccione Select.
6. Ajuste la apariencia de la imagen o los ajustes de animación en la barra lateral, si están disponibles.
7. Seleccione Save.

Cargar imágenes

Utilice imágenes para logotipos, productos, presentaciones, banners y entradas de blog. Puede recortar y cambiar el tamaño de las imágenes, y personalizar los ajustes de medios de su tema para aplicar un borde o una sombra uniformes a los medios de toda su tienda.

Elija una relación de aspecto de imagen adecuada para que cada imagen encaje en el diseño de Align previsto.

Consejo

Cargue la imagen de mayor calidad que tenga. No es necesario comprimir manualmente las imágenes antes de cargarlas.

Cargar una imagen en el editor de temas

Puede cargar imágenes en el editor de temas o desde la página Files. Para obtener orientación sobre la gestión de archivos, consulte Cargar archivos en su sitio web

1. Desde el panel de control de Shopify, vaya a Online Store > Themes

2. Seleccione Customize junto a Align o junto a la copia del tema Align que desea editar.

3. Utilice el menú de plantillas para elegir la página o plantilla que desea actualizar.

4. En la barra lateral del editor de temas, seleccione la sección o el bloque que contiene la imagen.

5. Seleccione Select Image.

   • Para cargar una imagen desde su ordenador, seleccione Upload.
   • Para elegir una foto de stock gratuita de Burst, seleccione Explore free images.

6. Seleccione una imagen para previsualizarla y, a continuación, seleccione Select.

7. Seleccione Save.

Añadir una imagen desde un metacampo

Si tiene metacampos para imágenes, utilice el selector de fuentes dinámicas para conectar una imagen a un ajuste del tema. Para consultar los formatos de imagen admitidos y obtener más información, consulte Tipos y valores de contenido de metacampos

Usar banners de imagen

Los banners de imagen pueden combinar una o dos imágenes con texto y un botón de acción. En las pantallas de escritorio, las dos imágenes del banner aparecen una junto a la otra; en pantallas más pequeñas, este diseño puede ser difícil de visualizar.

Cuando utilice dos imágenes, active Stack images on mobile en los ajustes del tema de Image banner. Para obtener orientación adicional, consulte banners de imagen, presentaciones y Prácticas recomendadas para presentaciones y banners de imagen

Establecer un punto focal de imagen

Un punto focal marca el área más importante de una imagen. Ayuda a mantener esa área dentro del encuadre cuando Align recorta una imagen para distintos diseños y tamaños de pantalla.

Cada imagen puede tener un punto focal, que puede cambiar o eliminar en cualquier momento. Un punto focal establecido en una imagen se aplica en todos los lugares donde se utiliza esa misma imagen.

Los puntos focales solo están disponibles para imágenes del tema, no para imágenes de productos, blogs o colecciones.

Añadir un punto focal

Puede añadir un punto focal desde Files o directamente en el editor de temas.

1. En el editor de temas, seleccione una sección o un bloque con una imagen.
2. Seleccione Edit en la imagen.
3. Seleccione Add focal point.
4. Arrastre el círculo azul o seleccione el área que debe permanecer visible.
5. Seleccione Done.

Para mover el punto focal más adelante, vuelva a abrir la imagen y seleccione una nueva área.

Eliminar un punto focal

1. En el editor de temas, seleccione una sección o un bloque con una imagen.
2. Seleccione Edit en la imagen.
3. Seleccione Remove focal point.
4. Seleccione Done.

Nota

Según cómo Align recorte y cambie el tamaño de una imagen, es posible que su punto focal no aparezca visualmente centrado.

Elegir un formato de imagen

Los formatos de imagen admitidos incluyen:

• JPEG
• JPEG progresivo
• PNG
• GIF
• HEIC
• WebP

El formato compatible más adecuado se selecciona automáticamente para el navegador de cada visitante. Obtenga más información sobre las capacidades de transformación de imágenes

Usar JPEG para fotografías

JPEG es adecuado para fotografías y otras imágenes fijas con colores complejos. Su compresión con pérdida puede reducir el tamaño del archivo manteniendo una buena calidad visual.

Utilice JPEG para:

• Productos
• Banners y presentaciones
• Páginas y entradas de blog

Usar PNG para gráficos

PNG funciona bien para gráficos e iconos con colores planos, especialmente cuando necesita transparencia.

Utilice PNG para:

• Logotipos
• Iconos
• Bordes y adornos

Comprender la optimización automática y los límites de carga

Shopify comprime automáticamente las imágenes para acelerar la carga y elige el formato de entrega más adecuado para cada navegador. Por ejemplo, los navegadores compatibles pueden recibir formatos modernos como WebP o AVIF; los GIF se convierten en WebP animado para reducir el tamaño del archivo.

Una imagen cargada no puede superar ninguno de estos límites:

1. 25 megapíxeles
2. 20 megabytes

Calcule los megapíxeles con (pixel width x pixel height)/1,000,000. Por ejemplo, una imagen de 4900 × 6930 tiene 33.9 MP: (4900x6930)/1,000,000 = 33.9 MP.

Nota

Las imágenes de productos tienen límites de carga de imágenes y tamaño de archivo diferentes.

Gestionar perfiles de color

Los colores pueden verse diferentes después de cargar una imagen cuando esta incluye un perfil de color .ICC o .ICM. Shopify elimina estos perfiles para que las imágenes se muestren de forma más uniforme en distintos dispositivos y navegadores y para evitar tamaños de archivo mayores.

Cuando una imagen no tiene perfil de color, los navegadores asumen sRGB, el perfil de color web más común. Si es importante que los colores coincidan con precisión, guarde la imagen sin el perfil incrustado antes de cargarla.

Eliminar un perfil de color en Adobe Illustrator o Photoshop

1. Seleccione Edit > Assign Profile.
2. Seleccione Don’t Color Manage This Document.
3. Seleccione OK.

Eliminar un perfil de color en Adobe InDesign

1. Seleccione Edit > Assign Profile.
2. Para RGB Profile y CMYK Profile, seleccione Discard (Use Current Working Space).
3. Seleccione OK.

Para obtener más información, consulte la documentación de Adobe sobre perfiles de color

Preparar presentaciones, banners e imágenes de ancho completo

Las imágenes grandes y las presentaciones se adaptan al tamaño de pantalla disponible, por lo que algunas partes de una imagen pueden recortarse. Planifique este recorte antes de añadir imágenes a diseños Align de ancho completo.

1. Mantenga el texto fuera de la propia imagen. Utilice el editor de temas para añadir texto y enlaces, de modo que puedan adaptarse al diseño.

2. Elija imágenes sencillas cuando aparezca texto sobre ellas para ayudar a que el texto siga siendo legible.

3. Establezca un punto focal sobre el elemento importante.

   • Las imágenes anchas pueden recortarse a izquierda y derecha en pantallas altas.
   • Las imágenes altas pueden recortarse arriba y abajo en pantallas anchas.

Notas de uso

1. Elija primero el diseño. Adapte la relación de aspecto de la imagen a la sección de Align donde aparecerá.
2. Proteja el elemento principal. Utilice puntos focales para imágenes que puedan recortarse en diseños móviles o de escritorio.
3. Mantenga separado el texto del banner. Añada encabezados, textos y enlaces en el editor de temas en lugar de integrarlos en una imagen de banner.
4. Utilice el formato adecuado. Elija JPEG para fotografías y PNG para gráficos transparentes, como logotipos e iconos.
5. Compruebe las imágenes sensibles al color. Elimine los perfiles de color incrustados antes de cargarlas cuando los cambios de color puedan ser perceptibles.