icoontje buttons webapp niet scherp

[Anoniem: 500241]

Ik werk aan een webapp. Mijn buttons zijn afbeeldingen met de volgende code:

<h:commandButton id="Icon2" value="Icon2"
action="#{topSecMainAppManager.startWinqs}"
styleClass="tab-icon2"
image="img/Icon2_button.png"/>

of vertaald:

<input id="j_idt15:Icon2" type="image" src="img/Icon2_button.png" name="j_idt15:Icon2" class="tab-icon2">

De styleclass tab-icon2 gebruik ik om de positie en de grootte van de afbeelding te bepalen. Wanneer de originele afbeelding groter is dan de weergave reageert de button minder snel. Wanneer ik de originele afbeelding dezelfde grote geef als de weergave verlies ik kwaliteit van de afbeelding en zien de incoontjes er veel minder mooi uit op mijn smartphone.

Is hier een oplossing voor?

[virofi]

Heeft die smartphone toevallig een Retina (of vergelijkbaar) scherm? Zo ja; hogere resolutie images gebruiken!

[Anoniem: 500241]

Hoe verhoog ik resolutie van imijn mages zonder de afmeting de vergroten of is dit onmogelijk? Ik ontwerp mijn images met paint.net

[Terry007]

Misschien heb je hier wat aan:

"Open the image, click Resize (Ctrl-R), change the DPI. Click OK. Save and print."

[Anoniem: 500241]

Ik weet niet precies wat DPI is. Bij paint.net kun je volgens mij alleen pixels instellen.

Wat ik doe is.
Ik stel bij Resize de width en height in en ik zet de resolutie op z'n hoogst. Bijv.
width: 42 pixels, height: 56 pixels, resolution:7999,00 pixels/inch

maar dit levert dus niet het gewenste resultaat, het moet scherper. Alleen dit lukt me alleen wanneer de afmetingen van mijn afbeelding ook groter zijn.

In het begin leek het geen probleem om de afmetingen van de afbeelding groter te houden aangezien ik hem in mijn css gewoon een ander formaat gaf en op een of andere manier de kwaliteit beter behouden bleef dan wanneer ik de originele afbeelding van te voren verklein. Het probleem is alleen dat de button trager reageert op deze manier.

[Caelorum]

In paint.net heet dat resolution:

DPI = dots per inch en wordt gebruikt in drukwerken, bij digitale werken is het dus pixels/inch

[TheNephilim]

Is dit wel de manier? Zelf heb ik er nog niet veel mee gedaan, maar deze oplossing klinkt ook best logisch. Dat is wat meer de 'responsive' manier.

[Barryvdh]

Wij gebruiken meestal icon fonts, dat is vector-based, dus altijd scherp. Alleen dat gaat natuurlijk wat lastiger als je eigen icons hebt.
En als je een hogere resolutie gebruikt, zijn de afmetingen inderdaad groter. Normaal is dat echter geen probleem en zet je een afbeelding van 400x400 in een container van 200x200, en dan heb je op retina schermen een scherp plaatje. Dat de button dan langzamer reageert, heb ik echter nog nooit gehoord.

[ Voor 52% gewijzigd door Barryvdh op 15-04-2013 17:04 ]

[Dorgaldir]

Caelorum schreef op zaterdag 13 april 2013 @ 20:28:
In paint.net heet dat resolution:
[afbeelding]
DPI = dots per inch en wordt gebruikt in drukwerken, bij digitale werken is het dus pixels/inch

net wat ik wou zeggen, als je die verhoogt dan zal je beeld normaal scherper zijn.

[Gomez12]

Dorgaldir schreef op dinsdag 16 april 2013 @ 15:01:
[...]
net wat ik wou zeggen, als je die verhoogt dan zal je beeld normaal scherper zijn.

Verhogen is over het algemeen zinloos. Bij verkleinen kunnen er allemaal algoritmes etc toegepast worden om te bepalen welke pixels er weg moeten en welke niet, maar bijv 2x verhogen is gewoon simpelweg alle pixels kopieren.

Gewoon betere icoontjes regelen en het origineel bewaren, op het moment dat je resolutie te laag is dan is er geen weg terug.

[Dorgaldir]

Gomez12 schreef op dinsdag 16 april 2013 @ 15:05:
[...]

Verhogen is over het algemeen zinloos. Bij verkleinen kunnen er allemaal algoritmes etc toegepast worden om te bepalen welke pixels er weg moeten en welke niet, maar bijv 2x verhogen is gewoon simpelweg alle pixels kopieren.

Gewoon betere icoontjes regelen en het origineel bewaren, op het moment dat je resolutie te laag is dan is er geen weg terug.

Akkoord, ik doelde dan ook op het verhogen van de resolutie alvorens het maken van een icoon, maar dat had ik er idd niet duidelijk bij gezegd.

[_Thanatos_]

Als het gaat om een monochroom icoontje, kun je ook een font gebruiken waar dat icoon in zit. Infinite resolution

Of anders een SVG, ben je ook van het gedonder af.

Het is wel dat je <input type=image> elementen echt moet laten vallen. Gebruik toch gewoon een <button> element - die kun je veel beter stylen. Daar zet je dan een background op (als je een SVG gebruikt) en een background-size om em te laten passen. Als je een icoon in een font gebruikt, kun je een :before gebruiken en em daarin zetten - iets dat met een <input> ook niet werkt (of iig niet hoort te werken).

[Anoniem: 500241]

Ik ben nog aan het experimenteren wat voor mij het beste werkt. Alvast bedankt voor jullie adviezen!

[TheNephilim]

_Thanatos_ schreef op woensdag 17 april 2013 @ 13:36:
Als het gaat om een monochroom icoontje, kun je ook een font gebruiken waar dat icoon in zit. Infinite resolution

Of anders een SVG, ben je ook van het gedonder af.

Het is wel dat je <input type=image> elementen echt moet laten vallen. Gebruik toch gewoon een <button> element - die kun je veel beter stylen. Daar zet je dan een background op (als je een SVG gebruikt) en een background-size om em te laten passen. Als je een icoon in een font gebruikt, kun je een :before gebruiken en em daarin zetten - iets dat met een <input> ook niet werkt (of iig niet hoort te werken).

Hoe zit het met de ondersteuning van SVG op dit moment? Of moeten we dan weer met 'browser sniffing' aan de gang om in old IE een normale afbeelding te tonen en in de moderenere browsers de SVG?

---

IE8 ondersteund geen SVG dus dat is nog net even lastig. Al moet ik zeggen dat er al veel IE9 gebruikt word door de 'gewone' consument op dit moment. Tenminste, dat is wat ik opmaak uit enkele Analytics accounts voor 'gewone' websites.

[ Voor 13% gewijzigd door TheNephilim op 17-04-2013 15:00 ]

[_Thanatos_]

Je kunt SVG detecteren door window.SVGAngle te testen in javascript. Met een library als Modernizr kun je het in CSS doen.

Helemaal in CSS kan ook soort-van:

Cascading Stylesheet:

#element {
  background: url(image.png);
  background: url(image.svg), none;
}

Maar dit leunt op de aanname dat SVG ondersteund wordt door alle browsers die ook multiple backgrounds ondersteunen.

disclaimer: dit is even snel uit m'n hoofd. kan zijn dat het andersom moet

[ Voor 60% gewijzigd door _Thanatos_ op 17-04-2013 21:45 ]

[bonzen]

wellicht is dit een methode welke in jouw straatje past:
http://css-tricks.com/tec...-context-specific-images/

[gitaarwerk]

SVG word ondersteund in IE vanaf 9. 8 niet zo lekker. Op telefoons is het prima. Je zou voor simpele monochrome icons vector font (als hierboven genoemd word) kijken naar bijvoorbeeld "font-awesome".

Methode van _Thanatos_ is ook erg mooi, maar best een hoop code als je veel iconen hebt.

Werd me laatst verteld dat windows phone niet goed kan omgaan met webfonts, dus dat is best ruk. Ik heb het zelf nog niet kunnen testen helaas.