Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

PNG onscherp, SVG veel te groot | Voor web

Pagina: 1
Acties:

  • Wachten...
  • Registratie: januari 2008
  • Laatst online: 16-04 10:37
Beste leden.

Ik heb een klein probleempje die ik al enige tijd voor lief heb genomen, maar nu toch echt iets aan wil doen.

Voor mijn website maak ik veel gebruik van eigen gemaakte illustraties die ik in Illustrator maak.
Nu is het zo dat ik deze voorheen als PNG exporteerde en deze op mijn website plaatste.

Nu ben ik wat meer bezig geweest met SVG bestanden, omdat deze schaalbaar zijn en dus nooit onscherp worden. Ik heb ook een test gedaan, en het ziet er echt 10 keer beter uit in een SVG formaat. Het enige waar ik tegenaan loop, is dat mijn SVG bestanden bijna 4MB groot worden na de export.
Als ik exact dezelfde image in PNG exporteer, dan houd ik een bestand over van 100kb. Echt een gigantisch verschil dus.

Zie mijn illustraties een beetje zoals onderstaande qua complexiteit.
Het is niet mijn tekening, maar het gaat meer om de vormen en lijnen die ik gebruik (hand getekend in illustrator).



Heeft dit te maken met de complexe lijnen e.d. dat de SVG zo groot wordt? Of is er toch een manier om SVG te gebruiken, zonder dat het zo belachelijk groot wordt?

[Voor 22% gewijzigd door Wachten... op 02-04-2021 14:53]

Als je dit kunt lezen, dan werkt mij Signature!


  • pagani
  • Registratie: januari 2002
  • Niet online
Logischerwijs is je SVG veel groter, je hebt immers veel meer informatie in je bestand (curves in plaats van losse pixels) én het is een XML based format met veel overhead t.o.v. een binair formaat. Daarbij is het wel afhankelijk van hoeveel lijnen je neerzet, met welke tool en welke software hoe efficiënt dit allemaal gaat.

Wat je kan proberen is of een PNG op de maximale grootte die je wil weergeven niet kleiner is dan 4MB, dan pak je dat formaat en verklein je de afbeelding voor thumbnails enzo.

[Voor 8% gewijzigd door pagani op 02-04-2021 14:59]

Alienware M15 R2 OLED Review


  • kaesve
  • Registratie: maart 2009
  • Laatst online: 00:25
kun je de svg ergens plaatsen? dan kunnen we zien of daar iets geks in zit, of dat er nog wat valt te optimaliseren.

  • Wachten...
  • Registratie: januari 2008
  • Laatst online: 16-04 10:37
kaesve schreef op vrijdag 2 april 2021 @ 15:02:
kun je de svg ergens plaatsen? dan kunnen we zien of daar iets geks in zit, of dat er nog wat valt te optimaliseren.
@pagani

Ik kan helaas de bestanden niet ergens tonen aangezien dit verkoop gerelateerd is.
Ik heb echter opnieuw even een bestand gemaakt en helemaal clean begonnen. Nu ziet het er wel beter uit, maar de SVG is nog steeds wel 300kb t.o.v. 50kb voor de PNG file.

Ik denk dus dat er iets fout zat ik het eerste bestand dat ik had gemaakt, Maar nog steeds is het een factor 6 wat hij groter is.

Ik vraag me nu af waar ik goed aan doe, want 300kb per afbeelding is niet niks en dat zal wel een aardig effect hebben op de snelheid van mijn website. Echter zien de PNG bestanden er niet uit als je dit vergelijkt met de SVG files. Ik weet dus niet zo goed waar ik nu goed aan doe, want krijg de PNG bestanden met geen mogelijkheid echt scherp zoals de SVG.

Zoals gezegd zijn het geen rondjes en vierkantjes o.i.d. er zit best wel wat "kraswerk" in dus veel complexe lijnen zoals ik in de eerdere afbeelding heb laten zien.

Als je dit kunt lezen, dan werkt mij Signature!


  • Hahn
  • Registratie: augustus 2001
  • Laatst online: 22:42
Moet het per se SVG of PNG zijn? Wat gebeurt er als je bijvoorbeeld een JPG ervan maakt?

The devil is in the details.


Acties:
  • +1Henk 'm!

  • bregweb
  • Registratie: juni 2005
  • Laatst online: 17-04 08:40
Test de snelheid van je website eens met die SVG van 300 kb, kan me in dit moderne tijdperk niet voorstellen dat het een issue gaat zijn.

Hattrick: Thorgal Eagles


  • Hahn
  • Registratie: augustus 2001
  • Laatst online: 22:42
bregweb schreef op vrijdag 2 april 2021 @ 15:25:
Test de snelheid van je website eens met die SVG van 300 kb, kan me in dit moderne tijdperk niet voorstellen dat het een issue gaat zijn.
De snelheid van je website is maar één deel van de som natuurlijk. Bezoekers kunnen zelf ook een trage verbinding hebben.

The devil is in the details.


  • consolefreak
  • Registratie: november 2002
  • Laatst online: 16-04 16:11
Dus je wilt je ontwerp verkopen, maar wil wel een schaalbare vector tekening van je ontwerp gratis beschikbaar stellen in je website. Ik zie een mogelijk zakelijk conflict, want waarom zou ik nog de tekening kopen als ik gewoon die SVG kan laten afdrukken?

Acties:
  • +1Henk 'm!

  • Mavamaarten
  • Registratie: september 2009
  • Laatst online: 17-04 14:27

Mavamaarten

Omdat het kan!

Die afbeeldingen lenen zich gewoon niet tot het opslaan ervan in vector formaat. Je hebt heel veel kleine lijntjes, wat ervoor zorgt dat het moeilijk te renderen is en een grote bestandsgrootte heeft.

Op zich zou een PNG-versie ervan niet onscherp mogen zijn, zo lang je deze maar opslaat met een resolutie die voldoende is. Misschien is dat gewoon het issue? Een mogelijk alternatief is WebP.

Android developer & dürüm-liefhebber


  • Hahn
  • Registratie: augustus 2001
  • Laatst online: 22:42
consolefreak schreef op vrijdag 2 april 2021 @ 15:28:
Dus je wilt je ontwerp verkopen, maar wil wel een schaalbare vector tekening van je ontwerp gratis beschikbaar stellen in je website. Ik zie een mogelijk zakelijk conflict, want waarom zou ik nog de tekening kopen als ik gewoon die SVG kan laten afdrukken?
Op zich geen heel gek punt om aan te geven dat een perfecte versie in SVG gebruikt kan worden voor illegale kopieën. Maar antwoord op je vraag is simpel: omdat dat illegaal is :P

The devil is in the details.


  • _JGC_
  • Registratie: juli 2000
  • Laatst online: 05:48
Die SVG grootte, is dat voor of na compressie? Het is in feite XML, comprimeert vaak heel goed.

Acties:
  • 0Henk 'm!

  • _NooT_
  • Registratie: juni 2018
  • Laatst online: 23:19
Voor dit type illustratie is 300kB niet vreemd. Je kan eventueel SVGO compressie toepassen, maar ik zou sowieso voor png kiezen voor dit type illustratie. Dat leent zch hier heel goed voor.
Ook om je eigen artwork te beschermen.

Die png kan je makkelijk mooi scherp krijgen en waarschijnlijk nog wel kleiner in bestandsgrootte ook.
Je zou het volgende moeten doen:
  1. Exporteer naar png 24bit met minimaal 2x de grootte die je nodig hebt (3x of 4x kan ook).
    Zo zorg je ervoor dat het er ook mooi uit ziet op schermen met een hoge resolutie.
    Tegenwoordig bijna alles dus.
    Door de wijze waarop een png geoptimaliseerd wordt, neemt de bestandsgrootte niet zo erg veel toe bij een hogere resolutie bij afbeeldingen met volvlakken / eenvoudige verlopen / beperkt kleurpallet.
  2. Gebruik vervolgens een programma dat pngquant gebruikt voor compressie. Je kan dan het aantal kleuren flink terugbrengen wat in een aanzienlijk kleiner bestand resulteert. Jouw type illustratie leent zich voor 32 of 64 kleuren. Dan heb je genoeg tinten om te voorkomen dat je lijnen kartelig worden.
Als je een mac of linux systeem gebruikt kan ik ImageOptim aanraden. Gebruiksvriendelijk en met een duidelijke voorvertoning.

Voor pc en ook voor batch-processing kan ik Pngyu aanraden.

  • Giant87
  • Registratie: juni 2004
  • Laatst online: 15-04 09:05
Voor je PNG (die in de basis echt niet onscherp zou moeten zijn): https://tinypng.com/

  • Savantas
  • Registratie: december 2002
  • Laatst online: 07-04 18:56
Wat misschien ook kan schelen is om van alle objecten eerst een expand toe te passen (alle lijnen worden dan omgezet naar vlakken met de door jou gebruikte diktes) en deze vervolgens met Pathfinder samen te voegen. Aan de andere kant zit in het voorbeeldplaatje zoveel wit tussen de kleuren dat dit waarschijnlijk weinig oplevert in het aantal vertices (tekenpunten), maar zal zeker een reductie geven op het grote aantal paths of polygons in je SVG.
Er zijn overigens trucjes met pattern-vulling waarmee je een dergelijke inkleuring kunt emuleren. Is uiteraard anders dan handwerk, want gegenereerd, maar met een goed gekozen pattern (of filter) kan er wel iets uitkomen wat in de buurt komt en de inhoud wordt dan door de browser (of waarmee je de svg opent) gegenereerd (kan afhankelijk van grootte van weergave dus ook variëren).
Maar goed, dat is uiteraard niet wat je zoekt ;)

Alleen al vanwege het makkelijke kopiëren zou ik inderdaad voor PNG gaan met de tips hierboven. Je kan wel bijvoorbeeld één, eventueel kleinere, tekening op je site zetten in SVG zodat men bijvoorbeeld kan inzoomen of zo. Toon je toch detail, alleen niet van de verkoopbare originelen.

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

Pagina: 1


Apple iPhone 12 Microsoft Xbox Series X LG CX Google Pixel 5 Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True