Optimizar el peso de nuestras imágenes es probablemente una de las mejores practicas a la hora de ahorrar transferencia de nuestro servidor a la vez que aceleramos la descarga de nuestro sitio. Para optimizar imágenes existen infinidad de herramientas, unas mejores que otras, pero ¿que ocurre si lo que buscamos es optimizar imágenes automáticamente directamente desde nuestro servidor, sin la necesidad de programas, extensiones o cualquier otro adicional?
Las respuestas pueden ser variadas, por ejemplo y desde hace tiempo lo que se hace es utilizar un lenguaje de programación como PHP junto a su biblioteca gráfica, copiando la imagen pero bajando la calidad del archivo, esta practica si bien cumple su función de reducir el tamaño conlleva el problema de la perdida de calidad. Lo mismo ocurre con otras alternativas similares, no obstante y por suerte existe una manera de reducir el tamaño al máximo posible sin perder nada de calidad, y es el motivo de esta entrada.
¿Que necesitamos?
- Un servidor que corra PHP5 y tenga instalada la extensión php_curl extension.
- 5 minutos para implementar el script.
¿Como funciona este script para optimizar imágenes sin perder calidad?
Básicamente recibe por parámetro una dirección que apunta hacia una imagen, luego la envía al servicio Smush.it de Yahoo, que es 100% gratuito y es, creo yo, la mejor opción a la hora de optimizar imágenes en linea con unos resultados realmente impresionante. Y finalmente devuelve un array con algunos datos como por ejemplo, la dirección a la imagen optimizada como así también información acerca de la mejora realizada.
La única limitación es que Smush.it solo procesa imágenes en formato PNG, JPG y GIF de hasta 1 MB. Numero más que suficiente para la gran mayoría de las aplicaciones web con las que vamos a trabajar.
Para los mas interesados, les cuento que internamente Smush.it utiliza una serie de algoritmos para lograr los mejores resultados, estos algoritmos son de publico acceso y son: ImageMagick, pngcrush, jpegtran y gifsicle.
Basta de charla. El script en cuestión:
Originalmente el script fue diseñado por Tyler Halls para el blog de Yahoo, el creo un pequeño sistema que sirve para optimizar automáticamente las imágenes alojadas en Amazon S3. Por mi parte lo único que hice fue descargar la clase que negocia con Smush.it el tratamiento de la imagen, y realizarle una MUY pequeña modificación.
La clase PHP modificada la pueden descargar directamente desde el Fork que realice en Github.
Una vez que descargar la clase que se encuentra en el archivo class.smushit.php simplemente vamos a utilizarla de la siguiente manera:
<?php
include('class.smushit.php');
$img = new SmushIt('http://dominio.com/ejemplo.png');
echo '<strong>filename:</strong> '.$img->filename .'<br />';
echo '<strong>url:</strong> '.$img->url .'<br />';
echo '<strong>url resultado:</strong> '. $img->compressedUrl .'<br />';
echo '<strong>Porcentaje salvado:</strong> '. $img->savings;
?>
Y eso es todo. Desde el objeto vamos a obtener toda la información necesaria para obtener nuestra imagen completamente optimizada. A continuación les comento un poco que información devuelve la clase:
- $img->filename: Nombre del archivo original que enviamos. En este caso devuelve ejemplo.png
- $img->url: La dirección original que enviamos a la hora de crear el objeto.
- $img->compressedUrl: El valor más importante, en esta url vamos a encontrar la imagen optimizada dentro de los servidores de Smush.it. De aqui simplemente podemos copiarla utilizando la función PHP copy.
- $img->savings: El porcentaje que se redujo de la imagen original, un dato estadístico para nosotros.
Como podrán ver, optimizar imágenes con este pequeño script PHP sin perder absolutamente nada de calidad es muy simple, queda en nosotros elaborar algo un poco más complejo para optimizar por ejemplo una carpeta completa de imágenes.
En mi caso, me parece especialmente útil este sistema en aquellos sitios donde usuarios suben imágenes propias, ya sea para su perfil o bien para sus galerías de imágenes, de esta forma nos garantizamos un ahorro considerable en ancho de banda como así también una correcta velocidad de descarga.
Espero que les resulte de utilidad, utilicen los comentarios para cualquier sugerencia o duda 😀
Pdp
14 años ago
Hola Pablo, traté de implementarlo pero tira error la clase en la línea 35. Fatal error: Call to undefined function curl_init() in C:\xampp\htdocs\smush\class.smushit.php on line 35
Falta la funcion curl_init().
Sds, Pablo.
Pablo
14 años ago
Hola Pdp! Te cuento eso no es un error del codigo, sino que no tienes habilitada la funcion desde tu instalación de PHP, para hacer esto simplemente dirigite a donde tengas alojado el archivo php.ini y busca la linea que contenga:
extension=php_curl.dll
Seguramente tenga adelante un punto y coma, con removerlos y reiniciar XAMPP el problema se soluciona y de paso ya tienes esa funcion habilitada que es muy util 😀
Probalo y avisame cualquier inconveniente!
Saludos!
pdp
14 años ago
Espectacular Pablo, funciona muy bien. Gracias!
Fredy
14 años ago
Hola como le va amigo pablo, bueno le comento que e utilizado el codigo pero no veo resultados en las imagenes se ven iguales y con el mismo peso, estoy subiendo una imagen de 2496 x 1664 de un tamaño de 481KB y en el servidor me muestra una imagen del mismo tamaño pero en el peso varia a 493KB, mi pregunta es como funciona el code para que baje el peso pero no la calidad, muchas gracias
javier Garcia
13 años ago
Gracias por tu contribucion. Yo tambien sueñño con esa palicacion, y estoy buscando un socio, con muchas ganas y experiencia, y sobre todo entrega para un proyecto, Si sabes dhtmlx o extjs.com y te interesa lo hablamos
Atrapa Juegos
11 años ago
Saludos, trate de implementar este script y parece funcionar correctamente, el proble esta en que la imagen pasada por smush no se descarga en el servidor remplazando la antigua imagen.
¿está incompleto el script ?
Luis
9 años ago
No entendí como descargar el código…
Mauro Gomez
7 años ago
Hola como estas. Ante todo gracias por compartir.
Pregunta donde debería pegar el código. Como sería el proceso.