Documentación Herramientas principales Image Cropper

Ejemplos

Ejemplos prácticos y casos de uso habituales para la herramienta Image Cropper.

Ejemplos básicos

Crear una foto de perfil

Cómo crear una foto de perfil cuadrada a partir de cualquier imagen:

Sube tu foto
- Elige un retrato o una foto grupal
- Se admiten formatos comunes como JPEG y PNG
Establece la relación de aspecto en 1:1
- Haz clic en 1:1 en la configuración de proporción
- El área de recorte se convierte en un cuadrado perfecto
Coloca el área de recorte
- Centra el recorte sobre el rostro del sujeto
- Ajusta el tamaño para conservar los elementos importantes
Define la exportación
- Formato: PNG (ideal si necesitas transparencia)
- Tamaño: 400x400 funciona bien en la mayoría de plataformas
- Calidad: si usas JPEG, se recomienda 90%

Resultado: un avatar cuadrado y profesional para perfiles de redes sociales.

Optimización para redes sociales

Publicación de Instagram (1:1)

Relación de aspecto: 1:1
Tamaño recomendado: 1080x1080
Formato: JPEG
Calidad: 85%

Historia de Instagram (9:16)

Relación de aspecto: 9:16
Tamaño recomendado: 1080x1920
Formato: JPEG
Calidad: 80%

Encabezado de Twitter (16:9)

Relación de aspecto: 16:9
Tamaño recomendado: 1500x500
Formato: JPEG
Calidad: 90%

Imágenes de producto para comercio electrónico

Cómo crear fotos de producto consistentes:

Definir dimensiones estándar
- 1000x1000 para las imágenes principales
- 800x600 para vistas de detalle
- El fondo blanco suele funcionar mejor
Flujo de trabajo por lotes
- Establece el formato de salida en JPEG
- Establece la calidad en 85%
- Usa 1:1 para mantener uniformidad
- Procesa todas las imágenes con la misma configuración

Ejemplos avanzados

Recursos para diseño web

Imágenes para la sección hero

Relación de aspecto: 16:9 o 21:9
Tamaño: 1920x1080 o 2560x1080
Formato: WebP (alternativa: JPEG)
Calidad: 75% (equilibrio entre calidad y velocidad de carga)

Miniaturas para entradas de blog

Relación de aspecto: 4:3
Tamaño: 800x600
Formato: WebP
Calidad: 80%
Optimización: centrar la atención en el sujeto principal

Imágenes para tarjetas

Relación de aspecto: 3:2
Tamaño: 600x400
Formato: WebP
Calidad: 85%

Flujo de trabajo fotográfico

Extraer detalles de fotos grandes

Cargar una imagen de alta resolución
- Original: 6000x4000
- Objetivo: extraer un detalle concreto
Recorte preciso
- Usa una proporción libre
- Haz zoom para seleccionar con precisión
- Enfoca el recorte en la zona importante
Optimizar la salida
- Mantén una calidad alta (95%)
- Conserva el formato original si la imagen es PNG
- Redimensiona según el uso final en la web

Crear una serie fotográfica

Usar una proporción coherente
- 4:3 para un estilo clásico
- 16:9 para una sensación más moderna
Usar tamaños uniformes
- 1200x900 para series en 4:3
- 1200x675 para series en 16:9
Mantener estándares de calidad
- Exporta las fotos como JPEG
- 90% para exposición o impresión
- 80% para galerías web

Ejemplos de flujo de trabajo

Procesar varias imágenes por lotes

Preparación

- Organiza las imágenes originales en una carpeta
- Define las especificaciones de salida
- Establece una convención de nombres consistente

Procesamiento

- Carga la primera imagen
- Define la proporción y el formato
- Ajusta la calidad y el tamaño de salida
- Recorta y descarga
- Repite el proceso con las imágenes restantes

Control de calidad

- Revisa todas las imágenes procesadas
- Comprueba que el tamaño de archivo sea adecuado
- Verifica que las dimensiones sean consistentes
- Prueba las imágenes en la aplicación de destino

Crear varias versiones a partir de una sola imagen

A partir de una misma imagen de origen, puedes generar varias variantes:

Variante 1: resolución completa

Uso: impresiones de alta calidad
Configuración: tamaño original, PNG, calidad 100%
Recorte: mínimo para conservar la composición original

Variante 2: visualización web

Uso: galerías de sitios web
Configuración: dimensión máxima 1200px, JPEG, 85%
Recorte: optimizar la composición para la web

Variante 3: miniatura

Uso: cuadrículas de vista previa
Configuración: 300x300, JPEG, 75%
Recorte: enfocar en el sujeto principal

Variante 4: optimizada para móvil

Uso: aplicaciones móviles
Configuración: dimensión máxima 800px, WebP, 80%
Recorte: asegurar que los elementos importantes sigan visibles en pantallas pequeñas

Ejemplos de solución de problemas

Manejo de archivos grandes

Problema: necesitas procesar una imagen convertida desde un archivo RAW de 50MB.
Solución:

Usa un navegador con memoria suficiente
Cierra otras pestañas para liberar recursos
Reduce el tamaño del archivo antes si es necesario
Usa carga progresiva si está disponible

Equilibrio entre calidad y tamaño de archivo

Escenario: necesitas un archivo pequeño sin perder demasiada calidad.

Ajustes para probar:

WebP suele ser alrededor de un 30% más pequeño que JPEG
75% de calidad suele ser un buen punto de equilibrio
Ajusta las dimensiones al uso real
Elige una proporción adecuada para evitar píxeles innecesarios

Comparación:

JPEG (90%) original: 2.1MB
JPEG (75%) optimizado: 1.2MB
WebP (75%): 800KB
WebP (60%): 450KB

Compatibilidad con dispositivos móviles

Desafío: procesar imágenes en teléfonos o tabletas.

Aspectos a tener en cuenta:

Menor memoria disponible
Ajuste del recorte mediante gestos táctiles
Procesamiento más lento
Opciones de descarga más limitadas

Buenas prácticas:

Usa imágenes originales más pequeñas en móvil
Reduce ligeramente la calidad de salida
Comprueba que los gestos táctiles funcionen bien
Proporciona una respuesta visual clara

Ejemplos de integración

Integración con plugin de WordPress

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

Integración con componente React

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

Integración con plataforma de comercio electrónico

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}

¿Te resultó útil esta página?

On this page

Ejemplos básicos Ejemplos avanzados Ejemplos de flujo de trabajo Ejemplos de solución de problemas Ejemplos de integración