Placeholders de Imagen y Carga

npm install blurhash sharp

// lib/blurhash.ts
import { encode } from "blurhash";
import sharp from "sharp";
 
export async function generateBlurHash(imagePath: string): Promise<string> {
  const image = sharp(imagePath);
  const { width, height } = await image.metadata();
 
  // Redimensiona a dimensiones pequeñas para codificación rápida
  const { data, info } = await image
    .resize(32, 32, { fit: "inside" })
    .ensureAlpha()
    .raw()
    .toBuffer({ resolveWithObject: true });
 
  return encode(new Uint8ClampedArray(data), info.width, info.height, 4, 4);
}

// lib/blur-data-url.ts
import sharp from "sharp";
 
export async function generateBlurDataURL(imagePath: string): Promise<string> {
  const buffer = await sharp(imagePath)
    .resize(8, 8, { fit: "inside" })
    .jpeg({ quality: 50 })
    .toBuffer();
 
  return `data:image/jpeg;base64,${buffer.toString("base64")}`;
}
 
// Para imágenes remotas
export async function generateRemoteBlurDataURL(imageUrl: string): Promise<string> {
  const res = await fetch(imageUrl);
  const arrayBuffer = await res.arrayBuffer();
  const buffer = await sharp(Buffer.from(arrayBuffer))
    .resize(8, 8, { fit: "inside" })
    .jpeg({ quality: 50 })
    .toBuffer();
 
  return `data:image/jpeg;base64,${buffer.toString("base64")}`;
}

// lib/images-with-blur.ts
import { generateRemoteBlurDataURL } from "@/lib/blur-data-url";
 
interface ImageData {
  src: string;
  alt: string;
  width: number;
  height: number;
}
 
export interface ImageWithBlur extends ImageData {
  blurDataURL: string;
}
 
export async function getImagesWithBlur(images: ImageData[]): Promise<ImageWithBlur[]> {
  return Promise.all(
    images.map(async (image) => ({
      ...image,
      blurDataURL: await generateRemoteBlurDataURL(image.src),
    }))
  );
}

// app/gallery/page.tsx
import { getImagesWithBlur } from "@/lib/images-with-blur";
import { BlurGallery } from "./blur-gallery";
 
const imageData = [
  { src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb", alt: "Lago de montaña", width: 1200, height: 800 },
  { src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e", alt: "Luz solar en el bosque", width: 1200, height: 800 },
  { src: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d", alt: "Camino forestal", width: 1200, height: 800 },
  { src: "https://images.unsplash.com/photo-1433086966358-54859d0ed716", alt: "Puente de cascada", width: 1200, height: 800 },
  { src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e", alt: "Colinas verdes", width: 1200, height: 800 },
  { src: "https://images.unsplash.com/photo-1501854140801-50d01698950b", alt: "Bosque aéreo", width: 1200, height: 800 },
];
 
export default async function GalleryPage() {
  const images = await getImagesWithBlur(imageData);
 
  return (
    <main className="mx-auto max-w-6xl px-4 py-8">
      <h1 className="mb-6 text-3xl font-bold">Galería con Carga Blur-Up</h1>
      <BlurGallery images={images} />
    </main>
  );
}

// app/gallery/blur-gallery.tsx
"use client";
 
import Image from "next/image";
import { useState } from "react";
import type { ImageWithBlur } from "@/lib/images-with-blur";
 
export function BlurGallery({ images }: { images: ImageWithBlur[] }) {
  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
 
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {images.map((image) => (
        <div
          key={image.src}
          className="relative aspect-[3/2] overflow-hidden rounded-xl"
        >
          <Image
            src={image.src}
            alt={image.alt}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            placeholder="blur"
            blurDataURL={image.blurDataURL}
            onLoad={() =>
              setLoadedImages((prev) => new Set(prev).add(image.src))
            }
            className={`object-cover transition-all duration-700 ${
              loadedImages.has(image.src)
                ? "scale-100 blur-0"
                : "scale-110 blur-lg"
            }`}
          />
        </div>
      ))}
    </div>
  );
}

// components/image-skeleton.tsx
export function ImageSkeleton({ aspectRatio = "3/2" }: { aspectRatio?: string }) {
  return (
    <div
      className="relative overflow-hidden rounded-xl bg-gray-200"
      style={{ aspectRatio }}
    >
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/60 to-transparent" />
    </div>
  );
}

/* Añade a tu CSS global o configuración de tailwind */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

// tailwind.config.ts - alternativa: define en la configuración de Tailwind
// animation: { shimmer: "shimmer 2s infinite" }
// keyframes: { shimmer: { "100%": { transform: "translateX(100%)" } } }

"use client";
 
import { decode } from "blurhash";
import { useEffect, useRef } from "react";
 
interface BlurHashCanvasProps {
  hash: string;
  width: number;
  height: number;
  className?: string;
}
 
export function BlurHashCanvas({ hash, width, height, className }: BlurHashCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
 
    const pixels = decode(hash, width, height);
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
 
    const imageData = ctx.createImageData(width, height);
    imageData.data.set(pixels);
    ctx.putImageData(imageData, 0, 0);
  }, [hash, width, height]);
 
  return <canvas ref={canvasRef} width={width} height={height} className={className} />;
}

import Image from "next/image";
import heroImage from "@/public/images/hero.jpg";
 
// blurDataURL se genera automáticamente en tiempo de compilación
export function Hero() {
  return (
    <Image
      src={heroImage}
      alt="Hero"
      placeholder="blur"
      priority
      className="h-[60vh] w-full object-cover"
    />
  );
}

"use client";
 
import { useState } from "react";
 
interface ProgressiveImageProps {
  tinyUrl: string;
  fullUrl: string;
  alt: string;
}
 
export function ProgressiveImage({ tinyUrl, fullUrl, alt }: ProgressiveImageProps) {
  const [loaded, setLoaded] = useState(false);
 
  return (
    <div className="relative overflow-hidden">
      {/* Versión diminuta borrosa - siempre visible inicialmente */}
      <img
        src={tinyUrl}
        alt=""
        aria-hidden
        className={`absolute inset-0 h-full w-full scale-110 object-cover blur-xl transition-opacity duration-500 ${
          loaded ? "opacity-0" : "opacity-100"
        }`}
      />
      {/* Imagen de resolución completa */}
      <img
        src={fullUrl}
        alt={alt}
        onLoad={() => setLoaded(true)}
        className={`relative h-full w-full object-cover transition-opacity duration-500 ${
          loaded ? "opacity-100" : "opacity-0"
        }`}
      />
    </div>
  );
}