Estamos trabajando en un sitio web y notamos que las imágenes GIF (100kb - 200kb) se cargan muy lentamente.¿Cómo puedo mejorar los tiempos de carga en un sitio HTML estático?
El sitio es un sitio estático con CSS/HTML.
¿Alguien tiene alguna indicación de por qué las imágenes se pueden cargar lentamente?
¿Usaría JPG para mejorar el rendimiento?
Aquí está el código HTML para esa imagen:
<div><img src="images/mainImg_3.gif">
Se cargan lentamente porque son enormes. 200 KB es un archivo de imagen muy grande. No sé exactamente cuál es la recomendación para las imágenes web, pero es una buena idea mantenerlas por debajo de 50K.
Las imágenes GIF no son muy eficientes para las imágenes fotográficas. Debería experimentar con otros formatos como JPG y PNG para ver si puede obtener la misma calidad con un tamaño de archivo más pequeño. Debería poder reducir el tamaño del archivo bastante manteniendo la calidad.
Otro truco: use las miniaturas. Guarde dos versiones de cada imagen, una del 25% del tamaño (por resolución) de la otra. Los visitantes de su sitio pueden hacer clic en la miniatura si quieren ver más. Esto acelerará los tiempos de carga y reducirá su factura de ancho de banda.
Están sus imágenes tamaño adecuado? Si los muestra en su página web como 300x300 píxeles, asegúrese de que la imagen original tenga el mismo tamaño.
Esto ayuda a duplicar, uno de los datos es menos de descargar, y 2 no requiere potencia de procesamiento adicional para que el navegador cambie el tamaño. Además, la imagen se verá más nítida si es el tamaño exacto.
En cuanto a la diferencia entre GIF y JPG, (a excepción de la transparencia, que JPG no admite), se reduce a lo que contiene su imagen. GIF usa una tabla de colores y un mapa en esa tabla de colores para almacenar la imagen, mientras que JPG usa un algoritmo de compresión. Por lo tanto, si la imagen contiene pocas variaciones de color, obtendrá un tamaño de archivo más pequeño de un GIF. Por el contrario, si tiene una fotografía con muchas variaciones de color, querrá usar un JPG.
Depende de qué tan grande es la imagen, si está visualizando imágenes del tamaño de fondo de pantalla a 100 kb, eso no es tan malo. Si muestra miniaturas de este tamaño, entonces tiene un problema.
Las imágenes JPEG son con pérdida, pero se pueden comprimir con facilidad. Dependiendo de la cantidad de compresión que seleccione, realmente puede reducir el tamaño de las imágenes con JPEG.
leer el siguiente artículo titulado las mejores prácticas para acelerar su sitio web:
también echar un vistazo a YSlow
Se analizará su sitio para usted y donde diga los cuellos de botella pueden ser.
Habilite el almacenamiento en caché de los archivos de imagen (el ejemplo a continuación también agrega el almacenamiento en caché css y js) lo que garantizará que los usuarios no descarguen los archivos dos veces. Si está usando apache 1.3 o 2:
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
es probable que sea una idea razonable para permitir la compresión gzip para HTML y CSS. En Apache 2:
SetOutputFilter DEFLATE
y en Apache 1.3:
mod_gzip_on Yes
El recurso más rápido cargado es siempre el recurso que no necesita ser cargado en absoluto. Es decir. Además de reducir las imágenes a tamaños razonables, debe leer sobre el almacenamiento en caché de HTTP.
Debe indicar a su servidor web que entregue las respuestas con la información de almacenamiento en caché adecuada para que los agentes de usuario puedan reutilizar las versiones locales en caché.
Mark Nottingham escribió un tutorial about HTTP caching. Es un buen punto de partida. Y this is a tutorial sobre la configuración de Apache en el chateo de HTTP.
Debe especificar los atributos de alto y ancho para la etiqueta img, vea a continuación la explicación de las Escuelas W3C de por qué debe hacer esto. Y para obtener más información, consulte http://www.codinghorror.com/blog/archives/000807.html para obtener más técnicas más radicales.
Consejo: Es una buena práctica especificar la altura y anchura de los atributos para una imagen. Si estos atributos están configurados en , el espacio requerido para la imagen se reserva cuando se carga la página. Sin embargo, sin estos atributos, el navegador no conoce el tamaño de la imagen y no puede reservar el espacio apropiado . El efecto será que el diseño de la página cambiará durante la carga (mientras se cargan las imágenes ).
Consejo: ¡No cambie la escala de las imágenes con los atributos de altura y ancho ! Reducir una imagen grande con los atributos de altura y ancho fuerza a un usuario a descargar la imagen grande (incluso si parece pequeña en la página). El método correcto es cambiar la escala de la imagen con un programa, antes de usarlo en una página .
Esto se copia de http://www.w3schools.com/tags/att_img_height.asp
Mira en la herramienta gratuita: Smush It!
Es co-desarrollado por Stoyan stephanov, Nicole Sullivan (de Yahoo!) e incorpora cada bocado para las imágenes de YSlow (de Yahoo!) y los hallazgos de Yahoo Developer Network.
Analizará su (s) imagen (es) y determinará a partir de un conjunto de herramientas del lado del servidor cuál es el tipo de imagen óptimo (por ejemplo, PNG8, PNG24, GIF, JPG, etc.) y también creará la imagen optimizada ... p. incluso si le das una imagen PNG, encontrará el mejor método para comprimirla y "Smush It" a su tamaño de archivo más pequeño posible.
Toma luego la imagen de salida, y luego servir a partir de un() si es posible, preferiblemente en un CDN, con far-future expires headers, con gzip compression.
No estoy seguro de por qué PNG sería más pequeño, dado que utiliza un algoritmo de compresión similar a GIF (De memoria, PNG es LZ77 + Huffman, mientras que GIF es LZW). JPG podría, pero eso se debe a que es un formato con pérdida. – Powerlord
Incluí PNG basado en experiencia personal reciente: estaba creando un avatar para otro sitio y el archivo tenía que ser menor de 15 K. Por alguna razón, JPG no bajaría más de 25K con la calidad más baja, pero PNG tenía 8K con la misma calidad visual. Imagínate ;) –