Crear miniaturas de las imagenes web con TimThumb – PHP

TimThumb es un script en PHP que nos permite crear miniaturas de las imagenes de nuestra página web en tiempo real.
Utilizando una caché y así salvándonos del gran tiempo de carga.

Si hay algo que me he dado cuenta en las prácticas es que, no importa lo mucho que optimices el tiempo de carga de tu web si al final no vas a poner ciertos controles a los clientes que vayan a utilizar la misma.

Explico un caso real, el diseñador crea un nuevo diseño para la web X. Después de que el diseño sea aprobado me lo pasa a mí y me encargo de pasar su diseño a HTML/Javascript/CSS.

Como siempre, yo tengo la manía de utilizar todo el CSS que me sea posible antes de poner imágenes…
Así acabo creando figuras con CSS, menus, degradados, sombras o multitud de otras técnicas.

Utilizando esa técnica logramos que nuestro servidor consuma muchísimo menos al cargar un par de lineas de texto en vez de una imagen de tamaño x*y.

Sin embargo, al colgar la página en el servidor y que el cliente escriba los 20 o 30 primeros posts, se puede notar que la página sigue siendo lenta al cargar y las optimizaciones no han tenido gran repercución, después de un estudio rápido, puedes encontrarte con lo siguiente: imágenes de 1mb de tamaño!

En ese momento puedes decir tranquilamente : “quien fue el j*** que hizo esto?“, entonces un programador te dice por lo bajini “el jefe“, si, yo tengo un jefe de esos xD.

Así que lo importante de la anécdota es saber prevenir este tipo de situaciones porque, créeme, cualquier persona que use su PC para navegar por internet no tiene ni idea de cambiar el tamaño de una imagen.

Instalación y uso de timthumb

Así pues, como funciona TimThumb?

Lo único que tendremos que hacer es agregar el script a nuestra carpeta de trabajo y llamarlo desde nuestras etiquetas img.

Un ejemplo podría ser el siguiente:

<img src="timthumb.php?src=/images/tuimagen.jpg&h=150&w=150&zc=1" alt="">

En este caso queremos incluir tuimagen.jpg, sin embargo, en vez de hacerlo de la forma normal lo hacemos mediante el script timthumb agregando la url de la imagen al parametro src.
Si nos fijamos debemos incluir las variables h (altura) y w (anchura)
También tenemos la posiblidad de usar zc para un zoom y q para establecer la calidad.

Mi consejo personal es establecer la anchura y dejar que se adapte la altura automáticamente en relación al ancho, o al revez, pero depende de cada uno.

Al instalar el script nos creará una carpeta de cache con permisos 777, sin embargo, si el servidor no permite hacerlo habrá que crearla manualmente.

Podemos bajar timthumb desde su página en sourceforge

Espero le sea de utilidad!
va muy bien para pasar imágenes de 2000x2000px a 300×300 de forma automática xDD


Así nos han encontrado!

  • como usar TimThumb

2 Responses to Crear miniaturas de las imagenes web con TimThumb – PHP

  1. Maks dice:

    Umm lo e visto en muchísimos themes de wordpress. en mas de un trabajo que e hecho este plugin me a dado problemas……… aunque bueno no es un plugin lo usa el theme… pero según lo que toques deja de mostrar miniaturas…

    Por cierto que pasa con el cache.. o sea.. es un cache como tal o ahí se quedan las miniaturas, ya que e visto que si me cargo el cache las miniaturas no se ven.. así que no es un cache en si.. si no una carpeta que guarda las miniaturas por que sin esta no se auto generan.

  2. Nax dice:

    La verdad es que nunca he trabajado con su cache…

    en teoría lo que debería hacer es buscar la imagen en la cache y si no esta pues crearla…
    pero si dices que deja de mostrarlas ya hay algo más…

    Yo no lo he usado en CMS nunca, las páginas que hacemos llevan un CMS de back-end, el front-end es custom según la web que se desee.

    También puede ser que haya plugins de cache del blog entero y el error te venga por ahí …

    lo que me he fijado es que tiene muchísimas opciones que yo no había usado nunca: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php

    xD

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">