ramonjosegn
- Seguidores
- 14
Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
- Desde
- 14 Feb 2010
- Mensajes
- 69.525
Hola chicos/as.
Hace rato que quería compartir este tutorial porque he visto que muchos usuarios no tienen muy claro cómo conseguir que sus imágenes tengan un buen nivel de compresión para que ocupen menos espacio cuando las suben a la web.
Para comprimir las imágenes haremos uso del programa denominado
RIOT
El nombre proviene de - Radical Image Optimization Tool
El programa RIOT permite comprimir imágenes de forma fácil y sencilla.
Los formatos que te permite abrir el programa son una gran cantidad:
Portable Network Graphics (png) (*.png
Graphics Interchange Format (gif) (*.gif
Windows or OS/2 Bitmap (bmp) (*.bmp
Tagged Image File Format (tif,tiff) (*.tif;*.tiff
Adobe Photoshop (psd) (*.psd
Windows Icón (ico) (*.ico
Truevision Targa (tga,targa) (*.tga;*.targa
Multiple-image Network Graphics (mng) (*.mng
JPEG Network Graphics (jng) (*.jng
JPEG-2000 codestream (j2k,j2c) (*.j2k;*.j2c
JPEG-2000 File Format (jp2) (*.jp2
Kodak PhotoCD (pcd) (*.pcd
Zsoft Paintbrush (pcx) (*.pog)
Wireless Bitmap (wap,wbmp,wbm) (*.wap;*.wbmp;*.wbm
X11 Bitmap Format (xbm) (*.xbm
X11 Pixmap Format (xpm) (*.xpm
DirectX Surface (dds) (*.dds
Raw fax format CCITT G.B (g3) (*.g3
C64 Koala Graphics (koa) (*.koa
IFF Interleaved Bitmap (iff,lbm) (*.iff;*.lbm
Portable Bitmap (ASCII) (pbm) (*.pbm
Portable Bitmap (RAW) (pbm) (*.pbm
Portable Greymap (ASCII) (pgm) (*.pgm
Portable Greymap (RAW) (pgm) (*.pgm
Portable Pixelmap (ASCII) (ppm) (*.ppm
Portable Pixelmap (RAW) (ppm) (*.ppm
Sun Ráster Image (ras) (*.ras
Dr. Halo (cut) (*.cut
SGI Image Format (sgi) (*.sgi
Macintosh PICT (pct,pict,pic) (*.pct;*.pict;*.pic
NOTA - El programa no permite cambiar la resolución, técnicamente no debería afectar al resultado final, pero siempre es mejor bajarla a 72dpi/ppp para web (ó a 96 según gustos y/o tipos de monitores). De todas formas la mayoría de imágenes que consigas en la web (bájalas gratis eh), suelen ya estar a 72 dpi. ¿Qué es eso de los DPI? Hay explicaciones en la web, por ejemplo en la Wikipedia ¿DPI QUE ÉS?
(PASO 1)
Bajamos (o seleccionamos) la imagen que deseamos comprimir para publicar/subir a nuestro sitio web.
En mi caso voy a bajar la siguiente imagen gratuita desde el siguiente enlace, bajaré el formato "original" que es el más grande, es recomendable que siempre bajes la imagen con la mayor resolución posible porque en ocasiones puedes necesitarla en el futuro para otros usos, si te contara la de veces que ha llegado un cliente a pedirme una imagen para impresión (cuando sólo la tenía para web) te asombrarías. Así que para referencias futuras, por ejemplo para impresión siempre es conveniente disponer de la versión original a gran tamaño.
https://pixabay.com/en/sea-bay-waterfront-beach-nice-418742/
Nota - En Pixabay para imágenes a alta resolución tendrás que loguearte o registrarte y loguearte.
(PASO 2)
Descargamos e instalamos el software RIOT.
Para ello nos dirigimos a la web oficial o a algún sitio web de descargas CONFIABLE.
RIOT - Radical Image Optimization Tool | A free program designed to efficiently optimize images for the Web
RIOT - Radical Image Optimization Tool | A free program designed to efficiently optimize images for the Web
(PASO 3)
Abrimos el programa RIOT
La interfaz es algo "anticuada" pero eso no le quita mérito a la facilidad de uso, rapidez y eficacia.
(PASO 4)
Abrimos nuestra imagen con el botón OPEN, copiando y pegando o arrastrando la imagen sobre la ventana.
(PASO 5)
Cuando las imágenes tengan un tamaño superior a 1184 pixeles en alguno de sus lados el programa RIOT mostrará un aviso
El aviso nos indica que la imagen tiene un tamaño exagerado para subir a un sitio web y que además será lento procesarla en RIOT.
Además nos recomienda que la escalemos para poder optimizar su tamaño antes de subirla a la web.
Como nuestro objetivo es subirla a la web con una buena compresión entonces hacemos clic en YES para poder escalarla
(PASO 6)
Aparecerá una pantalla para indicar el escalado de la imagen
Indicamos el tamaño nuevo de la imagen.
Las opciones disponibles en la ventana son
WIDTH - ancho | HEIGTH - alto | PIXELES - cambiar por píxeles | PERCENT - cambiar por porcentaje | KEEP ASPECT RATIO - escalado proporcional | FILTRO - es el tipo de "inteligencia" que se aplica para ampliar/reducir la imagen
En nuestro caso queremos por ejemplo que la imagen tenga un ancho máximo de 800 pixeles (tamaño estándar para web), mantendremos el escalado proporcional y usaremos le filtro LANCZOS3. LANCZOS3 permite un escalado enfocado, y es uno de los mejores en la actualidad disponible en algunos programas gratuitos como RIOT, IRFANVIEW O ZONER PHOTO STUDIO.
Mis opciones quedarán por lo tanto así
Hacemos clic en el botón [ OK ]
(PASO 7)
Automáticamente nuestra imagen se abrirá CON EL NUEVO TAMAÑO ESCOGIDO.
(PASO 8)
RIOT por defecto aplicará una compresión AUTOMÁTICA (debe estar seleccionada) y ya podremos guardar nuestra imagen
Una vez estemos satisfechos con los resultados guardamos la imagen (RIOT habrá escogido el formato óptimo para el tamaño), si el programa nos lanza un aviso consultando si queremos sustituir la imagen original le indicamos que NO.
COMPRESIÓN POR TAMAÑO
Si queremos que nuestra imagen no se comprima de forma automática porque deseamos QUE LA IMAGEN TENGA UN PESO CONCRETO debemos hacerlo desde la opción COMPRESS TO SIZE
Hacemos clic en este botón
E ingresamos el tamaño en KBs finales que deseamos. Por ejemplo quiero que mi imagen ocupe 320 kbs.
Ingreso el número
Hacemos clic en el botón [ OK ] y el programa comenzará a realizar las operaciones necesarias para obtener ese resultado.
Una vez estemos satisfechos con los resultados guardamos la imagen (RIOT habrá escogido el formato óptimo para el tamaño), si el programa nos lanza un aviso consultando si queremos sustituir la imagen original le indicamos que NO.
COMPRESIÓN POR LOTES
Sí, RIOT también permite comprimir imágenes en modo LOTES.
Para ello accedemos al menú TOOLS > BATCH OPTIMIZER
Si tienes alguna imagen cargada saldrá un aviso de que se "descargará la imagen actual", hacemos clic en YES
A continuación hacemos clic en el botón ADD IMAGES (que permite varias opciones)
y seleccionamos las imágenes que deseemos comprimir
En el botón [ ... ] escogemos nuestra carpeta de destino donde se guardarán las imágenes
Y a continuación hacemos clic en el botón [ START ] para iniciar la conversión
Revisamos la carpeta de destino y deberían estar nuestras imágenes COMPRIMIDAS.
Si tenéis cualquier duda comentarte al respecto, os agradezco si es con un
pero que pueda atender la consulta lo antes posible.
Espero que os haya gustado, un ME GUSTA no te lleva más de un segundo y a mí me llevó media hora escribirlo.
Hace rato que quería compartir este tutorial porque he visto que muchos usuarios no tienen muy claro cómo conseguir que sus imágenes tengan un buen nivel de compresión para que ocupen menos espacio cuando las suben a la web.
Para comprimir las imágenes haremos uso del programa denominado
RIOT
El nombre proviene de - Radical Image Optimization Tool
El programa RIOT permite comprimir imágenes de forma fácil y sencilla.
Los formatos que te permite abrir el programa son una gran cantidad:
Portable Network Graphics (png) (*.png
Graphics Interchange Format (gif) (*.gif
Windows or OS/2 Bitmap (bmp) (*.bmp
Tagged Image File Format (tif,tiff) (*.tif;*.tiff
Adobe Photoshop (psd) (*.psd
Windows Icón (ico) (*.ico
Truevision Targa (tga,targa) (*.tga;*.targa
Multiple-image Network Graphics (mng) (*.mng
JPEG Network Graphics (jng) (*.jng
JPEG-2000 codestream (j2k,j2c) (*.j2k;*.j2c
JPEG-2000 File Format (jp2) (*.jp2
Kodak PhotoCD (pcd) (*.pcd
Zsoft Paintbrush (pcx) (*.pog)
Wireless Bitmap (wap,wbmp,wbm) (*.wap;*.wbmp;*.wbm
X11 Bitmap Format (xbm) (*.xbm
X11 Pixmap Format (xpm) (*.xpm
DirectX Surface (dds) (*.dds
Raw fax format CCITT G.B (g3) (*.g3
C64 Koala Graphics (koa) (*.koa
IFF Interleaved Bitmap (iff,lbm) (*.iff;*.lbm
Portable Bitmap (ASCII) (pbm) (*.pbm
Portable Bitmap (RAW) (pbm) (*.pbm
Portable Greymap (ASCII) (pgm) (*.pgm
Portable Greymap (RAW) (pgm) (*.pgm
Portable Pixelmap (ASCII) (ppm) (*.ppm
Portable Pixelmap (RAW) (ppm) (*.ppm
Sun Ráster Image (ras) (*.ras
Dr. Halo (cut) (*.cut
SGI Image Format (sgi) (*.sgi
Macintosh PICT (pct,pict,pic) (*.pct;*.pict;*.pic
NOTA - El programa no permite cambiar la resolución, técnicamente no debería afectar al resultado final, pero siempre es mejor bajarla a 72dpi/ppp para web (ó a 96 según gustos y/o tipos de monitores). De todas formas la mayoría de imágenes que consigas en la web (bájalas gratis eh), suelen ya estar a 72 dpi. ¿Qué es eso de los DPI? Hay explicaciones en la web, por ejemplo en la Wikipedia ¿DPI QUE ÉS?
(PASO 1)
Bajamos (o seleccionamos) la imagen que deseamos comprimir para publicar/subir a nuestro sitio web.
En mi caso voy a bajar la siguiente imagen gratuita desde el siguiente enlace, bajaré el formato "original" que es el más grande, es recomendable que siempre bajes la imagen con la mayor resolución posible porque en ocasiones puedes necesitarla en el futuro para otros usos, si te contara la de veces que ha llegado un cliente a pedirme una imagen para impresión (cuando sólo la tenía para web) te asombrarías. Así que para referencias futuras, por ejemplo para impresión siempre es conveniente disponer de la versión original a gran tamaño.
https://pixabay.com/en/sea-bay-waterfront-beach-nice-418742/
Nota - En Pixabay para imágenes a alta resolución tendrás que loguearte o registrarte y loguearte.
(PASO 2)
Descargamos e instalamos el software RIOT.
Para ello nos dirigimos a la web oficial o a algún sitio web de descargas CONFIABLE.
RIOT - Radical Image Optimization Tool | A free program designed to efficiently optimize images for the Web
RIOT - Radical Image Optimization Tool | A free program designed to efficiently optimize images for the Web
(PASO 3)
Abrimos el programa RIOT
La interfaz es algo "anticuada" pero eso no le quita mérito a la facilidad de uso, rapidez y eficacia.
(PASO 4)
Abrimos nuestra imagen con el botón OPEN, copiando y pegando o arrastrando la imagen sobre la ventana.
(PASO 5)
Cuando las imágenes tengan un tamaño superior a 1184 pixeles en alguno de sus lados el programa RIOT mostrará un aviso
El aviso nos indica que la imagen tiene un tamaño exagerado para subir a un sitio web y que además será lento procesarla en RIOT.
Además nos recomienda que la escalemos para poder optimizar su tamaño antes de subirla a la web.
Como nuestro objetivo es subirla a la web con una buena compresión entonces hacemos clic en YES para poder escalarla
(PASO 6)
Aparecerá una pantalla para indicar el escalado de la imagen
Indicamos el tamaño nuevo de la imagen.
Las opciones disponibles en la ventana son
WIDTH - ancho | HEIGTH - alto | PIXELES - cambiar por píxeles | PERCENT - cambiar por porcentaje | KEEP ASPECT RATIO - escalado proporcional | FILTRO - es el tipo de "inteligencia" que se aplica para ampliar/reducir la imagen
En nuestro caso queremos por ejemplo que la imagen tenga un ancho máximo de 800 pixeles (tamaño estándar para web), mantendremos el escalado proporcional y usaremos le filtro LANCZOS3. LANCZOS3 permite un escalado enfocado, y es uno de los mejores en la actualidad disponible en algunos programas gratuitos como RIOT, IRFANVIEW O ZONER PHOTO STUDIO.
Mis opciones quedarán por lo tanto así
Hacemos clic en el botón [ OK ]
(PASO 7)
Automáticamente nuestra imagen se abrirá CON EL NUEVO TAMAÑO ESCOGIDO.
(PASO 8)
RIOT por defecto aplicará una compresión AUTOMÁTICA (debe estar seleccionada) y ya podremos guardar nuestra imagen
Una vez estemos satisfechos con los resultados guardamos la imagen (RIOT habrá escogido el formato óptimo para el tamaño), si el programa nos lanza un aviso consultando si queremos sustituir la imagen original le indicamos que NO.
COMPRESIÓN POR TAMAÑO
Si queremos que nuestra imagen no se comprima de forma automática porque deseamos QUE LA IMAGEN TENGA UN PESO CONCRETO debemos hacerlo desde la opción COMPRESS TO SIZE
Hacemos clic en este botón
E ingresamos el tamaño en KBs finales que deseamos. Por ejemplo quiero que mi imagen ocupe 320 kbs.
Ingreso el número
Hacemos clic en el botón [ OK ] y el programa comenzará a realizar las operaciones necesarias para obtener ese resultado.
Una vez estemos satisfechos con los resultados guardamos la imagen (RIOT habrá escogido el formato óptimo para el tamaño), si el programa nos lanza un aviso consultando si queremos sustituir la imagen original le indicamos que NO.
COMPRESIÓN POR LOTES
Sí, RIOT también permite comprimir imágenes en modo LOTES.
Para ello accedemos al menú TOOLS > BATCH OPTIMIZER
Si tienes alguna imagen cargada saldrá un aviso de que se "descargará la imagen actual", hacemos clic en YES
A continuación hacemos clic en el botón ADD IMAGES (que permite varias opciones)
y seleccionamos las imágenes que deseemos comprimir
En el botón [ ... ] escogemos nuestra carpeta de destino donde se guardarán las imágenes
Y a continuación hacemos clic en el botón [ START ] para iniciar la conversión
Revisamos la carpeta de destino y deberían estar nuestras imágenes COMPRIMIDAS.
Si tenéis cualquier duda comentarte al respecto, os agradezco si es con un
PHP:
@ramonjosegnEspero que os haya gustado, un ME GUSTA no te lleva más de un segundo y a mí me llevó media hora escribirlo.
Última edición:
