Mejores prácticas para el tamaño de las imágenes del sitio web
Contenidos
Tengo más de 10 años de experiencia en la creación de sitios web de fotografía, y habitualmente tengo que encontrar el equilibrio adecuado entre la creación de un impacto visual impresionante y la elaboración de una experiencia de sitio web rápida y fácil de usar.
En esta guía detallada, te enseñaré todo lo que necesitas saber sobre el tamaño y la compresión de las imágenes antes de subirlas a tu sitio web, qué herramientas utilizar, cómo probar la velocidad de tu sitio y mucho más.
Encontrará consejos directos y prácticos sobre cómo optimizar las imágenes para la web y cómo mejorar los resultados de rendimiento de su sitio rápidamente, con montones de ejemplos y recursos, y una completa sección de preguntas frecuentes al final.
El rendimiento del sitio web se ha convertido en los últimos años en un factor esencial para el SEO y la experiencia del usuario, ya que la velocidad de conexión ha mejorado mucho. Cualquier retraso en los tiempos de carga de las páginas puede hacer que los visitantes de su sitio web pierdan interés y se marchen.
Todo empieza por averiguar las dimensiones correctas de las imágenes necesarias para tus páginas, para poder prepararlas mejor en tu ordenador primero. Subir imágenes de gran tamaño a tu sitio, sin tener en cuenta el tamaño real al que se utilizan, es lo que provoca grandes problemas de rendimiento.
Tamaño de la imagen en pantalla completa del sitio web
La suma de los kilobytes de tamaño de transferencia de todas las imágenes externas solicitadas por la página. Una imagen externa se identifica como un recurso con las extensiones de archivo png, gif, jpg, jpeg, webp, ico o svg o un tipo MIME que contenga imagen.
La suma de los kilobytes de tamaño de transferencia de todos los scripts externos solicitados por la página. Un script externo se identifica como un recurso con las extensiones de archivo js o json o un tipo MIME que contiene script o json.
La suma de los kilobytes de tamaño de transferencia de todos los recursos no identificados solicitados por la página. Un recurso no identificado es aquel que no coincide con un script, una fuente, una imagen, una hoja de estilo, un archivo XML, un vídeo, un documento HTML o un archivo de texto plano conocidos.
El número de todos los recursos no identificados solicitados por la página. Un recurso no identificado es aquel que no coincide con un script, fuente, imagen, hoja de estilo, archivo XML, vídeo, documento HTML o archivo de texto plano conocido.
Hoja de trucos sobre el tamaño de las imágenes del sitio web
Te des cuenta o no, juzgas cada sitio web por su atractivo visual. Y sólo se tarda 0,05 segundos en formarse una opinión. Eso significa que la imagen principal (la primera foto, gráfico o vídeo que se ve) tiene que ser lo suficientemente llamativa como para que la gente siga desplazándose por el sitio.
Esta guía le explicará cómo mejorar su sitio web con la imagen principal perfecta, desde la elección de un gráfico inspirado en las últimas tendencias de diseño hasta la garantía de que su imagen tiene el tamaño óptimo. También veremos ejemplos de imágenes principales para que te sirvan de inspiración para tu propio sitio web. Prepárate para disfrutar del diseño.
En diseño web, una imagen principal es la primera foto, gráfico, ilustración o vídeo que se ve en una página web. Suele incorporar una imagen y un texto para transmitir el mensaje principal de la empresa. Las imágenes principales se sitúan por encima del pliegue y suelen incluir una llamada a la acción (CTA) que anima a los usuarios a profundizar en el sitio web. El objetivo de esta imagen es añadir energía y emoción a una página. Debe mostrar el estilo de su marca, compartir el propósito de su sitio y hacer que la gente se anime a explorar.
Cambiar el tamaño de la imagen para el sitio web
Aunque es más bien el mito de la relación texto-imagen el que tiene la piel de gallina, el tema del peso de las imágenes en una campaña de correo electrónico ha surgido regularmente. Por supuesto, le hice la misma pregunta a Thomas, nuestro espléndido diseñador e integrador de correos electrónicos. Y entonces, bueno, mi pequeño Thomas se molestó mucho (de hecho, es bastante alto).
Alguna vez has abierto una newsletter en tu teléfono 3G (no todos tenemos el privilegio del 4G, vale) y ha tardado unos segundos en mostrarse. Es exasperante, ¿verdad? No me mientas, ¡te veo haciéndolo! Hop, levantamos la vista al cielo, si tenemos suerte, acaba cargando… o no y dejamos el email, o peor, lo borramos. Y me diréis, ¿qué tiene que ver esto con el peso de las imágenes? No, no me vas a preguntar eso, porque tengo fe en ti: ¡ya lo sabes!
Como recordatorio (por si acaso), cuanto más pesada sea una imagen, más tiempo tardará en cargarse y, por tanto, en mostrarse. En cambio, el texto se muestra mucho más rápido, ya que pesa sólo unos pocos bytes. Así pues, el primer impacto del peso de una imagen en un emailing será el tiempo de visualización de dichas imágenes, especialmente con una red bif bof. Una buena razón para limitar el peso (o incluso el número) de las imágenes.
