Effectief kleine JPEG bestanden maken (slices)

[MrDummy]

Ik was bezig met maken van een worldmap voor mijn website.
Een volledige kaart is ongeveer 6 MB groot.
Maar zodra ik wil knippen in vlakken van 100x100 pixels, als slices met behulp van ImageSlicer, wordt totale size map .... 150 MB!
Dat betekent dat slices vergeleken met grote map wel extreem groot zijn, en toch heb ik compressie op 50% gezet. Er klopt duidelijk niet. Wil ik meer comprimeren, gaat er al details verloren, maar het is totaal nog veel te groot.

Ik ben heel benieuwd welke "geheim" hierachter zit om jpeg toch klein te maken, zo ongeveer 1-3 kB en niet 14kB. Ik heb mapslices van andere site en die zijn al stuk groter met 256x256 pixels en toch worden ze niet groter dan 3 kB.

Ik weet niet welke instelling erg belangrijk is hiervoor. Compressie is duidelijk niet antwoord erop, want de kleine details worden dan uitgesmeerd. Is het dan misschien een PNG? Of zit een truc in verminderen van aantal kleuren naar 256 ? Hoewel, de JPEG slices zijn zelf 24bits.

Wie herkent dit situatie? Heb je ook zoiets gedaan om effectief kleine mapslices te maken zonder teveel detail in te leveren? Misschien ligt antwoord in "smoothing" die zeer laag moet staan. Die instelling heb ik gezien in CorelDRAW. Misschien is antwoord heel simpel. Dan hoor ik het graag.
Ik hoop slices effectief klein te maken tot max 3kB per stuk.

[Dark Blue]

Ik zie dat je zelf al aardig wat uitgeprobeerd hebt, een erg goede voorbereiding!

Je zou je verder, als het je leuk lijkt, een beetje kunnen inlezen op verschillende bestandsformaten. Over de opbouw van GIF, PNG en JPEG bestaan Wikipedia-artikelen.

Hoe zien je slices eruit? verticale stroken, bijvoorbeeld met tijdzones?
Heb je ook al een ander (gratis) programma gebruikt, zoals Irfanview, the Gimp, of een trial van Photoshop?
Moet je de slices vaak maken, of is dit een eenmalige actie? Afhankelijk daarvan kun je er meer of minder tijd aan besteden. Als het eenmalig is kun je met instellingen in Irfanview elke slice helemaal optimaliseren.

[MrDummy]

Het is gewoon groot map (een game map in dit geval) maar voor website laad je natuurlijk niet grote joekel in. Om laden te versnellen worden er slices gemaakt. Google Maps doet dat ook met veel slices.

Ik heb even gekeken hoe slices klein zijn gebleven. Ik zie dat slices met veel egale vlakken (weinig detail) makkelijk onder 3K blijven, maar slices met veel detail erin worden toch wel 14K groot. Op zich geen probleem, zo blijven alle details nog behouden door jpeg groter te maken. Ik maak alleen ergens fout doordat ook slices met egale vlakken niet onder 3K komen maar op 14K blijven staan.

Ik ga proberen met slices functie in Photoshop, je kan daar aangeven hoeveel slices je wil maken en proberen zo effectief mogelijk instellen. Hoop dat het lukt.

Ik heb voorheen gedaan met ImageSlicer. Het is 1 van de tools die wel correct 100x100 kan maken door simpel in te stellen. En ook minder oude tool. Andere slicer tools kunnen dat niet, of je moet nog steeds veel handwerk doen van ene tool die ik wel heb gevonden. Het moet juist automatisch gaan.
Alleen ImageSlicer is naar mijn mening vrij prijzig alleen al voor simpel slicen en mergen.
(Het gaat dus om TotalImageSlicer van CoolUtils. 2009 programma, maar het werkt. Maar wel hoog prijs voor "oude" programma uit 2009.)

[ Voor 5% gewijzigd door MrDummy op 07-03-2011 10:08 ]

[djexplo]

*MrDummy.
Als een plaatje is opgeslagen als JPEG en je dit weer inleest bevat het plaatje JPEG artifacten, dus extra randjes, die bij weer opslaan dus voor een groter bestand formaat zorgen.

Jpeg, PNG en GIF werken het beste met bijna egale vlakken. Je hebt smart-blur in Photoshop of Anisostropic-Filtering in een ander programma, deze kunnen een plaatje smoothen met behoud van randen. Waardoor je dus een kleinere filesize kan krijgen zonder visueel veel verlies.

[MrDummy]

JPEG artifacts is te verwachten, even beetje smoothen is goed tip.
Ik moet wel dat smoothing laag houden, want het gaat om texture data, dus kleuren liggen vrij dicht bijelkaar, zoals gras texture. Daar mag niet te glad worden gemaakt.
Ik heb nu als PSD bewaard zodat ik verder kan uitwerken. Wel 190 MB PSD en ik moet ook nog 1 keer 200% maken. Dat is 17000x14000 pixels dat ik nog moet snijden in duizenden jpeg slices...

[Soultaker]

MrDummy schreef op maandag 07 maart 2011 @ 08:29:
Is het dan misschien een PNG?

Bedoel je hiermee dat je zelf nog niet eens weet of je invoer wel een JPEG bestand is? Ga dat dan eerst eens uitzoeken.

In principe zijn JPEG files relatief slecht in globale compressie, dus meestal kun je ze wel opknippen in kleinere stukjes (niet al te klein, natuurlijk) zonder dat de totale grootte veel toeneemt. Daarbij kun je het beste een macht van 2 nemen (bijvoorbeeld 128x128 in plaats van 100x100) omdat de interne datastructuur ook op blokken van vaste grootte (16x16 meen ik) gebaseerd is.

Bij het hercomprimeren introduceer je meestal nieuwe artifacts, helaas, maar er zijn ook tools om JPEG files losless op te knippen (Better JPEG is er eentje die ik zo snel kon vinden).

[Savantas]

Als slices met veel egale vlakken klein zijn i.v.m. vlakken met veel detail, dan moet het wel gaan om GIF of (indine meer dan 256 kleuren) PNG-bestanden. Deze passen in tegenstelling tot JPG een soort van ZIP-compressie toe, waardoor een groot vlak van 1 kleur heel erg gecomprimeerd wordt. JPG is juist beter in reduceren van foto's met veel detail (maar dan wel met genoemde artifacts, bij meer compressie krijg je een soort uitsmering van kleuren).

[Soultaker]

GIF is sowieso compleet verouderd; ik denk dat je dat formaat niet meer hoeft te overwegen. (De enige voordelen van GIF ten op zichte van PNG zijn dat animatie in GIF beter ondersteund wordt, en dat GIF voor sommige kleine plaatjes een iets kleiner bestand oplevert, maar meestal is het omgekeerde waar.)

[ Voor 6% gewijzigd door Soultaker op 07-03-2011 22:29 ]

[MrDummy]

Het zijn allemaal jpeg bestanden. Wat voorheen gebeurt met 14K lijkt wel lossless instelling.
Ik ben dus nog aan het uitzoeken hoe ik tot 3K kan komen bij egale delen.
De vlakken zijn al met smart blur gedaan in Photoshop.

Update: Irfanview kan JPEG wel veel meer squeezen. ACDSee kan dat niet, krijg niet lager dan 9K, maar Irfanview kan wel kleiner maken tot ruim onder 1K. TotalImageSlicer doet ook niks mee, het blijft op 14K groot ongeacht inhoud.
Ga verder experimenteren welke compressiewaarde voldoende is.
Hmmm.. compressie stand op 50 of 80, totale grootte verandert niet. Bizar gewoon, kan het niet ietsje hoger of gaat het soms automatisch "zo klein mogelijk"?

Update 2: Bij de visuele controle zijn de details in gemaakte jpegs nog voldoende aanwezig. Met behoorlijk kleine jpeg grootte is ook groot voordeel: grote dataverkeer besparing en sneller inladen! Dat belast de server al wat minder. Ik ben tevreden.

[ Voor 65% gewijzigd door MrDummy op 08-03-2011 00:23 ]

[Guillome]

Waarom niet slicen naar BMP`s of PNGs (geen verlies) en dan in Photoshop via batch alles omzetten naar jpgs met danwel de save-for-web danwel een boxtop plugin? Deze 2 maken zeer kleine en goede JPGs

[MrDummy]

Even in het kort:
De originele map images zijn al in JPEG. Dat betekent dus al beetje verlies en wat artifact sporen.
Deze hebben 256x256, op zich prima, maar mijn website riftworldmap gebruikt op eigen manier 100x100 ivm makkelijkere berekening en simpelere controle routines.
Eerst heb ik hele zaak automatisch samengevoegd in TotalImageSlicer, dat werkt goed. Die wordt meteen opgeslagen als PNG bestand.
Dan kan ik in Photoshop mapimage even op juiste schaal zetten en wordt bewaard als PSD. Zo min mogelijk verlies in verdere nabewerking dus. In Photoshop wordt afbeelding iets smart smooth gemaakt om wat artifact sporen te verkleinen in de vlakke delen. Ik heb dan 100% en 200% mappen gemaakt (250 / 850 MB groot)

Dan hebben we verschillende mogelijkheden om slices te maken.

1. Photoshop
Het kan automatisch slices maken, maar vreemd genoeg kan ik niet 100x100 maken. Dan blijkt de beperking al gevonden te zijn: het kan niet enorm veel slices maken, dan is "getal" van slice al vol.
2. TotalImageSlicer
Deze programma is wel in staat om 100x100 slices te maken. Dat wordt opgeslagen als PNG bestand, direct vanuit PSD. Dus ook heel weinig verlies. Gelukkig kan het 850MB PSD mapimage verwerken.

Ik ken verder geen tool die 100x100 pixels kan instellen, wel paar maar die doen X,Y aantal slices, en dat is weer narekenen en zorgen dat 100 pixels uitkomt. En ik weet 1 gratis tool, maar die heeft te veel handwerk. Kan niet.

En komen we op volgende final stap om goede jpeg slices te maken.

1. Photoshop
Met Photoshop kan ik batch omzetten in effectieve jpeg bestanden. Maar zou je ook doen met 30,000 slices? Het moet niet allemaal in geheugen geladen worden hoor. Dus ik doe maar wat anders.

2. ACDSee
Bekende imageviewer, maar blijkt niet goed jpegs te verkleinen. Wat ik ook doe, het blijft nog groot.

3. TotalImageSlicer
Ook hier werken de opties niet goed. Er komt vrijwel altijd 14K per slice uit, dus het lijkt vast te zitten in lossless stand.

4. Irfanview
De laatste mogelijkheid om batch te kunnen omzetten. Gek genoeg maakt de compressie stand niet eens uit, het maakt gewoon hele compacte jpeg bestanden van. Eindelijk zijn de slices effectief klein gemaakt met voldoende behoud van de detail.

Irfanview was dus goede tip. Het is simpel in gebruik en ik ben snel klaar mee. Photoshop kan ik wel even naar kijken, maar ik denk niet dat het zo snel kan met ruim 30,000 slices en ik weet niet of dat ook in een keer kan. Zo duidelijk genoeg?
Ik doe dus JPG -> PNG -> PSD -> PNG -> JPG, waarvan 3 ertussen zonder dataverlies moet gaan. De PNG is 24bits.

[Guillome]

Waarom zou dat niet kunnen met 30k slices? PS opent, slaat op, en sluit het bestand.

[Savantas]

Check nog eventueel of de slices geen extra metadata info bevatten, maakt ze weer net wat kleiner!

[bsmpower]

Heb je Adobe Fireworks? Je kan daar het plaatje inladen, slices instellen (obv 100x100 grid?) en exporteren als een website. Fireworks maakt dan een hele website aan met html/css bestanden en natuurlijk de plaatjes.
In Fireworks kan je tevens instellen in welk formaat je wil opslaan en in welke kwaliteit (bv .jpg op kwaliteit 7).

[MrDummy]

Savantas schreef op dinsdag 08 maart 2011 @ 11:31:
Check nog eventueel of de slices geen extra metadata info bevatten, maakt ze weer net wat kleiner!

Ja, inderdaad. Ik heb alle info uitgevinkt in Irfanview opties, want al dat extra info is niet van toepassing voor gewoon map slices. Het gaat me alleen om pure pixels.

[OzBoz]

MrDummy schreef op dinsdag 08 maart 2011 @ 23:11:
Ja, inderdaad. Ik heb alle info uitgevinkt in Irfanview opties, want al dat extra info is niet van toepassing voor gewoon map slices. Het gaat me alleen om pure pixels.

Heb geen idee hoe die map eruit ziet maar kan me voorstellen dat het als GIF enorm veel kleiner kan worden dan JPG. En GIF is dan wel bejaard, werkt prima bij dingen met niet teveel kleuren. Vraag me verder ook wel af of 100x100 wel zo efficient is als het om laadtijden gaat. Per slice moet tenslotte ook weer een verbinding worden opgezet.