Al trabajar con imágenes en la web, habrá ocasiones en las que querrás cargar una imagen grande, ya sea como imagen principal en una página o como fondo. La desventaja es que inmediatamente se encontrará con varios problemas. En primer lugar está el tamaño real del archivo. En segundo lugar está la resolución. En tercer lugar está la compresión.
Si el archivo es grande, tardará mucho en cargarse, especialmente para usuarios con una conexión más lenta. Puede reducir el tamaño del archivo comprimiéndolo, pero solo puede llegar hasta cierto punto antes de que la calidad de la imagen comience a verse afectada.
La solución a su problema es utilizar el corte de imágenes, que le permitirá cargar la imagen, una parte a la vez, hasta que la imagen completa aparezca en su pantalla.
Cómo funciona
A continuación se ofrece una descripción general de cómo funciona: cuando tiene una imagen que tardará demasiado en cargarse por sí sola, aprovecha la herramienta Cortar en Photoshop para cortar la imagen en secciones más pequeñas. Estas imágenes se guardarán como un archivo separado y se optimizarán mediante el comando Guardar para Web.
Además, Photoshop crea el HTML o CSS necesario para mostrar la imagen cortada. Cuando se usa en una página web, cada imagen se volverá a ensamblar en el navegador usando el HTML o CSS mencionado anteriormente para crear un resultado fluido. A continuación se muestra un ejemplo de una imagen cortada.
Conceptos básicos de corte
Para simplificar las cosas, solo trabajaremos con la herramienta Rebanar en una capa. En este ejemplo, estoy trabajando con una imagen de 960x722px. Algunas cosas que necesitas saber antes de comenzar:
Al crear sectores, puede hacerlo usando la herramienta Sector o puede construirlos usando capas. Los sectores se pueden seleccionar usando la herramienta Seleccionar sector. Puede mover, dimensionar o alinear el sector con otros sectores. Además, puede designar un nombre para el segmento, el tipo y la URL. Cada segmento se puede optimizar usando la configuración en el cuadro de diálogo Guardar para Web.
Para comenzar presione C en su teclado y haga clic en la herramienta Rebanar.
Cuando crea sectores, puede elegir entre tres configuraciones: Normal, Relación de aspecto fija y Tamaño fijo.
Normal: Esto se convertirá en un corte dependiendo de dónde comience y termine el cuadro que dibuje en la imagen.Relación de aspecto fija: Aquí es donde estableces la altura y el ancho usando números enteros. Para elaborar, si desea crear una porción con una proporción de tres a uno, debe ingresar 3 para la altura y 1 para el ancho.Tamaño fijo: Aquí es donde estableces la altura y el ancho del corte en píxeles.
Tienes varias opciones al cortar una imagen. Si la precisión no es importante, puede cortar la imagen manualmente y, si es necesario, mover los cortes completos usando la herramienta Seleccionar corte.
Si la precisión es importante, utilice pautas para trazar las secciones importantes de la imagen.
En la parte superior de la barra de menú Cortar, haga clic en C o en la herramienta Cortar para activarla y en la barra de menú Cortar encima de la imagen, haga clic en el botón Cortar desde guías.
Las porciones se dibujan automáticamente para usted. Luego puede reposicionar los cortes con la herramienta Seleccionar corte.
Una vez creado cada sector, puede editar la información sobre el sector de dos maneras.
Lo primero que debe hacer es hacer clic en la herramienta de selección de sectores, hacer clic en el sector que desea editar y luego hacer clic en el icono al lado del botón Mostrar sectores automáticos en la barra de menú.
Otra opción es hacer clic derecho en el sector y, en el menú emergente, hacer clic en Editar opciones de sector.
Ambas opciones abrirán el cuadro de diálogo Opciones de corte.
Como puede ver, hay muchas configuraciones. Puede cambiar el nombre del segmento, puede asignarle una URL para que cuando haga clic en él en el navegador lo lleve a una ubicación diferente, puede configurar el Destino (_blank, _self, _parent, _top), Mensaje Texto, etiqueta alternativa, dimensiones del sector y más.
Guardar para web
Una vez que esté satisfecho con su diseño, vaya a Archivo>Guardar para Web.
Aquí, puede configurar el tipo de archivo y la compresión para cada segmento o elegir el valor predeterminado que aparece en el cuadro de diálogo Guardar para Web. Una vez que esté satisfecho con su configuración, haga clic en el botón Guardar.
Esto abre el cuadro de diálogo Guardado optimizado como. En la parte inferior del cuadro hay varias configuraciones importantes.
Formato: Tiene tres opciones que son HTML e imágenes, Sólo imágenes y Sólo HTML.Ajustes: Sus opciones son Personalizado, Imagen de fondo, Configuración predeterminada, XHTML y Otras.Rebanadas: Sus opciones son Todos los sectores, Todos los sectores del usuario y Sectores seleccionados.
Para este tutorial estoy usando HTML e imágenes, configuración predeterminada y todos los sectores. Cuando esté satisfecho con su configuración, elija la carpeta donde desea guardar los archivos y haga clic en el botón Guardar. Esto crea un archivo HTML y guarda las seis imágenes en una carpeta.
Aquí hay una vista en pantalla dividida del archivo HTML en Adobe Dreamweaver. Como puede ver, el código es sencillo y fácil de usar.
Conclusión
Como puede ver, el corte de imágenes es útil si tiene una imagen grande. Al dividirla en secciones, partes de la imagen comenzarán a cargarse primero, lo que permitirá al usuario saber que hay más por venir. Esto es útil para usuarios con una conexión lenta.
Para obtener más información, eche un vistazo a los siguientes artículos:
Palabras: Nathan Segal
