ASP-Jpeg

Librería de gestión de imágenes que nos permitirá realizar cambios importantes en las imágenes subidas a la web sin necesidad de conocer o modificar la imagen subida.

En la web existen varias formas de insertar una imagen, ya sea a través de la subida del archivo por imágenes y posteriormente su asignación a los campos de Foto/Foto1 o Imagen/Imagen1, o bien desde los propios editores de texto enriquecido utilizando el botón de insertar imagen. Aquí vamos a mostrar un método alternativo de uso tanto para un método como para otro, o bien para utilizar directamente en cualquier contenido web.

Inserción habitual:

en el campo imagen o foto escribimos: archivo.jpg

Método opcional

en el campo imagen o foto escribimos: aspjpeg.asp?path=archivo.jpg

Básicamente varía que vamos a poner antes del nombre y/o ruta de nuestra imagen el literal aspjpeg.asp?path=

Opciones adicionales de aspjpeg.asp

Podemos agregar parámetros a esta función de la siguiente forma:

Parámetro	Valores	Descripción y resultado
width	número	Establece el número de pixel al que deseamos ajustar la imagen en horizontal. Al ajuste será proporcional. Ejemplo width=300
height	número	Establece el número de pixel al que deseamos ajustar la imagen en vertical. Al ajuste será proporcional. Ejemplo: height=400
gray	1 o 0	Convertir la imagen a escala de grises. Ejemplo gray=1 para activar, por defecto se asume 0
sharp	1 o 0	Afilar o ajustar perfiles de la imagen para mejorar su aspecto. Ejemplo sharp=1 para activar, por defecto se asume 0
hflip	1 o 0	Realizar un espejo horizontal a la imagen, o dar la vuelta. Ejemplo hflip=1 para activar, por defecto se asume 0
vflip	1 o 0	Realizar un espejo vertical a la imagen, o dar la vuelta verticalmente. Ejemplo vflip=1 para activar, por defecto se asume 0
q	desde 1 a 100	Compresión del archivo jpg, 100=sin compresión 1=máxima compresión, el ajuste de compresión por defecto es 80. Es importante identificar que la compresión bajará el peso de la imagen, en consecuencia irá más rápida la descarga, pero la definición y aspecto del resultado bajará sensiblemente.
i	0 o 1 o 2	Activar la interpolación de la imagen. Hay tres tipos: 0= pixel proximo, 1=bilinear, 2 bicúbico. Ejemplo i=1 , por defecto se asume 0.
crop	1 o 0	Realizar un corte parcial a la imagen, es necesario asignar las posiciones x e y en caso de activar. Ejemplo crop=1
x1	número	Posición X desde la esquina izquierda superior. Ejemplo x1=30
y1	número	Posición Y desde la esquina izquierda superior. Ejemplo y1=40
x2	número	Posición X desde la esquina derecha inferior. Ejemplo x2=300
y2	número	Posición Y desde la esquina derecha inferior. Ejemplo y2=215
sepia	1 o 0	Convertir la imagen a color sepia. Ejemplo sepia=1 para activar. Por defecto se sume 0

Nota importante los parámetros deben estar precedidos del signo & para separar unos de otros.

Ejemplos con un parámetro adicional:

aspjpeg.asp?path=archivo.jpg&width=300 Muestra la imagen archivo.jpg en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&gray=1 Muestra la imagen archivo.jpg en blanco y negro (escala de grises) en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&sepia=1 Muestra la imagen archivo.jpg en tonos sepia y en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&sharp=1 Muestra la imagen archivo.jpg ajustado el perfilado final y en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&vflip=1 Muestra la imagen archivo.jpg puesta al revés en vertical en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&hflip=1 Muestra la imagen archivo.jpg puesta al revés en horizontal en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&i=2 Muestra la imagen archivo.jpg con una interpolación bicúbica y en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&q=70 Muestra la imagen archivo.jpg con una compresión del 30% (reducción de peso del archivo final) y en un ancho de 300 pixel (ajuste de escala)

aspjpeg.asp?path=archivo.jpg&width=300&crop=1&x1=10&y1=20&x2=200&y2=180 Muestra la imagen archivo.jpg de un ancho de 300 pixel (ajuste de escala) y recorta la proporción desde 10,20 hasta 200,180

Ejemplos con parámetros mixtos:

aspjpeg.asp?path=archivo.jpg&width=300&vflip=1&hflip=1&gray=1&sharp=1&i=1 Muestra la imagen archivo.jpg puesta al revés en vertical y espejo horizontal, en grises, con ajuste de perfiles, interpolada por bilinear y en un ancho de 300 pixel (ajuste de escala)

Las posibilidades son muchas, y las ventajas mayores.

Procesar las imágenes a través de este método simplificará la subida de varias versiones de la misma imágen, evitará el tener que realizar ajustes en su equipo como convertir a grises o sepia, podrá recortar partes de forma simple, etc... y lo más importante el archivo resultante será siempre ajustado al máximo al tamaño del archivo necesario para su web, por lo que optimizará la velocidad y tráfico en la web.

Ejemplo visual con una imagen de 320x200 px que denominamos people.jpg y que ha sido subida a la carpeta css/images/

aspjpeg.asp?path=css/images/people.jpg (tamaño 10kb)

people