Duda, calidad en header

[dark_sargon]

Un saludo. Estoy haciendo un sitio Web estilo blog.
El sitio lleva un header siempre visible. Me gustaría dejarlo de buena calidad pero no sé si sea buena idea debido a las demoras de carga de éste.

Ocupa 566KB en PNG, 224KB en GIF y 227KB en JPG. Todos en la mejor calidad posible.

¿Podrían darme su opinión acerca de cual sería mejor? ¿Alguna experiencia por contar?

Muchas gracias.

[‭lipman]

Hombre, si son iguales, pon el de menos peso.

Todavia quedan muchos paises a los que internet no les va tan rápido como quisieran, y además, una página que tarda poco en cargar siempre va a ser más atractiva que lo contrario.

Un saludo

[#!drvy]

El PNG ocupa la lecheeee. Un JPG comprimido bien (Calidad 5/10 en Photoshop) no debería darte ningún problema.

Yo te recomiendo que utilices Yahoo! Smush.it, es un servicio que elimina los bytes innecesarios y optimiza la imagen.

Código (url) [Seleccionar] Expandir

http://www.smushit.com/ysmush.it/

Saludos

[dark_sargon]

Hombre, si son iguales, pon el de menos peso.

Claramente no son iguales. Por eso tenía la duda

Todavia quedan muchos paises a los que internet no les va tan rápido como quisieran, y además, una página que tarda poco en cargar siempre va a ser más atractiva que lo contrario.

Tienes razón y también algunos modems 3G no proveen buena velocidad en transmisión.

El PNG ocupa la lecheeee. Un JPG comprimido bien (Calidad 5/10 en Photoshop) no debería darte ningún problema.

Yo te recomiendo que utilices Yahoo! Smush.it, es un servicio que elimina los bytes innecesarios y optimiza la imagen.

Código (url) [Seleccionar] Expandir

http://www.smushit.com/ysmush.it/

Saludos

Voy a probarlo a ver cómo resulta.

Lo que trataba de hacer era poner en la balanza la carga rápida vs. una mejor calidad. Quería saber qué prefiere un usuario aunque por mi parte y con sus respuestas es bueno sacrificar un poco de calidad  a cambio de un servicio más eficiente.

Muchas gracias a los dos.

[[u]nsigned]

Lo que trataba de hacer era poner en la balanza la carga rápida vs. una mejor calidad. Quería saber qué prefiere un usuario aunque por mi parte y con sus respuestas es bueno sacrificar un poco de calidad  a cambio de un servicio más eficiente.

Al usuario promedio le resulta mas agradable un sitio liviano que cargue rapido, y lo verdaderamente importante no es el aspecto del sitio, sino la calidad de su contenido, ejemplos: Google es suumamente sobrio, lo mismo que facebook.

Tambien existen plugins (de jQuery por ejemplo) que evitan que todas las imagenes se carguen de una sola vez, en su lugar se van cargando segun sea necesario.

Saludos

[WHK]

PNG para toda la vida, todo depende del lugar de la imágen, trasparencias, etc.

La estructura del archivo png es muy diferente al jpg y por ese motivo hay imágenes que pueden quedar mas livianas en png que jpg, prueva con photoshop y dale un jpg al 90% y luego un png.

Gif para nada porque la indexación de colores hacer que pierda colores.

En algunos dispositivos móviles como tablets se ve mucho mejor el jpg que el png, pero por lo contrario un monitor de alta resolución se verá mucho mas excelente un png que un jpg, además hay algunos dispositivos que toman los jpg de los sitios webs y los recomprimen para una redenderización mas rápida y pierde toda la calidad.

En resumidas cuentas terminé usando png para casi todo, nunca vas a gastar mas de 500 o 600kb en imágenes y eso es como medio segundo de carga a lo mucho un segundo y no tendrá que volverlos a cargar, si les pones jpg no verás mucho la diferencia de carga y menos si es solo un header.

El header es la cara del sitio WEB y por ende debe ser lo que mejor se vea, vale la pena gastar unos 100 o 200kb de mas y ponerle un png en ves de un jpg.
Algunos usan svg y resulta la misma calidad del png y mas liviano pero internet explorer no se ha adaptado al standard mundial aun.

Lo otro que puedes hacer es poner todas las imágenes del theme en una sola imágen y luego en ves de usar tags <img> usas <div> con background-image y juegas con las posiciones background-position igual como lo hace facebook, google, etc.

Por ejemplo mira esto:
http://www.google.cl/intl/es/options/
solo usa esta imágen:
http://www.google.cl/options/i13.png

De esta forma evitas que el explorador tenga que hacerle 50 peticiones al servidor para cáda imágen y solo hace una y si te fijas google no usó jpg sino png para mantener la calidad de los pixeles a pesar de no tener transparencia.

[[u]nsigned]

Perdon si desvio el tema, pero esto tambien lo hace jQuery UI con e iconset, como se llaman estas 'plantillas' o tecnica de iconos en un solo archivo? Icon vector o algo asi, no?

[dark_sargon]

En el caso de mi sitio Web no veo la necesidad de usar jQuery. Tal vez necesite una que otra animación pero es posible hacerlo sin esta biblioteca.

Muchas gracias por la información WHK. Probé con JPG y PNG. Con JPG consigo una calidad aproximada a la del PNG así que lo dejaré en JPG. Es verdad lo que dices, no siempre es igual. Y con GIF no hay caso, la paleta es muy reducida.

Había visto animaciones PNG con los frames en un único archivo pero no se me había ocurrido lo que comentas. También voy a aplicarlo.

Gracias por la ayuda.

[#!drvy]

Perdon si desvio el tema, pero esto tambien lo hace jQuery UI con e iconset, como se llaman estas 'plantillas' o tecnica de iconos en un solo archivo? Icon vector o algo asi, no?

Se llaman sprites.

Para mas información: Google -> CSS Sprite.

Saludos

[[u]nsigned]

Muchas gracias por el dato drvy | BSM