entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Sprites de Imágenes de forma Dinámica

Buenas Noches, he estado estudiando SEO y una de las característica principal en le posicionamiento es la velocidad de carga de un sitio. Para optimizar el trabajo con imágenes se recomienda el uso de Sprites y hago uso de él para los iconos e imágenes como banner y esas cosas estáticas que cambian poco o nunca. Entonces me surgió la inquietante ya que en la programación todo es posible solo depende del nivel de conocimiento que uno tenga. Así que dirigiendome a los más experimentados les pregunto si existe una forma ya sea con JS o PHP para coger las últimas 5 imágenes insertadas en una carpeta de tu servidor y convertirlas en un Sprite y guardarla en otra carpeta para sprite desde donde lo cargará la página web??
Saludos Dairon

0voto

Peter comentado

También hay que tomar en cuenta que el tamaño de las imágenes siempre tiene que ser el mismo para que el posicionamiento con el CSS no tenga problemas, porque si no, tendrías que hacer variables para todos los tamaños que tengas pensado utilizar en esas imágenes que se suben o bien, recortar las imágenes como tal.

0voto

dairon comentado

lo que tengo pensado haces es hacer un sprite con las últimas cinco fotos de portada subidas a la sección de albumes, genero el esprite cargo el css original del sitio le append el nuevo css con el mismo nombre de clase por ejemplo albimg1,... albimg5 y eso funcionaria como un refresh de css y guardo el nuevo fichero de css con el nombre que enlazo a mi sitio para así mantener bajo el numero de peticiones GET

0voto

white comentado

pero eso no es contenido estático, sino dinámico, estatico son por ejemplos los iconos, banners, imagenes css del sitio web.

http://es.wikipedia.org/wiki/Contenido_din%C3%A1mico

por otra parte al hacer esto es posible que tengas problemas cuando se edite un articulo en tu sitio y sea precisamente esa imagen, tendrías que volver a generar un sprite, entonces estarias usando mas recursos de tu servidor y eso no suena muy bien.

Yo creo que una mejor opcion es comprimir tus imagenes al momento de subirlas para reducir su tamaño. podrias usar alguna libreria como:

http://nielse63.github.io/php-image-cache/

0voto

carlossevi comentado

Suscribo lo dicho por white y añado a la lista de problemas los generados porque el navegador conserve la imagen en caché ya que como dices no va a cambiar de nombre.

0voto

dairon comentado

entonces que me recomiendan ??

0voto

white comentado

Comprimir las imagenes al subirlas, definiendo su calidad con un 90% y guardarlas como jpg podria ayudar, tambien puedes enviar las cabeceras: ´Last-modified´, ´cache-control´ y ´expires´. Si el navegador tiene en cache la imagen podrias enviar un 304.

http://ernieleseberg.com/php-image-output-and-browser-caching/
http://dtbaker.net/web-development/how-to-cache-images-generated-by-php/

0voto

dairon comentado

de todas formas creo que puedo usar el sprite para secciones como las portadas de albumes que se insertaría uno semanalmente ??

0voto

white comentado

Lo mismo que dije arriba, estarias complicandote demasiado, el navegador ya se encarga de por si en hacer cache de las imagenes, por que entonces usar mas recursos en tu servidor? hay varias contras de hacer esto en contenido dinamico.
solo por poner un ejemplo, supongamos que un buscador o un web crawler quiere indexar tu sitio y tomar las imagenes de un articulo/album, estaria indexando un articulo con una imagen que es un sprite, no creo se vea agradable que la indexe de esa forma no?

1 Respuesta

0voto

jsstoni Puntos940

Si pero deberías aplicar cierta lógica con lo mas básico PHP y librería GD.

1 ) Carga todo el contenido de la carpeta en un arreglo donde estarán las imágenes.
2 ) Recorre el arreglo con la ruta de la imágenes para tratar el tamaño de dichas imágenes
3) teniendo cada ruta de las imágenes se crea el cuadro (x y) (ancho alto);
4) Para posicionar cada una de las imágenes se usa el tamaño (x & y) de cada una para posicionar.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta