Imagenes web

6 minutos de lectura aprox.

Mejores tamaños de imagen y cómo guardar imágenes para la web y Flothemes

Guardar imágenes para la web siempre ha sido un poco de misterio para muchos. Cargar imágenes que tienen un tamaño original pesado de 5000px de ancho, imágenes no optimizadas no sólo creará problemas con la experiencia del usuario en su sitio, sino que también afectará a su estrategia de SEO velocidad de carga, tasa de rebote, ranking, etc. Este artículo está dividido en varias partes que cubren todo lo que necesitas saber sobre cómo preparar tus imágenes para la web.

En la primera parte del artículo enumeraremos los tamaños de imagen recomendados para su sitio de Flothemes. A continuación, el artículo cubrirá cómo inspeccionar las distintas secciones de su sitio web para identificar los tamaños correctos de sus imágenes antes de subirlas a la web. También explicaremos cómo exportar / guardar las imágenes correctamente, para que estén optimizadas para la velocidad.

Las imágenes no optimizadas ralentizan los sitios web. Sitios web lentos = mala experiencia de usuario, menos posibilidades de posicionarse en las búsquedas de Google y, en última instancia, menos consultas y clientes. Guardar tus imágenes con las dimensiones adecuadas y optimizar las imágenes para la web puede ayudar en algunas cosas: Nota: cuando hablamos de tamaño de imagen nos referimos a la dimensión de la imagen en píxeles.

Siga las directrices sobre el tamaño de las imágenes del sitio web que se indican a continuación para mejorar el rendimiento de su sitio y ofrecer una gran experiencia al usuario. Hay dos espacios de color que los ordenadores utilizan para mostrar las imágenes: RGB y CMYK. RGB rojo, verde, azul es el espacio de color estándar para los dispositivos digitales. Por defecto, cualquier imagen creada por una cámara u ordenador se guarda en este perfil de color.

Sin embargo, es posible que tengas imágenes que sean CMYK, un perfil de color utilizado por las impresoras. Antes de utilizar estas imágenes en la web, un programa como Adobe Photoshop puede convertir los colores a RGB para que sus imágenes sean vívidas y brillantes. Al guardar las imágenes para la web, recomendamos que el tamaño del archivo sea inferior a 2MB 2048 kilobytes para mantener la velocidad de carga de la página.

Dicho esto, también queremos que las imágenes sean nítidas y no estén pixeladas. La calidad de la imagen depende de factores como el tamaño final del archivo y la configuración de la compresión. Con los ajustes de compresión adecuados, se puede conseguir una buena calidad de imagen y un tamaño de archivo reducido.

Por lo general, se puede guardar un archivo con un nivel de compresión de imagen entre el 70-80% sin que se vea el pixelado, o los puntos de color individuales. Nota: La cantidad de compresión variará en función de varios factores, como el tamaño y el formato del archivo de la imagen original. Puedes utilizar una herramienta gratuita como Imagify para comprimir aún más el tamaño del archivo.

Hay cuatro formatos de archivo principales para guardar imágenes y gráficos para la web: JPG, PNG, GIF y SVG.

CÓMO – Prepare sus imágenes para la web

Cada formato de archivo tiene sus ventajas, sus inconvenientes y su uso previsto.. Tu imagen o gráfico debe guardarse en un formato concreto en función de si es rasterizado o vectorial. Las imágenes rasterizadas se crean con programas basados en píxeles o se capturan con una cámara o un escáner.

Estas imágenes tienen un número finito de píxeles y pueden perder calidad cuando se amplían. JPG, PNG y GIF son los formatos más adecuados para las imágenes de trama. Los gráficos vectoriales se crean con software vectorial y pueden tener un tamaño infinito sin perder calidad.

SVG y GIF son los más adecuados para las imágenes vectoriales, aunque también puedes guardar un gráfico vectorial como JPG o PNG, aunque pierdes la capacidad de escalar tu gráfico infinitamente. Pero cuando esté listo para poner la imagen en la web en una entrada de blog, como cabecera, etc. , siga los pasos siguientes para hacerla «lista para la web» reduciendo su anchura y comprimiendo su tamaño de archivo.

Imágenes de cabecera terminadas: Las imágenes que sirven como cabecera del sitio web rara vez son más anchas que 1000 píxeles, ya que cualquier cosa más ancha puede no ser visible en todas las pantallas. Las imágenes de cabecera de nuestro blog de clase deben tener 1000 píxeles de ancho y 180 píxeles de alto. Imágenes terminadas en los posts: Las imágenes que puedas incrustar en una entrada del blog no deben ser más anchas que la propia entrada, que es de unos 680 píxeles para nuestro blog de la clase.

Las imágenes más anchas pueden sobrepasar la barra lateral. Una imagen de la primera página de la propuesta de Tim Berners-Lee para la World Wide Web en marzo de 1989 Gran parte de la información de esta sección sobre los fundamentos del uso de imágenes en las páginas web está resumida del excelente libro de Lynda Weinman y Bruce Heavin sobre el tema: Coloring Web Graphics. Para obtener una amplia lista de enlaces relacionados con el diseño web y el color, consulte los enlaces de Lynda Weinman.

La creación de material gráfico en color para la web difiere de los medios impresos porque se publica en las pantallas de los usuarios. El color de la pantalla se compone de elementos de imagen de píxeles de luz proyectada en lugar de tinta sobre papel. Por lo tanto, la publicación de material gráfico en la web, incluyendo el diseño de la página y el color, tiene una serie de características únicas: Las imágenes se insertan en las páginas web con el comando .

Una línea de código típica será algo así: El archivo de imagen está en la misma carpeta que el archivo. htm que hace referencia a él, ya que no hay información adicional sobre el directorio. Este archivo está en formato JPEG. El otro formato de imagen que se utiliza comúnmente en la WWW es el GIF–pronunciado como en jiffyALT especifica las palabras que

Consultor SEO | Web | + posts

Programador reconvertido a consultor SEO. Me gusta automatizar cosas, de hecho, este articulo ha sido generado a partir de otras webs de forma automática.