Formats de fitxer adequats i mides d'imatge per al disseny web

Trieu el format de la imatge adequada

  • Trieu el format de la imatge adequada
  • Implicacions de pantalles d'alta resoluci³
  • Caracter­stiques de diferents formats d'imatge de r ster

La primera pregunta que haur­eu de fer s si una imatge s, de fet, necess ria per aconseguir l'efecte que esteu desprs. El bon disseny s senzill i tamb donar  sempre el millor rendiment. Si podeu eliminar un recurs d'imatge, que sovint requereix un gran nombre de bytes en relaci³ amb HTML, CSS, JavaScript i altres actius a la p gina, que sempre s la millor estrat¨gia d'optimitzaci³. Dit aix², una imatge ben situada tamb pot comunicar ms informaci³ que mil paraules, de manera que dep¨n de vost¨ per trobar aquest equilibri.

Si alguna vegada trobeu codificar text en un actiu de la imatge, aturar i reconsiderar. La gran tipografia s fonamental per al bon disseny, la marca i la llegibilitat, per² els text-in-imatges ofereixen una experi¨ncia d'usuari pobra: el text no s seleccionable, no es pot cercar, no zoomable, no accessible i no s amable per a dispositius d'alta dpi. L'ºs de fonts web requereix el seu propi conjunt d'optimitzacions, per² aborda totes aquestes preocupacions i sempre s una millor opci³ per mostrar text.

Trieu el format de la imatge correcta #

Per contra, les imatges vectorials estan fetes de l­nies, formes i punts de ruta. La informaci³ dels vectors no s'emmagatzemen en p­xels. Ms aviat, s'emmagatzemen en instruccions de dibuix matem tiques, que s³n completament independents de p­xels. Alex Walker el posa molt b com es refereix a SVG, el format vectorial ms popular per a la web, de la segent manera:

No podeu accedir a MoreCom

Aquest lloc web utilitza un servei de seguretat per protegir-se dels atacs en l­nia. L'acci³ que acabeu de realitzar provocava la soluci³ de seguretat. Hi ha diverses accions que podrien desencadenar aquest bloc, incloent-hi la presentaci³ d'una determinada paraula o frase, una ordre SQL o dades malformades.

Qu¨ puc fer per resoldre aix²?

El contingut visual s l'arma "secreta" quan intenteu comunicar-vos amb el vostre pºblic en l­nia, ja sigui que constru¯u un lloc web magn­fic, educant amb un infografia o utilitzant v­deo per vendre els vostres productes i serveis a la web.

Els formats de fitxers d'imatge ideals depenen de la manera com s'utilitzaran en l­nia. Esteu intentant estalviar espai i millorar els temps de c rrega? Necessiteu una imatge editable d'alta qualitat? Voleu una animaci³?

jpg / jpeg

Hi ha tres formats de fitxer per a gr fics utilitzats a la web: jpg, gif i png. Cadascun d'aquests formats de fitxer es dissenya tenint en compte un prop²sit espec­fic, de manera que s important entendre les difer¨ncies quan les utilitzem als nostres llocs web.

jpg

El format d'imatge JPG va ser dissenyat per emmagatzemar de manera eficient i comprimir imatges realistes i obres d'art (tant en color com en escala de grisos). El format JPG fa una molt bona feina de comprimir imatges amb molts colors i gradacions en colors. Penseu en un JPG com a fotografia altament comprimida.

Quan estalvieu imatges al format JPG, podeu triar el nivell de compressi³ per equilibrar la mida del fitxer i la qualitat de la imatge. La mida del fitxer est  directament relacionada amb la mida real (en p­xels) de la imatge. Una mida de p­xels ms gran sempre donar  lloc a una mida de fitxer ms gran.

gif i png

Els formats d'imatges GIF i PNG utilitzen el que es diu "color ­ndex". Emmagatzemen una paleta de colors minimitzats al fitxer d'imatge i les claus on es troben aquests colors a la imatge. La mida del fitxer per a imatges GIF i PNG es relaciona generalment amb el nombre de colors utilitzats. Els nºmeros de bns comuns s³n: 2, 4, 8, 16, 32, 64, 128, 256.

Els formats d'imatges GIF i PNG s³n ideals per a imatges amb colors plans (sense gradients) i vores durs. Exemples comuns d'aquests tipus d'imatges s³n logotips, logotips i il·lustracions sense gradients.

Utilitzem el bon logotip d'aliments com a exemple. Aix² ha de ser un fitxer d'imatge perqu¨ utilitzem el tipus de fantasia i tamb un gr fic d'una poma al lloc de l'A. Volem que el nostre logotip s'asseu a un color de fons verd clar. Aqu­ teniu el nostre color de fons que estalvem el logotip.

WebP sense p¨rdues suporta transpar¨ncia (tamb coneguda com a canal alfa) a un cost de noms bytes addicionals del 22%. Per als casos en qu¨ la compressi³ RGB amb p¨rdua s acceptable, WebP amb p¨rdues tamb suporta la transpar¨ncia, normalment proporcionant 3 — mida de fitxers ms petits en comparaci³ amb PNG.

Les imatges a la web vnen en molts formats, com ara jpegs, gifs, pngs i molt ms. De fet, hi ha tants acr²nims que mantenen el seguiment d'ells poden ser complicats: no importa descobrir que s el millor format d'imatge que s'utilitzar  al vostre lloc web. Aquesta guia explorar  els avantatges de jpeg vs png vs gif.

‰s important posar una mica de pensament en aquest assumpte, per², ja que els formats que utilitzeu per a les imatges del vostre lloc tenen un impacte. Alguns tipus de gr fics es veuen millor i no ocupen tant espai d'emmagatzematge, per exemple, que es tradueix en un millor rendiment sense p¨rdua de qualitat.

Si el contingut s rei, les imatges s³n la reina igualment poderosa del tron ​​de m rqueting. Saber quin format d'imatge escollir i apagar la web s una part essencial de desenvolupar i mantenir bones pr ctiques de disseny. Tot i que la majoria dels formats d'imatge apareixeran b a la web, entendre les fortaleses i debilitats b siques d'aquests formats d'imatge augmentaran la vostra confian§a en poder decidir qu¨ s millor en totes les situacions. Anem a explorar quatre dels formats d'imatge ms habituals i com triar el format de la imatge correcta cada vegada.

jpg s potser el format d'imatge ms comº que s'utilitza a la web. ‰s molt compatible i compta amb una petita mida de fitxer amb poca p¨rdua de qualitat. JPG es comprimeix utilitzant el que es diu "p¨rdua" compressi³, que significa que sempre hi ha una p¨rdua de qualitat a mesura que estalvieu. Aquesta p¨rdua s especialment visible en text i petits detalls. Coneguts com a "artefactes", aquesta p¨rdua de qualitat apareix com a elements petits i bloquejats. Mireu la difer¨ncia en la comparaci³ segent, especialment al voltant de les vores detallades dels p¨tals de flors.

La compressi³ JPG segueix optimitzada per a fotografies, fent que els artefactes siguin pr cticament invisibles a simple vista. Per² no us oblideu: cada vegada que es reagrupa la fotografia, augmentar  el nombre d'artefactes. Sempre s una bona idea mantenir una c²pia de la vostra foto original s un format de compressi³ "sense p¨rdues".

Desa la informaci³ de DPI (punts per polzada) de JPG i segueix sent un format comº per a l'ºs d'impressi³. No obstant aix², no donen suport a fons transparents i no es poden caplar f cilment amb altres elements. En estalviar imatges fotogr fiques, JPG s sens dubte la vostra millor aposta davant un format sense p¨rdues, com ara PNG. L'exemple segent no mostra un contrast visual notable. La mida del fitxer, per², funciona de mida.

png s un altre format d'imatge molt comº i vers til que es troba a la web avui. Amb una compressi³ "sense p¨rdues", podeu estalviar una PNG i no perdre cap qualitat. Tanmateix, aix² (en la majoria dels casos) produeix una mida de fitxer molt gran. PNG no s una opci³ quan es tracta d'imprimir, ja que no suporta un procs de 4 colors (CMYK). PNG s el millor format per a les captures de pantalla i la majoria dels ordinadors estalviaran captures de pantalla autom ticament com a PNG. La compressi³ PNG est  optimitzada per a imatges gr fiques i imatges que utilitzen menys de 16 colors. Si ens seguiu a Facebook, esteu familiaritzats amb els nostres tipus de text de la setmana. Aquests gr fics es guarden com a PNG. Tingueu en compte la difer¨ncia entre una versi³ PNG i la versi³ JPG.

gif s una for§a creixent a la web ara. Aquest format s una opci³ excel·lent per a imatges de color limitades que han de ser de mida petita. Les fotos i les imatges a tot color guardades en un format GIF donaran nivells elevats de compressi³ amb una p¨rdua notable de qualitat.

Una caracter­stica ºnica del format GIF s la seva capacitat d'animaci³. Tot i que aquesta funcionalitat ha disminu¯t en els darrers anys, l'animaci³ subtil i intencionada amb una imatge GIF pot aportar noms la quantitat d'atenci³ adequada a una trucada a l'acci³ o un altre esdeveniment al vostre lloc.

ACODEZ s una ag¨ncia digital de premis multi internacional, amb oficines a Gurgaon, Bombai, Bangalore i Calicut a l'ndia. Iniciat el 2011, Acodez compta amb ms de 600 clients satisfets repartits en ms de 70 pa¯sos.

ACODEZ ha guanyat ms de 12 premis internacionals, que competeixen amb les millors ag¨ncies del m³n. Aquests reconeixements, presentats per les principals associacions de la indºstria en el testimoni mundial de la nostra creativitat, habilitats t¨cniques i est ndards de qualitat.

Oferim una  mplia gamma de serveis per atendre qualsevol dels vostres requisits de m rqueting web, m²bils o digitals. Ja sigui a travs de la creativitat dels nostres dissenys, l'ºs de les ºltimes tecnologies o l'adher¨ncia a les millors pr ctiques de la indºstria, sempre prosperem per oferir solucions de classe mundial als nostres clients.

A l'ACODEZ, estem obsessionats amb la qualitat. I creiem que la mateixa ra³ ens va fer l'elecci³ ideal per a centenars de clients satisfets a tot el m³n - 70+ pa¯sos a partir d'ara, superar els 6 continents.

Realment enteneu com compren els vostres clients de negocis?

Les decisions de compra B2B traçen cada vegada més viatges complexos, desafiant les pràctiques de llarga durada de moltes organitzacions de vendes.

Realment enteneu com compren els vostres clients de negocis?
Nou itilize bonbon
Við notum smákökur til að tryggja að við gefum þér bestu reynslu á heimasíðu okkar. Með því að nota vefsíðuna samþykkir þú notkun okkar á smákökum.
Permitir cookies