Gradient in photoshop, hoe het beste op te slaan?

[Verwijderd]

In Photoshop heb ik een simpele afbeelding gemaakt die een gradient effect bevat. Nu is het de bedoeling dat deze op een website als achtergrond komt, de afbeelding is 1 pixel breed die herhaald zal worden.
Welke bestandsformaat moet ik gebruiken voor het beste resultaat? jpg met een hoge compressie (welke compressie)? of png-24?

[ Voor 4% gewijzigd door Verwijderd op 13-04-2006 16:42 ]

[Matias]

JPG is een compressie die gebruikt maakt van gradients om zijn afbeeldingen te comprimeren. De meest logische en lichtste oplossing is gewoon de afbeelding op te slaan met de "save for web" optie op JPG 80% oid

[Jermaine]

Gif is voldoende?

[André]

Even een tip: maak hem breder dan 1 pixel, anders moet een browser hem bijvoorbeeld 1024 keer naast elkaar renderen. En hoe groot is de gradient? Bij een kleine gradient moet je altijd GIF gebruiken zodat je geen ranzige JPG compressie in je gradient krijgt.

Verder hoort dit in GFX.

[Verwijderd]

In mijn vorige post ben ik het volgende onscheid vergeten te maken.
- Hoe een gewone gradient op te slaan
- Hoe een gradient met daarop niet gradient afbeelding op te slaan?

Een voorbeeld hiervan kan je zien op http://www.mtv.nl

De linkerkant is verdeeld in drie stukken. Het middelste is alleen gradient, de onder en bovenkant bevatten meer als de gradient.

[Verwijderd]

André schreef op donderdag 13 april 2006 @ 16:52:
Even een tip: maak hem breder dan 1 pixel, anders moet een browser hem bijvoorbeeld 1024 keer naast elkaar renderen. En hoe groot is de gradient? Bij een kleine gradient moet je altijd GIF gebruiken zodat je geen ranzige JPG compressie in je gradient krijgt.

Verder hoort dit in GFX.

De gradient zal 100 pixels breed worden en 300 pixels hoog (maar wel oprekbaar!). Wat jij zegt is toch precies het tegenovergestelde van wat user matiasjansen zegt.
Als gif de oplossing is, kan ik dan niet beter png gebruiken? Dat beschikt over meer kleuren en is gelijk aan .gif, althans dat is wat ik op de sites lees die daar over gaan.

[sdomburg]

jpg dus...

[André]

PNG mag ook, daar had ik nog even geen rekening mee gehouden

sdomburg schreef op donderdag 13 april 2006 @ 16:57:
[afbeelding]
jpg dus...

Dat is IMO een grotere gradient, dan kom je al snel uit op JPG idd.

[ Voor 70% gewijzigd door André op 13-04-2006 16:58 ]

[Verwijderd]

sdomburg schreef op donderdag 13 april 2006 @ 16:57:
[afbeelding]
jpg dus...

Ja dat zag ik ook wel, maar dat zegt niet dat het de beste oplossing is

André schreef op donderdag 13 april 2006 @ 16:57:
PNG mag ook, daar had ik nog even geen rekening mee gehouden


[...]

Dat is IMO een grotere gradient, dan kom je al snel uit op JPG idd.

Als je voor .gif op .png-24 zou moeten kiezen? Voor welke zou je gaan?

En waarom is .jpg in dit geval beter als ik vragen mag?

Je gaf ook aan dat het niet verstandig is om de gradient 1 pixels breed te maken, dit omdat de browser hem dan 1004 x moet renderen? Kost dit meer tijd dan het laden van een gradient van 2x (beide kanten) 100 pixels breed?

[ Voor 15% gewijzigd door Verwijderd op 13-04-2006 17:05 ]

[sdomburg]

Verwijderd schreef op donderdag 13 april 2006 @ 17:00:
[...]


Ja dat zag ik ook wel, maar dat zegt niet dat het de beste oplossing is


[...]


Als je voor .gif op .png-24 zou moeten kiezen? Voor welke zou je gaan?

En waarom is .jpg in dit geval beter als ik vragen mag?

Voor .gif wanneer <256 kleuren: eigenlijk alleen met kleinere gradients dus. Daarbij, wat is er mis met zelf je specifieke gradient even in verschillende formaten proberen en die te vergelijken op bestandsgrootte, kwaliteit en eventuele compatibiliteit? Beetje zinloos als wij met vuistregels voor jou moeten komen.

[ Voor 24% gewijzigd door sdomburg op 13-04-2006 17:05 ]

[Verwijderd]

sdomburg schreef op donderdag 13 april 2006 @ 17:03:
[...]

Voor .gif wanneer <256 kleuren: eigenlijk alleen met kleinere gradients dus. Daarbij, wat is er mis met zelf je specifieke gradient even in verschillende formaten proberen en die te vergelijken op bestandsgrootte, kwaliteit en eventuele compatibiliteit? Beetje zinloos als wij met vuistregels voor jou moeten komen.

Dat heb ik natuurlijk al gedaan.:) Echter er onstronden wat twijfels over wat de best oplossing is. Vandaar dat ik zoek naar de algemeen gebruikte manier.

[BtM909]

En wat is er in hemelsnaam mis met de diverse opties gebruiken om op te slaan en dan vergelijken. We gaan niet voor elke poep-en-scheet een topic openen, want ik mis hier een klein beetje het discussie punt

Dus TS: wat heb je zelf al geprobeerd?

[sdomburg]

Verwijderd schreef op donderdag 13 april 2006 @ 17:12:
[...]


Dat heb ik natuurlijk al gedaan.:) Echter er onstronden wat twijfels over wat de best oplossing is. Vandaar dat ik zoek naar de algemeen gebruikte manier.

Meld je uitkomsten dan even, er is geen algemeen gebruikte manier, het beste resultaat is afhankelijk van de specifieke situatie.

[Verwijderd]

André schreef op donderdag 13 april 2006 @ 16:52:
Even een tip: maak hem breder dan 1 pixel, anders moet een browser hem bijvoorbeeld 1024 keer naast elkaar renderen. En hoe groot is de gradient? Bij een kleine gradient moet je altijd GIF gebruiken zodat je geen ranzige JPG compressie in je gradient krijgt.

Verder hoort dit in GFX.

Wat is het probleem dat hij hem 1024x moet renderen merk je dit echt zoveel in laadtijd of iets? Heb daar nog nooit last van gehad iig

[Verwijderd]

zeg ruffneck82, heb je nou overal onze hulp bij nodig? klik

meldt dit dan in een TR en niet in het topic, tenzij je reacties aan het uitlokken bent.

[ Voor 29% gewijzigd door BtM909 op 14-04-2006 11:14 ]

[Verwijderd]

Verwijderd schreef op donderdag 13 april 2006 @ 19:15:
Wat is het probleem dat hij hem 1024x moet renderen merk je dit echt zoveel in laadtijd of iets? Heb daar nog nooit last van gehad iig

Dit merk je heel erg goed bij langzamere systemen waar een slome videokaart (ie. een Vanta) en dito CPU in zit.

[BtM909]

Je browser mapt het plaatje nl. intern naar het formaat waarop het moet worden gedisplayed...

* BtM909 weet nog de goeie oude tijd dat Explorer het naar bitmap converteerde en je dus je browser kon killen met een background image

[Verwijderd]

Idd. En volgens mij kun je zo de wat langzamere systemen waar Firefox met smooth scrolling op draait ook heel goed vermoorden.

Ik heb al veel mensen moeten helpen omdat ze klachten hadden over een haperende muis... wat bleek; een te zware website met smooth scrolling in Firefox was het probleem.

Denk dus svp ook aan de mensen met minder goede hardware, niet iedereen is Tweaker met big-a$$ hardware en zo

[Ramon]

Als je background bijv 800px breed dan maakt het toch niet uit of je plaatje 1x breed is of 50px breed? Hoe moet ik me dat voor me zien?

[Pendaco]

Ramon de Jesus schreef op vrijdag 14 april 2006 @ 13:21:
Als je background bijv 800px breed dan maakt het toch niet uit of je plaatje 1x breed is of 50px breed? Hoe moet ik me dat voor me zien?

Om t maar even met basisschool wiskunde te vergelijken:

800 / 1 = 800 x

800 / 50 = 16 x

In plaats van 800x hetzelfde plaatje laten renderen, laat je nu een plaatje maar 16 x renderen om hetzelfde resultaat te bereiken.

Natuurlijk klopt dit niet helemaal aangezien het (bron)plaatje in het laatste geval wat groter is dan de 1px variant, maar het ontlast de cpu wel enigzins.

[Ramon]

Ik vraag me eigenlijk af of dat merkbaar uitmaakt hoor. Aangezien het eindplaatje iig altijd even groot is, en bij een groot plaatje moet er ook meer over de verbinding binnengehaald worden dus duurt de pagina laden misschien alsnog even lang.

Volgens mij allemaal mierenneuk

[Verwijderd]

Dat hoeft toch helemaal niet met een plaatje?

voor pagina background:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

of voor tabel:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Lijkt me veel handiger/netter. Hoewel de gradient dan wel afhankelijk is van de hoogste van je windowtje geloof ik

[tjmv]

Verwijderd schreef op zaterdag 15 april 2006 @ 03:14:
Dat hoeft toch helemaal niet met een plaatje?

voor pagina background:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

of voor tabel:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Lijkt me veel handiger/netter. Hoewel de gradient dan wel afhankelijk is van de hoogste van je windowtje geloof ik

... maar dat werkt alleen in Microsofts Internet Explorer.

[pagani]

Da Devil schreef op zaterdag 15 april 2006 @ 03:26:
[...]


... maar dat werkt alleen in Microsofts Internet Explorer.

Heb je wel gelijk 99% van de gebruikers

Let wel op dat IE met .png bestanden slecht werkt met transparantie, dus mocht je de gradient ergens overheen willen laten vallen gebruik dan liever geen png.

[Soultaker]

sdomburg schreef op donderdag 13 april 2006 @ 16:57:
[afbeelding]
jpg dus...

Ik weet niet of het aan het compressieformaat ligt of niet, maar ik vind dit nu niet echt een mooie gradient.

Zelf zou ik direct PNG pakken want gradients comprimeren geweldig met die PNG filters, waardoor het resultaat én losless is en het bestand waarschijnlijk nog kleiner dan JPEG is ook.

[Verwijderd]

Voor IE kan je real-time* een gradient geneneren. Voor de andere browsers een backup gradient in de voor van JPEG met kwaliteit uiteraard op 100%.

* in css plaatsen:
filter: progid:DXImageTransform.Microsoft.Gradient (startColorStr= '#ffffff' ,endColorStr= '#1e77d3' ,gradientType= '1' );

edit:
Al is dit niet volgens de standaard.

[ Voor 22% gewijzigd door Verwijderd op 15-04-2006 13:17 ]