Tipos de gráficos web
Las imágenes suelen ser las que más contribuyen al tamaño total de la página, lo que puede hacer que las páginas sean lentas y caras de cargar. Asegúrese de aplicar las últimas técnicas de optimización de imágenes y de imágenes responsivas para ofrecer una experiencia de usuario rápida y de alta calidad.
Las fotos de alta calidad atraen más a los usuarios que las imágenes borrosas y poco claras. Además, las imágenes nítidas son más atractivas para los usuarios en la miniatura del resultado y aumentan la probabilidad de obtener tráfico de usuarios.
A la hora de elegir el texto alternativo, céntrate en crear un contenido útil y rico en información que utilice adecuadamente las palabras clave y esté en contexto con el contenido de la página. Evite llenar los atributos alt con palabras clave (keyword stuffing), ya que da lugar a una experiencia negativa para el usuario y puede hacer que su sitio se considere spam. Considere también la accesibilidad de su texto alternativo y añada el atributo alt si es necesario, según las directrices W3.
También puede alinear imágenes como URIs de datos. Los URIs de datos proporcionan una forma de incluir un archivo, como una imagen, en línea estableciendo el src de un elemento img como una cadena codificada en Base64 utilizando el siguiente formato:
Imágenes gratuitas para el desarrollo web
Acciones del artículoGuía de tipos y formatos de archivos de imagenEn esta guía, cubriremos los tipos de archivos de imagen generalmente soportados por los navegadores web, y proporcionaremos ideas que le ayudarán a seleccionar los formatos más apropiados para las imágenes de su sitio.Tipos de archivos de imagen comunesA continuación se enumeran los formatos de archivo de imagen más utilizados en la web.
Nota: Los formatos más antiguos, como PNG, JPEG y GIF, tienen un rendimiento inferior al de los formatos más nuevos, como WebP y AVIF, pero gozan de una mayor compatibilidad “histórica” con los navegadores. Los formatos de imagen más nuevos gozan de una popularidad creciente a medida que los navegadores que no los soportan se vuelven cada vez más irrelevantes (es decir, tienen una cuota de mercado prácticamente nula).
La siguiente lista incluye los formatos de imagen que aparecen en la web, pero que deberían evitarse para el contenido web (generalmente esto se debe a que o bien no tienen una amplia compatibilidad con los navegadores, o bien hay mejores alternativas).
Nota: La abreviatura de cada formato de imagen enlaza con una descripción más larga del formato, sus capacidades e información detallada sobre la compatibilidad con los navegadores (incluyendo las versiones que introdujeron el soporte y las características especiales específicas que pueden haberse introducido posteriormente).
El mejor formato de imagen para la web
El equipo de Creative Bloq está formado por un grupo de aficionados al diseño, y ha cambiado y evolucionado desde que Creative Bloq comenzó allá por 2012. El equipo actual de la web está formado por seis miembros a tiempo completo: La editora Kerrie Hughes, la editora adjunta Rosie Hilder, el editor de ofertas Beren Neale, el editor de noticias senior Daniel Piper, el editor de artes digitales y diseño Ian Dean y la redactora Amelia Bamsey, así como una lista de colaboradores independientes de todo el mundo. Los equipos de las revistas 3D World e ImagineFX también colaboran, asegurando que el contenido de 3D World e ImagineFX esté representado en Creative Bloq.
Tipos de diseño
Todos estos años nos hemos ceñido a los formatos JPEG o GIF a la hora de guardar imágenes. Sin embargo, en los últimos tiempos están entrando en escena nuevos actores. Puede que estos nuevos formatos de imagen no sean tan eficaces como los antiguos, pero están siendo aceptados en todo el mundo por el gran número de funcionalidades que ofrecen.
Uno de los aspectos más críticos de las tendencias de diseño web es saber qué tipo de formato de archivo se debe utilizar para las imágenes en el desarrollo y diseño de sitios web. De hecho, todos los formatos de imagen son tan buenos que resulta confuso decidir cuál se ajusta a las necesidades. Además, siempre estamos confundidos cuando se trata de decidir si elegir PNG, o GIF, o JPEG para una imagen en particular. No te preocupes: hemos dado algunas ideas sobre cuál encaja en cada caso. Echa un vistazo a este artículo sobre los mejores formatos de imagen para el diseño web y encontrarás lo que buscas con facilidad. Esto también será útil para el rediseño de sitios web.
Uno de los formatos de imagen más comunes que se utilizan en la web es el Joint Photographic Experts Group (JPG). Fue creado en el año 1986. Lo mejor de esta imagen es que ocupa menos espacio de almacenamiento y es fácil de cargar e incluso de descargar. También ofrece un alto nivel de compatibilidad y el pequeño tamaño del archivo garantiza que no se comprometa la calidad.