Principal Disseny Gràfic Com reduir la mida del fitxer GIF per a un millor rendiment del lloc web

Com reduir la mida del fitxer GIF per a un millor rendiment del lloc web



Què saber

  • Retalla l'espai addicional al voltant de la imatge per reduir-ne les dimensions en píxels. Quan prepareu el GIF, reduïu-ne les dimensions de sortida.
  • Redueix el nombre de colors de la imatge. Per als GIF animats, reduïu el nombre de fotogrames.
  • Eviteu tramades i entrellaçats. Si el vostre programari té una opció amb pèrdua per desar GIF, això reduirà significativament la mida del fitxer.

Aquest article explica les regles generals que cal tenir en compte per reduir la mida dels fitxers GIF al vostre lloc web perquè les imatges es carreguin més ràpidament i el vostre lloc web funcioni de manera més eficient.

Com reduir la mida del fitxer GIF per a un millor rendiment del lloc web

Per fer que el vostre GIF sigui el més eficient possible:

  1. Retalla qualsevol espai addicional al voltant de la imatge. Reduir les dimensions de píxels d'una imatge és la manera més eficaç de reduir la mida del fitxer. Si feu servir Photoshop, el Retallar La comanda funciona bé per a això.

  2. Quan prepareu una imatge GIF, reduïu les dimensions de sortida. Cada programa d'edició de gràfics ofereix diferents ordres per canviar la mida.

  3. Redueix el nombre de colors de la imatge. Els GIF només mostren 256 colors, però si la vostra imatge només en té uns quants, reduïu el nombre de colors de totes maneres. Quan reduïu els colors als GIF, obteniu la millor compressió quan els colors del nombre s'estableixen en la més petita possible d'aquestes opcions: 2, 4, 8, 16, 32, 64, 128 o 256.

  4. Redueix el nombre de fotogrames de la imatge per als GIF animats. Eviteu animacions inútils, en general. L'excés d'animació augmenta el temps de descàrrega de la pàgina web i molta gent la distraeix.

    com reproduir la vostra pròpia música a gta 5 xbox one
  5. Si utilitzeu Photoshop , creeu un fitxer GIF utilitzant el Exporta com a element del menú. Seleccioneu Dossier > Exporta com a . Quan s'obri el menú, seleccioneu GIF com a format de fitxer i reduir les dimensions físiques (amplada i alçada) de la imatge.

  6. Si utilitzeu Adobe Photoshop Elements, seleccioneu Dossier > Desa per a la web . Aquest procés obre el Desa per a la web quadre de diàleg que també es troba a Adobe Photoshop a Dossier > Exporta > Desa per al web (heretat) . Quan s'obri, apliqueu tramades, reduïu el color i modifiqueu les dimensions físiques de la imatge.

    com fer captures de pantalla a Snapchat sense que la gent ho sàpiga
  7. Eviteu el dithering. Dithering pot millorar algunes imatges, però augmenta la mida del fitxer. Si el vostre programari ho permet, utilitzeu un nivell inferior de tramado per estalviar bytes addicionals.

  8. Alguns programes tenen una opció amb pèrdues per desar GIF. Aquesta opció pot reduir significativament la mida del fitxer, però també redueix la qualitat de la imatge.

  9. No utilitzeu entrellaçat. L'entrellaçat sol augmentar la mida del fitxer.

  10. Tant Photoshop com Photoshop Elements mostren el temps de descàrrega. No hi facis cas. Es basa en l'ús d'un mòdem de 56k. Apareix un número més vàlid si seleccioneu un mòdem per cable al menú desplegable.

Imatges GIF i la web

Les imatges GIF no són una solució única. Les imatges GIF tenen un màxim de 256 colors, el que significa que podeu esperar una degradació severa de la imatge i del color si no aneu amb compte.

El format de fitxer GIF, en molts aspectes, és un format heretat que es remunta als primers dies del web. Abans de la introducció del format GIF, les imatges web eren en blanc i negre i es comprimien amb el format RLE. Els GIF van aparèixer per primera vegada l'any 1987 quan Compuserve va llançar el format com a solució d'imatge web. En aquell moment, el color acabava de sorgir a l'escriptori i s'accedia a la web mitjançant mòdems connectats a la línia telefònica. Aquesta nova infraestructura va crear la necessitat d'un format d'imatge que mantingués les imatges prou petites per ser lliurades, a través d'una línia telefònica, a un navegador web en poc temps.

Les imatges GIF són ideals per a gràfics de vores nítides amb una paleta de colors limitada, com ara un logotip o un dibuix de línies. Tot i que el format GIF es pot utilitzar per a fotografies, la paleta de colors reduïda introdueix artefactes a la imatge. Tot i així, el Moviment Glitch Art i l'auge de la cinemagraph han despertat un renovat interès pel format GIF.

Preguntes freqüents
  • Com puc dimensionar un GIF emoji per a Discord?

    Quan carregueu un GIF a Discord, ajustarà automàticament la imatge a 128x128 píxels si cal. Tot i que Discord permet compartir imatges i altres fitxers de fins a 8 MB (o més amb una subscripció a Nitro), el límit de mida dels emojis és de 256 kb.

  • Com comprimir un GIF sense perdre qualitat?

    La manera més senzilla de comprimir un GIF sense afectar la qualitat és utilitzar la funció de compressió pròpia de l'Explorador de fitxers . Alguns programaris de compressió de tercers, com WinZip , també es poden utilitzar per comprimir GIF sense reduir la seva qualitat visual general.

    quin RAM té el meu ordinador
  • Com puc combinar diversos GIF en un sol GIF?

    Feu servir un programari d'edició d'imatges com Photoshop, seleccioneu Dossier > Importar > Marcs de vídeo a capes i tria tots els GIF que vulguis combinar. Seleccioneu tots els fotogrames d'animació del primer GIF i, a continuació, copieu-los seleccionant-los Finestra > Animació . A continuació, aneu al GIF següent, trieu on voleu inserir el GIF anterior i, a continuació, enganxeu els fotogrames copiats. Repetiu-ho amb altres GIF que vulgueu afegir i, a continuació, exporteu la fusió acabada quan hàgiu acabat.

Articles D'Interès

L'Elecció De L'Editor

Com saps si s'ha llegit el teu missatge directe d'Instagram?
Com saps si s'ha llegit el teu missatge directe d'Instagram?
Tot i que Instagram va començar com una simple aplicació per compartir fotos, s'ha convertit en una plataforma molt flexible amb diverses funcions potents, entretingudes i divertides d'utilitzar. Una d'aquestes funcions és la funció de missatges directes (DM), afegida a finals de 2013. Des de llavors, els missatges directes
El millor programari OCR gratuït
El millor programari OCR gratuït
El reconeixement òptic de caràcters us ajuda a convertir imatges amb escriptura en un format de text que podeu compartir i editar, igual que els PDF. Tenir a la vostra disposició els vostres passaports, factures, extractes bancaris o qualsevol document imprès en forma digitalitzada pot estalviar
Les millors combinacions de mòdem/encaminador per cable del 2024
Les millors combinacions de mòdem/encaminador per cable del 2024
Una bona combinació de mòdem/encaminador per cable és senzill de configurar, estalvia diners i us ofereix Wi-Fi a tota la vostra llar. Els nostres experts van provar algunes de les millors opcions.
Com reflectir Android al televisor (connecteu el vostre telèfon sense fil)
Com reflectir Android al televisor (connecteu el vostre telèfon sense fil)
Els telèfons i tauletes Android es poden connectar als televisors sense fil. Descobriu com la duplicació de pantalla a Android us permet veure les vostres aplicacions a la pantalla gran.
Revisió de l'HTC Touch Diamond
Revisió de l'HTC Touch Diamond
Abans que arribés l’iPhone semblava que l’objectiu principal de tots els fabricants era produir el telèfon més prim, lleuger i petit. Ara, però, la facilitat d’ús és l’ordre principal del dia i, malgrat els seus esforços, els d’HTC
Com es desactiven els anuncis a Windows 10 (tots ells)
Com es desactiven els anuncis a Windows 10 (tots ells)
Aquest tutorial explica com desactivar tot tipus d'anuncis (anuncis) a Windows 10. Hi ha diversos passos que heu de realitzar.
Desactiveu l'acceleració de maquinari a Firefox Quantum
Desactiveu l'acceleració de maquinari a Firefox Quantum
En aquest article, aprendrem a desactivar l’acceleració de maquinari al navegador Firefox. Per defecte, està habilitat, però us pot donar problemes si feu servir maquinari anterior que no admet l’acceleració de la GPU.