Avisos
Vaciar todo

Optimizar imágenes  

 
Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola!!

Tengo una tienda con el pack joomla + virtuemart 1.1.5 con vosotros.

Me gustaría saber como puedo optimizar las imágenes para la web. Porque he intentado poner 8 fotos de 8 artículos y para cargar esa categoría está como 1 minuto cargando.

Tengo que poner 700 artículos y si con 8 me peta, 800 ni te cuento :D.

la imágen pequeña es de 120px de alto 100% de ancho (lo que ocupa la casilla).

Importante: NO puedo hacer un 90x90 (defecto)o 120x120 porque una figura no se puede ver como un cuadrado.

Dejo un ejemplo:

Categoría FIGURAS: http://www.otakusdream.es/index.php?option=com_virtuemart&page=shop.browse&category_id=4&Itemid=71

Artículo: Figura Final Fantasy VII Sephiroth 20 CM

¿Alguien tiene algunda idea?

Muchas Gracias 😀

Citar
Respondido : 13/02/2011 3:54 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Blaster

Usualmente se suele estandarizar a un tamaño de 120x120 esto te facilitará el trabajo con futuras extensiones que se podrían ver mal al mostrar imágenes de diferentes alturas.

Es una buena práctica hacer miniaturas diferentes de la imagen total, ya sea recortando o mostrando sólo una parte de esta, puedes revisar el siguiente video que te explica este concepto:

http://tinyurl.com/49hhbeg

Para el tema de optimización, asegúrate que el formato sea el adecuado, una miniatura no debería pesar más de 10kb.

Saludos.

ResponderCitar
Respondido : 13/02/2011 4:06 pm

Cursos Gratuitos WordPress

Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola,

Después de seguir tu consejo, desactive todos los profuctos con fotos y obviamente va muy rapido al cargar todas las categorias. Intente hacer un ejemplo con un artículo manga (solo 1). (17 años tomo01"Manga").

Puse la fotografía pequeña del artículo con tamaño (3,13 KB) con el programa RIOT, en teoría por lo que me dices no sobrepasa de los 10KB de foto.

Pues si le das a la categoría Manga donde se encuentra este archivo tarda en cargar y solo hay uno que es el primero de todos. NO lo entiendo. ¿La fotografía grande también tiene que tener menos de 10kb?. Si con uno hace esto con 700 :S impossible.

Help!

www.otakusdream.es (lo puedes comprobar tu mismo) 🙁

Gracias

ResponderCitar
Respondido : 13/02/2011 10:31 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Blaster,

He visto el vídeo que recomienda Jhon y francamente me he quedado como estaba, vamos que no me ha llegado a aclarar mucho esto de redimensionar imágenes para la web, y para tu caso particular en VirtueMart, que suele ser un problema común a muchos que ponen en marcha sus Tiendas con VirtueMart pero dejan un poco de lado estas pequeñas cuestiones, importantes para el equilibrio de toda la web.

Te recomiendo inicialmente leas este artículo publicado en el Blog de Webempresa donde ya se trató el tema del redimensionado de imágenes:

- https://www.webempresa.com/blog/47-utilidades-/97-redimensionar-imagenes-para-la-web.html

Tambien te propongo algunos enlaces web donde puedes redimensionar tus imagenes, de forma online:

- Reshade: Redimensiona imágenes y hace zoom en zonas que elijas… Tiene algunos efectos sencillos…
- Resiza it: Redimensiona fotos, recorta fotos, y agrega efectos múltiples adicionales…
- Q. Thumbnail: Redimensiona imágenes fácilmente…
- Snipshot: Redimensiona, corta, agrega efectos y haz balance de colores… Tiene una opción Pro, de cobro mensual…
- Dosize: Cambia el tamaño de la imagen y la enví­a, todo en lí­nea y con sencillez…
- Picresize: Redimensionar una imagen o cortarla nunca fue tan fácil…
- Resize Image O: Cortar, hacer zoom, cambiar dimensiones, todo en lí­nea…
- Resize 2 Mail: Rota imágenes, corta y redimensiona, rapidamente…
- Izhuk: Recorta, rota y redimensiona, además puedes bajarte el software e instalarlo en tu web o usarlo en tu ordenador… (la licencia es gratuita para usarlo en tu ordenador, pero para usarlo en una Web, tiene ciertos costos según tu necesidad, no es nada barato)…
- Resize Pic: Sencillo, limitado, no muy útil que digamos…
- Resizr: Rápido y confiable, redimensiona conservando las proporciones…
- Ezresize: Muy similar a Resize Pic, sencillo y limitado…
- Fix Picture: Ofrece utilidades predeterminadas y algunas de uso avanzado, ideal para principiantes… Tiene dos versiones, html y flash (recomiendo la html)…
- Online I R: Una interfaz demasiado saturada, a pesar de ser tan sencillo es dificil comprenderlo rápido (demasiado 1.0)…
- Resize I O: Interfaz un poco mal diseñada y muy similar al anterior, pero más fácil de entender (muy 1.0)…
- Shrink Pic: Parece que usa el mismo Api que Fix Picture pero más limitado…

Personalmente yo utilizo http://tools.dynamicdrive.com/imageoptimizer/ ya que me permite subir una imagen y obtener diversos resultados en porcentajes de compresión y decantarme por usar aquel que se vea bien pero que reduzca al menos un 30% el peso actual.

Saludos

ResponderCitar
Respondido : 14/02/2011 12:48 am

Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola jmarreros y gnumax.

Muchas gracias por estas respuestas, muy curradas. Después de mirar estos programas y videos. Adjunto dos tipo de imágenes para que me podais decir si con virtuemart sería lo ideal y no me fuera lento al cargar.

Imágen 1

JPG 3.13 KB
Dimensiones 84x120
Ancho 84 píxeles
Alto 120 píxeles
Resolución horizontal: 96 ppp
Resolución vertical: 96 ppp
Profundidad en bits: 24

Inágen 2

JPG 2,37KB
Dimensiones 84x120
Ancho 84 píxeles
Alto 120 píxeles
Resolución horizontal: 96 ppp
Resolución vertical: 96 ppp
Profundidad en bits: 24

Conclusión: Creo que lo que podría fallar aquí sería...

1) ¿Dimensiones por no ser un 90x90 o 120x120?

2) Resolución 96 ppp que debería de ser 72 (eso lo conseguiría si fuera mas pequeña la fotografía supongo)

Duda: Las otras web que están en el mismo sector que el mio, tienen imágenes más grandes. El problema que tengo de hacer miniaturas las fotografias de una figura que ni se puede ver. ¿es problema de virtuemart?

ResponderCitar
Respondido : 14/02/2011 11:06 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Blaster,

El estándar de resolución en web para las imágenes es de 72ppp, no tiene nada que ver con el tamaño de la imagen ni con la compresión de la misma.

Para aclarar conceptos:
Resolución: http://es.wikipedia.org/wiki/Resoluci%C3%B3n_de_imagen
Compresión: http://es.wikipedia.org/wiki/Wikipedia:C%C3%B3mo_hacer_que_las_im%C3%A1genes_pesen_poco
Por ejemplo: jpg es un formato de imagen con pérdida de calidad, por ejemplo una imagen jpg al 99% de calidad pesará mucho, pero al 80% no se apreciará una pérdida de calidad de la misma, pero si una bajada significativa de su peso).

Saludos,

ResponderCitar
Respondido : 14/02/2011 12:01 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola,

Puse la imágen a 72ppp, con tamaño 2,17 KB (2.229 bytes)con 84x120 de dimensiones y sigue tardando en cargar.

¿alguna solución? :'(

ResponderCitar
Respondido : 14/02/2011 3:34 pm
Jordi Sala
 Jordi Sala
Miembro Admin

Hola,

Parece que hay algún plugin que choca. Prueba 1 a 1 (extensiones --> gestor de plugins):

- Desactivar --> plugin System - JCE Utilities 222. Y Cargar nuevamente el sitio web.
- Desactivar --> Media Object. Y Cargar nuevamente el sitio web.
- Desactivar --> Ultimate PNG Fix. Y Cargar nuevamente el sitio web.

Si no lo ves claro los resultados, desactiva los 3 a la vez. Limpia cache del navegador, y cargar el sitio web.

Si esto no ha funcionado, en última instancia:
- Desactivar --> System - Mootools Upgrade. Y Cargar nuevamente el sitio web y verificar que todo funcione correctamente.

Saludos,

ResponderCitar
Respondido : 14/02/2011 4:04 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola,

Después de desactivar lo que me comenta Jordi, la página funciona perfectamente.

Después de meter 200 artículos funcionando correctamente, hoy parece que no funciona se queda bloqueado. He revisado artículo por artículo y todos con 72ppp 120 de altura X de ancho. (En teoría todo correcto).

He desactivado todos los artículos dejando sólo 1 en el apartado figuras (www.otakusdream.es) y se queda como blokeado durante 30 segundos y luego carga ese artículo.

¿Alguna explicación?

Con http://tools.pingdom.com/fpt/ podéis ver como tarda mucho en cargar la categoría.

ResponderCitar
Respondido : 18/02/2011 11:26 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Blaster

Asegúrate de tener los plugins mencionados anteriormente despublicados.
Especialmente el: System - Mootools Upgrade.

Saludos.

ResponderCitar
Respondido : 18/02/2011 3:26 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Adria Sanchez Dueñas
 Adria Sanchez Dueñas
Usuario eminente

Hola

Todos Desactivados. Sigue igual.

- Desactivar --> plugin System - JCE Utilities 222. Y Cargar nuevamente el sitio web.
- Desactivar --> Media Object. Y Cargar nuevamente el sitio web.
- Desactivar --> Ultimate PNG Fix. Y Cargar nuevamente el sitio web.
- Desactivar --> System - Mootools Upgrade. Y Cargar nuevamente el sitio web y verificar que todo funcione correctamente.

ResponderCitar
Respondido : 18/02/2011 4:25 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Blaster

El problema que comentas de lentitud creo puede ser por algún tipo de conflicto, sugiero a parte de despublicar esos plugins revisar otros que te encuentres usando (q no son parte del core de joomla) y despublicarlos. De esa manera podrás depurar y dar con el problema en caso ser un conflicto.

Virtuemart no debería ser tan lento si ya optimizaste las imágenes.

Saludos.

ResponderCitar
Respondido : 18/02/2011 4:46 pm

Cursos Gratuitos WordPress

Mitzuo
 Mitzuo
Usuario activo

hay alguna informacion actualizada , donde se diga como redimenzionar el tamaño adecuado para mis fotos .. no se si me explico bien ...

e instalado phoca gallery pero no se si se puede hacer lo que deseo ..
quiero que al subir mis fotos el componente de phoca me redusca el peso pues cada fotografia pesa 3.33 MB .. Gracias

ResponderCitar
Respondido : 31/05/2013 5:33 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola Mitzuo

En el foro de Phoca explican el proceso
http://www.phoca.cz/forum/viewtopic.php?f=13&t=17125

Sin embargo te recomiendo subir imágenes en la medida de lo posible del tamaño final, 3mb no me parece adecuado y supongo que las dimesiones son mucho mayores de las que mostrarás en la web.

Puedes utilizar algún programa de edición de imagenes para optimizar tus imágenes para la web, incluso puedes realizar el proceso por lotes con programas con Adobe Photoshop (utilizando acciones) o con Adobe Bridge

Saludos.

ResponderCitar
Respondido : 31/05/2013 6:45 pm