Formatos de ficheiro axeitados e tamaños de imaxes para deseño web

Escolla o formato de imaxe correcto

  • Escolla o formato de imaxe correcto
  • Implicaci³ns de pantallas de alta resoluci³n
  • Caracter­sticas de diferentes formatos de imaxe r¡ster

A primeira pregunta que debes preguntar se unha imaxe , de feito, necesaria para conseguir o efecto que est¡s despois. O bo dese±o sinxelo e tamn sempre producir¡ o mellor rendemento. Se pode eliminar un recurso de imaxe, que moitas veces require unha gran cantidade de bytes en relaci³n a HTML, CSS, JavaScript e outros activos na p¡xina, ent³n que sempre a mellor estratexia de optimizaci³n. Dito isto, unha imaxe ben colocada tamn pode comunicar m¡is informaci³n que mil palabras, polo que depende de ti atopar ese equilibrio.

Se algunha vez atopa a codificaci³n de texto nun activo de imaxe, parar e reconsiderar. A gran tipograf­a fundamental para o bo dese±o, a marca e a lexibilidade, pero os textos en imaxes proporcionan unha pobre experiencia de usuario: o texto non seleccionable, non se pode buscar, non zoomable, non accesible e non amigable para dispositivos de alta DPI. O uso de fontes web require o seu propio conxunto de optimizaci³ns, pero aborda todas estas preocupaci³ns e sempre unha mellor opci³n para mostrar texto.

Escolla o formato de imaxe correcto #

Por contraste, as imaxes vectoriais est¡n feitas de li±as, formas e puntos de cami±o. A informaci³n dos vectores non se almacenan en p­xeles. Pola contra, est¡n almacenados en instruci³ns de debuxo matem¡tico, que son completamente independentes de p­xeles. Alex Walker ponse moi ben cando se refire a SVG, o formato vectorial m¡is popular para a web, do seguinte xeito:

Non podes acceder a MediadCom

Este sitio web est¡ a usar un servizo de seguridade para protexerse dos ataques en li±a. A acci³n que acaba de realizar desencadeou a soluci³n de seguridade. Hai varias acci³ns que poden desencadear este bloque, inclu­ndo a presentaci³n dunha determinada palabra ou frase, un comando SQL ou datos mal formados.

Que podo facer para resolver isto?

O contido visual a "arma secreta" cando est¡s a comunicarte co teu pºblico en li±a, xa sexa a construci³n dun fermoso sitio web, educando cunha infograf­a ou usando o v­deo para vender os teus produtos e servizos na web.

Os formatos de ficheiro de imaxe ideal dependen da forma en que se usar¡n en li±a. Est¡s a tentar aforrar espazo e mellorar os tempos de carga? ¿Necesitas unha imaxe editable de alta calidade? Queres unha animaci³n?

JPG / JPEG

Hai tres formatos de ficheiro para gr¡ficos utilizados na web: jpg, gif e png. Cada un destes formatos de ficheiro est¡ dese±ado con un prop³sito espec­fico en conta, polo que importante comprender as diferenzas cando os usamos nos nosos sitios web.

jpg

O formato de imaxe JPG foi dese±ado para almacenar de forma eficiente e comprimir imaxes e obras de arte realistas (tanto en cor como en gryscale). O formato JPG fai un bo traballo de comprimir imaxes con moitas cores e gradaci³ns en cores. Pense nun JPG como unha fotograf­a altamente comprimida.

Ao gardar imaxes no formato JPG, pode escoller o nivel de compresi³n para equilibrar o tama±o do ficheiro e a calidade da imaxe. O tama±o do ficheiro est¡ directamente relacionado co tama±o real (en p­xeles) da imaxe. Un tama±o de p­xel m¡is grande sempre producir¡ un tama±o de ficheiro m¡is grande.

gif e png

Os formatos de imaxe GIF e PNG usan o que se chama "­ndice de cor". Eles almacenan unha paleta de cores minimizadas no ficheiro de imaxe e teclas a onde se deben situar esas cores na imaxe. O tama±o do ficheiro para imaxes GIF e PNG est¡ xeralmente relacionado co nºmero de cores empregadas. Os nºmeros de cores de cores son: 2, 4, 8, 16, 32, 64, 128, 256.

Os formatos de imaxe GIF e PNG son ideais para imaxes con cores planas (sen gradientes) e bordos duros. Exemplos comºns destes tipos de imaxes son logotipos, logotipos e ilustraci³ns sen gradientes.

Imos usar o bo logotipo de comida como exemplo. Isto ten que ser un ficheiro de imaxe porque estamos a usar o tipo de fantas­a e tamn un gr¡fico dunha maz¡ no lugar do a. Queremos que o noso logotipo sntese nunha cor de fondo verde claro. Aqu­ est¡ a nosa cor de fondo que estamos gardando o logotipo.

WEBP sen perdas admite a transparencia (tamn co±ecida como Alpha Channel) a un custo de s³ 22% de bytes adicionais. Para casos, cando a compresi³n de RGB perdida aceptable, a WebP perdida tamn admite a transparencia, normalmente proporcionando 3 — tama±os de arquivos menores en comparaci³n con PNG.

As imaxes na web ve±en en moitos formatos, como jpegs, gifs, pngs e moito m¡is. De feito, hai tantos acr³nimos que o seguimento deles pode ser complicado: nunca importa que o mellor formato de imaxe para usar no seu sitio web. Esta gu­a explorar¡ as vantaxes de JPEG vs PNG vs GIF.

‰ importante po±er algºn pensamento sobre este asunto, con todo, xa que os formatos que usa para as imaxes do seu sitio te±en un impacto. Algºns tipos de gr¡ficos son mellor e non ocupan tanto espazo de almacenamento, por exemplo, que se traduce nun mellor rendemento sen perda de calidade.

Se o contido rei, as imaxes son a ra­±a igualmente poderosa no trono de marketing. Sabendo que formato de imaxe para escoller e f³ra da web unha parte esencial do desenvolvemento e mantemento de boas pr¡cticas de dese±o. A­nda que a maior­a dos formatos de imaxe aparecer¡n ben na web, a comprensi³n dos puntos fortes e dbiles b¡sicos destes formatos de imaxe aumentar¡ a sºa confianza en poder decidir o que mellor en cada situaci³n. Exploremos catro dos formatos de imaxe m¡is comºns e como elixir o formato de imaxe correcto cada vez.

JPG quizais o formato de imaxe m¡is comºn usado na web. ‰ moi compatible e posºe un pequeno tama±o de ficheiro con pouca perda de calidade notable. Os JPG est¡n comprimidos usando o que se chama compresi³n "perdida", o que significa que sempre hai unha perda de calidade a medida que garda. Esta perda especialmente visible en texto e pequenos detalles. Co±ecidos como "artefactos", esta perda de calidade aparece como elementos pequenos e bloqueos. Mire a diferenza na seguinte comparaci³n, especialmente en torno aos bordos detallados dos ptalos de flores.

A compresi³n de JPG a­nda est¡ optimizada para fotograf­as, facendo que os artefactos sexan pr¡cticamente invisibles a simple vista. Pero non te esquezas: cada vez que a fotograf­a re-gardada, o nºmero de artefactos aumentar¡. Sempre unha boa idea manter unha copia da tºa foto orixinal un formato de compresi³n "sen perdas".

Gardar a informaci³n de DPI (puntos por pulgada) de JPG e a­nda un formato comºn para o uso de impresi³n. Non obstante, non admiten fondos transparentes e non poden ser facilmente en capas con outros elementos. Ao gardar imaxes fotogr¡ficas, JPG definitivamente a sºa mellor aposta fronte a un formato sen perdas, como PNG. O exemplo a continuaci³n mostra ningºn contraste visual notable. O tama±o do ficheiro, con todo, dobra de tama±o.

PNG outro formato de imaxe moi comºn e vers¡til que se atopa na web hoxe. Con maior compresi³n "sen perdas", pode gardar un PNG e non perder ningunha calidade. Non obstante, isto (na maior­a dos casos) obtn un tama±o de ficheiro moi grande. PNG non unha opci³n cando se trata de imprimir, xa que non admite un proceso de 4 cores (CMYK). PNG o mellor formato para capturas de pantalla e a maior­a das computadoras gardar¡n as capturas de pantalla automaticamente como PNG. A compresi³n PNG est¡ optimizada para imaxes gr¡ficas e imaxes que utilizan menos de 16 cores. Se nos segue en Facebook, est¡ familiarizado coas nosas tipograf­as da semana. Estes gr¡ficos son gardados como PNG's. Observe a diferenza entre unha versi³n PNG e a versi³n JPG.

GIF unha forza crecente na web agora. Este formato unha excelente opci³n para imaxes de cores limitadas que deben ser de tama±o pequeno. As fotos e as imaxes de cor completa gardadas nun formato GIF producir¡n altos niveis de compresi³n cunha perda notable de calidade.

Unha caracter­stica ºnica do formato GIF a sºa capacidade de animar. A­nda que esta funcionalidade diminu­u nos ºltimos anos, a animaci³n sutil e intencionada cunha imaxe GIF pode traer a cantidade correcta de atenci³n a unha chamada a acci³n ou outro evento no seu sitio.

Acodez unha axencia dixital premiada multi-internacional, con oficinas en Gurgaon, Mumbai, Bangalore e Calicut na India. Comezado en 2011, Acodez ten m¡is de 600 clientes satisfeitos estendidos por m¡is de 70 pa­ses.

Acodez ga±ou m¡is de 12 premios internacionais, competindo coas mellores axencias do mundo. Estes reco±ecementos, presentados polas principais asociaci³ns industriais do testemu±o do mundo a nosa creatividade, habilidades tcnicas e est¡ndares de calidade.

Ofrecemos unha gran variedade de servizos para atender a calquera dos seus requisitos de mercadotecnia web, m³bil ou de marketing dixital. Sexa a travs da creatividade dos nosos dese±os, uso das ºltimas tecnolox­as ou adherencia ¡s mellores pr¡cticas da industria, sempre prosperamos para entregar soluci³ns de clase mundial aos nosos clientes.

en Acodez, estamos obsesionados con calidade. E n³s cremos que o mesmo motivo nos fixo a opci³n ideal para centos de clientes satisfeitos en todo o globo - 70 pa­ses a partir de agora, a travs de todos os 6 continentes.

¿Comprende realmente como compran os seus clientes comerciais?

As decisións de compra B2B traen cada vez máis viaxes complexas, desafiando as prácticas de longa duración de moitas organizacións de vendas.

¿Comprende realmente como compran os seus clientes comerciais?
Usamos cookies
Usamos cookies para garantir que che damos a mellor experiencia no noso sitio web. Ao usar o sitio web de acordo co uso de cookies.
Permitir cookies