EsHowto >> Electrónica >> Tecnología cotidiana

Guía paso a paso: Cómo crear miniaturas de imágenes para acelerar tu sitio web

Las imágenes grandes ralentizan la carga de las páginas web, lo que disuade a los lectores en línea. Convierte tus imágenes en miniaturas para mejorar la velocidad. Al redimensionar proporcionalmente, evitas distorsiones. Usa editores como Photoshop, Fireworks o Paint Shop Pro.

Necesitarás:

  • Imagen original
  • Photoshop, Fireworks o Paint Shop Pro
  • Editor de texto (como Bloc de notas o TextPad)

Pasos a seguir:

  1. Abre tu editor de imágenes favorito (Photoshop, Fireworks o Paint Shop Pro). Ve a "Archivo" > "Abrir" y selecciona la imagen.
  2. En Photoshop: "Imagen" > "Tamaño de imagen". En Fireworks: "Modificar" > "Tamaño del lienzo" > "Imagen". En Paint Shop Pro: "Imagen" > "Cambiar el tamaño". Se abrirá un cuadro de diálogo.
  3. Reduce el ancho y alto (en píxeles o porcentaje). Marca "Restringir proporciones" (Photoshop/Fireworks) o "Mantener el tamaño de impresión original" (Paint Shop Pro) para mantener proporciones. Haz clic en "Aceptar".
  4. Ve a "Archivo" > "Guardar como". Cambia el nombre del archivo (ej. image1-small.jpg) y guarda. La miniatura está lista.
  5. Cierra el editor y abre un editor de texto.
  6. Ve a "Archivo" > "Abrir", selecciona tu archivo HTML. Inserta este código donde quieras la miniatura:
    <a href="image1-large.jpg"><img src="image1-small.jpg" alt="Miniatura de la imagen"></a>
  7. Sustituye "image1-large.jpg" por el nombre de la imagen original y "image1-small.jpg" por el de la miniatura.
  8. Guarda el archivo HTML con "Archivo" > "Guardar".