Cree miniaturas que sigan siendo útiles en un tamaño de pantalla pequeño

La imagen de una tarjeta ayuda a alguien a reconocer rápidamente un producto, artículo o elemento de la galería. No es necesario que muestre todos los detalles en la fotografía más grande. Elija una composición que siga siendo comprensible cuando sea pequeña: una toma de la habitación completa puede ser menos útil que una vista más cercana, mientras que una miniatura del producto debe mostrar el elemento correcto en lugar de un detalle atractivo pero ambiguo.

Verifique la forma de la tarjeta antes de exportar. Ajustar dentro conserva la fuente completa, pero su sitio web puede recortarla más tarde con su propio estilo. Un recorte exacto te proporciona una composición deliberada para esa tragamonedas. Utilice la fuente más grande para ver una galería ampliada o ampliar el producto. No reemplace la única imagen detallada con la miniatura y espere que la ampliación recree sus detalles cuando un visitante la abra.

El ajuste preestablecido inicial se ajusta a 800 por 800 píxeles, selecciona WebP y aplica el enfoque de luz. Este es un ejemplo destinado a un candidato a tarjeta, no un requisito de miniatura universal. Mida el ancho de pantalla real y las necesidades de densidad de respuesta, luego elija una exportación adecuada. Una fuente ancha mantendrá su proporción dentro del cuadro en lugar de volverse cuadrada automáticamente.

Inspeccione la imagen al tamaño de la tarjeta real. Una cara, una etiqueta o una característica distintiva del producto aún debe ser reconocible. Es posible que sea mejor proporcionar pequeñas palabras incrustadas como texto de tarjeta real. Compare Desactivado con Nitidez clara, ya que un fuerte contraste en los bordes puede hacer que una imagen pequeña esté ocupada. Pruebe un JPEG con las mismas dimensiones si WebP no es útil en su flujo de trabajo. Utilice PNG para activos que necesitan transparencia existente; la exportación actual WebP aquí es opaca.

Coloque el archivo en la cuadrícula real y compruebe un teléfono, un diseño del ancho de una tableta y una pantalla grande. Confirme que el navegador realmente esté cargando la miniatura candidata en lugar de la imagen de tamaño completo. Proporcione fuentes receptivas adecuadas y dimensiones reservadas en la implementación del sitio. Una exportación local pequeña no tiene ningún efecto si la página aún solicita un archivo de gran tamaño diferente para cada tarjeta.

Inspeccione toda la interacción de navegación. Una miniatura utilizada como enlace necesita un nombre significativo y accesible a través de su imagen o el texto circundante. Mantenga el recorte lo suficientemente consistente para escanear sin ocultar contenido relevante. Para una galería, pruebe que al abrir el elemento se muestre una fuente más grande adecuada. Agrupe únicamente imágenes que compartan la misma función e inspeccione individualmente los valores atípicos, como productos altos o interiores anchos. El convertidor crea los archivos localmente y no modifica su sitio web ni publica una galería. Conserve el conjunto original para que las reglas de miniaturas puedan cambiar más adelante.

Elija un producto alto y una fotografía de una habitación amplia como primeras pruebas de miniaturas. Colóquelos junto a una imagen normal y compatible con cuadrados en la cuadrícula real. Compruebe si el estilo compartido oculta los extremos del producto o deja la habitación irreconocible. Es posible que sea necesario un recorte deliberado o un candidato separado para un valor atípico, incluso si la mayoría de las imágenes funcionan con la misma regla. Mire las etiquetas y las caras en tamaño de tarjeta normal y confirme que el vínculo aún tiene sentido cuando la imagen no está disponible. Esta prueba le ayuda a juzgar la miniatura como parte de la navegación y no como un archivo pequeño visto por sí solo.