Hogere Resolutie logo

[Koen-]

In het oude Tweakers was het logo erg korrelig op mijn Retina MacBook en op de iPad 3. Ik had gehoopt dat dit in Tweakers 7 opgelost zou zijn. Helaas is dit nogsteeds zo.

[Wim-Bart]

Verdiepen in de techniek achter Retina en dan weet je wel waarom. Retina blaast het plaatje eerst op naar hogere resolutie en geeft dat op een lagere resolutie weer, met tekst werkt dit goed, maar met plaatjes niet. Jammer maar helaas, is een Apple probleem en komt veelvuldig voor heb ik zelf ervaren.

[crisp]

Retina is iets waar we nog een strategie voor moeten ontwikkelen. We willen non-retina niet opzadelen met 4x te grote plaatjes (qua filesize) en eigenlijk retina-devices op tragere verbindingen ook niet.

[geerttttt]

crisp schreef op vrijdag 19 oktober 2012 @ 09:46:
Retina is iets waar we nog een strategie voor moeten ontwikkelen. We willen non-retina niet opzadelen met 4x te grote plaatjes (qua filesize) en eigenlijk retina-devices op tragere verbindingen ook niet.

Wat dacht je van je logo in SVG formaat? Of, het logo in 4x size gif, wellicht met detectie voor retina display. Het logo is relatief weinig kleuren, dat past aardig leuk in een png-8 of gifje. Zoveel kb zal dat toch niet zijn/schelen?

[crisp]

geerttttt schreef op vrijdag 19 oktober 2012 @ 12:27:
[...]

Wat dacht je van je logo in SVG formaat?

zit je weer met browsersupport (of eigenlijk, gebrek daarin in oudere IE versies)

Of, het logo in 4x size gif, wellicht met detectie voor retina display.

Serverside is niet simpel te bepalen of iemand een retina display heeft en/of wel op broadband zit. Huidige clientside oplossing zijn ook niet ideaal.

Het logo is relatief weinig kleuren, dat past aardig leuk in een png-8 of gifje. Zoveel kb zal dat toch niet zijn/schelen?

Uiteindelijk gaat het natuurlijk niet alleen om het logo... Plaatjes maken al gauw 80% van de gehele zwaarte van de pagina uit; als dat verviervoudigd dan zijn bijna alle pagina's ineens 4x zwaarder.

[geerttttt]

crisp schreef op vrijdag 19 oktober 2012 @ 12:30:
[...]

zit je weer met browsersupport (of eigenlijk, gebrek daarin in oudere IE versies)

Dat snap ik, maar dan kun je toch een IE alternatief maken. Iemand met retina display gebruikt geen IE. Die stelregel kun je wel aannemen lijkt mij...

[GekkePrutser]

Ik zou het ook wel graag zien. Wat mij betreft zou het trouwens niet voor alle plaatjes hoeven, maar alleen voor het logo en sommige icoontjes (zoals die in de menubalk, waarbij de filesize toch niet zo omhoog springt vanwege de grote vlakken met dezelfde kleur).

Met foto's zoals in de highlights valt het namelijk veel minder op op een retina scherm, maar zo'n logo ziet er wel onscherp uit, juist vanwege de strakke lijnen.

[mithras]

Een kickje...

Nu ik ook aan een hoog-resolutiescherm ben begonnen valt het mij ook op. Met name het logo (header) en de forum icons wat betreft de mapjes (listings van topics bijv.). Kennelijk is er niet de kennis van het gebruik van hoog-resolutie afbeeldingen met een sterke compressie. Door de verhoogde resolutie, valt het kwaliteitsverlies van de afbeelding namelijk niet meer op. Op http://blog.netvlies.nl/design-interactie/retina-revolution/ staat een voorbeeld (wel met een retina scherm/nexus 10 bekijken).

Volgens mij dus meer winst voor geen prestatieverlies :-)

[Kees]

Dat gaat alleen op voor .jpg, en je logo in .jpg is niet echt ideaal. Voor PNG zul je wel gewoon 4x groteren files zien. Gewoon ons logo nemen (van 7.1KiB) en die 200% groter maken geeft je een file van 32.5KiB

Bovendien kent jpg geen transparency waardoor je dat voordeel ook nog eens verliest.

[GekkePrutser]

Kees schreef op maandag 10 december 2012 @ 11:53:
Dat gaat alleen op voor .jpg, en je logo in .jpg is niet echt ideaal. Voor PNG zul je wel gewoon 4x groteren files zien. Gewoon ons logo nemen (van 7.1KiB) en die 200% groter maken geeft je een file van 32.5KiB

Bovendien kent jpg geen transparency waardoor je dat voordeel ook nog eens verliest.

Ja PNG is wel een must inderdaad. Maar bij logo's met strakke vormen valt die toename toch wel mee? Omdat PNG wel lossless compressie ondersteunt en dat doet het over het algemeen goed met gelijkvormige vlakken. Als je het icoontje 2x zo groot maakt dan introduceer je juist blurring dus dan heb je meer langzame overgangen, maar als je een 2x zo groot icoon maakt dat gewoon strak is denk ik wel dat je wat ruimte bespaart.

Ik heb ook even een testje gedaan met een simpele afbeelding:
100x100, 2678 bytes

50x50, 2476 bytes

Als ik vervolgens die 50x50 weer upscale naar 100x100 wordt hij en blurry en opeens 9372 bytes groot:


Je zou ook trouwens server-based kunnen checken of de gebruiker retina/HiDPI heeft en zo ja een andere logo file serveren. Maar dat is weer veel meer werk natuurlijk.

Maar zoals ik al zei: Voor de foto's hoeft het niet eens zo gauw, omdat de onscherpte daarbij veel minder opvalt. Het is vooral de logo's die er niet zo strak uitzien.

[ Voor 5% gewijzigd door GekkePrutser op 10-12-2012 12:52 ]

[Kees]

Tja, maar juist de retina gebruikers zitten weer vaak met langzame verbindingen en datalimieten, en weet je dan zeker dat de gebruiker wel die retina wil?

Kortom, zo heel erg eenvoudig is het niet.

[GekkePrutser]

Kees schreef op maandag 10 december 2012 @ 13:05:
Tja, maar juist de retina gebruikers zitten weer vaak met langzame verbindingen en datalimieten, en weet je dan zeker dat de gebruiker wel die retina wil?

Kortom, zo heel erg eenvoudig is het niet.

Ja dat is waar. Ik zou het er zelf denk ik op het telefoon profiel ook uit laten (dan zit je meestal toch flink uitgezoomd te werken), en het alleen op het A profiel doen van de devicedetect. Als je het dan toch wil hebben kan je toch nog je grade forceren. Er komen ook wel steeds meer computers met HiDPI trouwens, ook buiten Apple (ik wou alleen dat de HiDPI schermen op 24" formaat eens zouden komen )

Ik snap inderdaad dat het een moeilijke kwestie is, misschien is het aandeel aan retina gebruikers ook nog niet hoog genoeg om het extra werk te verantwoorden. Ik weet dat er een hoop meer bij komt kijken dan alleen een IMG tag veranderen, zoals testen, onderhoud e.d.

[GekkePrutser]

Voor wie het interesseert, het stoorde me toch nog steeds wel een beetje En je bent een tweaker of je bent het niet, dus ik heb wat zitten prutsen en zelf een vervangend plaatje gemaakt in retina resolutie dat je er met custom CSS op kan zetten.

Het werkt door wat code in je custom stylesheet te zetten (onder voorkeuren en dan persoonlijke stylesheet instellingen). Die verbergt het oude logo en voegt het nieuwe (geschaald) toe.

Hij is niet 100% hetzelfde als het gewone logo, ik ben geen graficus dus het is wel wat knutselwerk geworden, ik vond een hoger resolutie logo en dat heb ik omgewerkt tot hetzelfde plaatje. Maar hij scaled wel netjes down als je hem op een niet-retina scherm zet. Alleen de kleur van het groen is iets feller en het fontje is iets anders want ik kon het gebruikte font niet vinden, en de tekst is iets minder vet. Oh en het groene lijntje onder de T is iets dikker, ik vond dat eigenlijk wel mooi dus ik heb het maar zo gelaten. Al met al vind ik het op een retina scherm wel een verbetering.

Hij is trouwens inderdaad wel flink groter geworden, 26kB nu, ik had verwacht dat het minder zou zijn omdat er veel egale vlakken in zitten. Maar er zit toch nog steeds veel anti-aliasing in met verschillende kleuren. Dus dat punt klopt inderdaad zeker wel, het wordt zeker groter.

Ik ben nog bezig met de logo's voor notificaties, helderheid enz, die bleken nog best lastig na te maken zijn omdat ze allemaal in 1 plaatje zitten. Voor de rest stoort het me niet zo, de foto's vind ik niet zo belangrijk. Daarbij valt het veel minder op.

Wat wel grappig is om te zien is dat het kleine avatar plaatje naast je naam rechts al in retina is, kennelijk is het gewoon je normale avatar file die client-side gedownscaled wordt.

Wat ik wou vragen: Vinden jullie (devvers) het goed als ik de code hier plaats (met een link naar het plaatje dat ik gemaakt heb?), dan kunnen de liefhebbers het gebruiken in hun custom CSS. Ik vraag het maar even omdat het om een beeldmerk van Tweakers gaat natuurlijk. Dus ik weet niet of ik het plaatje hier mag posten.

[crisp]

Ik heb daar geen problemen mee hoor

[GekkePrutser]

crisp schreef op woensdag 06 februari 2013 @ 12:24:
Ik heb daar geen problemen mee hoor

Okee, bedankt! Voor de liefhebbers dan:

#logo img { 
	visibility: hidden; 
}
#logo a { 
	position:absolute;
	width:auto;
	height:auto;
	background-image:url('http://tweakers.net/ext/f/dIGCIbm561cvqkb873nnMoCv/full.png');
  	background-size: 213px 85px;
	background-position:  0px -85px;
}

Dit dus onder Voorkeuren -> Persoonlijke stylesheet instellingen pasten (plaatje staat op mijn T.net fotoalbum vandaar de link naar tweakers.net).

[zeef]

Misschien een leuke abo feature. RetinaTweakers.

[Koen-]

Inmiddels zijn we al weer een tijdje verder maar en nog steeds is er niets veranderd? Er moet toch wel een makkelijke oplossing zijn? Van mij hoeven niet alle plaatjes vervangen te worden (lage resolutie smilies oké) maar het logo en de knopjes in de bar rechts zouden wel tof zijn.

[ZpAz]

Ik stem voor!

[Zerora]

Is zo'n script niks?

http://retinajs.com/

MIsschien kunnen jullie, devvers, er iets bruikbaars uithalen of het script zelf gebruiken ofzo.

[ Voor 53% gewijzigd door Zerora op 13-08-2013 21:08 ]

[Ramon]

Zerora schreef op dinsdag 13 augustus 2013 @ 21:07:
Is zo'n script niks?

http://retinajs.com/

MIsschien kunnen jullie, devvers, er iets bruikbaars uithalen of het script zelf gebruiken ofzo.

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Misschien leuk voor een blogje ofzo, maar voor een site als t.net lijkt het me niet verstandig om een JS gewoon willekeurig requests te laten doen naar een server voor ieder plaatje wat het tegenkomt in een pagina. Dat zou denk ik alles heel erg vertragen en daarnaast een bijna dubbele load veroorzaken.

Het wordt gewoon heel erg complex zodra je mobieltjes en tablets in het verhaal gaat betrekken, dus ik snap wel dat het wat langer duurt om alles recht te trekken wat betreft responsive.

Maar vergeet ook vooral niet ander HiDPI apparaten, er is meer dan alleen "Retina".

[crisp]

Zerora schreef op dinsdag 13 augustus 2013 @ 21:07:
Is zo'n script niks?

http://retinajs.com/

MIsschien kunnen jullie, devvers, er iets bruikbaars uithalen of het script zelf gebruiken ofzo.

Zoals Ramon al aangeeft zorgt dat voor dubbele requests en dus nog meer overhead voor Retina (HdDPI) terwijl je juist niet kan schakelen op bandbreedte.

Het is ook heel erg afhankelijk van het soort plaatje of double-sized significant groter is of niet. Zoals GekkePrutser al eerder aangaf kan het voor bepaalde plaatjes zelfs zo zijn dat het niets tot weinig uitmaakt. Sterker nog, als ik zijn plaatjes nog eens door ScriptPNG heenhaal krijg ik dit:

50x50 - 1876 bytes


100x100 - 1278 bytes


oftewel: de high-res is zelfs kleiner!

De vraag is dan ook hoe dat voor het logo uitpakt; dat zouden we dan gewoon moeten proberen. Wel heeft het logo meer kleuren en een alpha-transparante gradient.

Binnen het responsive project maken we overigens al gebruik van high-res icons voor o.a. het menu speciaal voor HiDPI schermen

[ Voor 5% gewijzigd door crisp op 13-08-2013 22:27 ]

[Copyman]

Deze week werd mij ook gevraagd om eens naar optimalisatie voor high-dpi displays te kijken en kwam deze oplossing tegen: http://shauninman.com/tmp/retina/

Een minimaal aangepaste versie (uitsluiten van bepaalde devices) draait inmiddels 3 dagen zonder problemen en je hebt er eigenlijk geen omkijken naar.

Handige lijsten met high-dpi displays trouwens.

[ Voor 17% gewijzigd door Copyman op 14-08-2013 22:43 ]

[Verwijderd]

Btw, voor iedereen die zeurt over zware pagina's en datalimiten enzo
Er bestaat zoiets als een browsercache, eenmaal ophalen van server(met goede PNG optimalisatie kan je retina logo in +-20kb proppen) en het hoeft geen 2de keer met de meeste browsers

[crisp]

Verwijderd schreef op woensdag 14 augustus 2013 @ 22:40:
Btw, voor iedereen die zeurt over zware pagina's en datalimiten enzo
Er bestaat zoiets als een browsercache, eenmaal ophalen van server(met goede PNG optimalisatie kan je retina logo in +-20kb proppen) en het hoeft geen 2de keer met de meeste browsers

Juist de cache op mobiele devices is behoorlijk gelimiteerd...

[rogierslag]

Hoe staat het hiermee momenteel? Ik zou eerlijk gezegd al behoorlijk blij zijn als de logo's van de tracker, tweakers.net zelf, die drie gekke icoontjes rechtsboven en het True dingetje er weer scherp uitzien. (het is dat ik weet dat er "hosted by" staat maar echt lekker leest het niet).

Inmiddels bestaan retina schermen al best een flinke tijd in telefoons, tablets en ook de Macbook pro met retina scherm is ruim een jaar op de markt. Nog altijd best lang in de technologiewereld; ik had verwacht dat t.net inmiddels ook "over" was geweest.

Die images worden vrijwel altijd geladen en zitten dus snel genoeg in je cache. Zeker voor alle A-grade devices zoals macbooks zou dit geen probleem moeten zijn om op te halen (die maken ook heel veel minder gebruik van 3g dan smartphones). Denk zelfs dat de meeste tablets vooral via wifi connecten, dus de snelheid daar ook meevalt.

-edit
Ik heb nu maar de volgende plugin geinstalleerd en zal zelf ook nog wel high res plaatjes maken voor wat ik net aangaf: http://www.pimpmysafari.com/items/User-CSS-Safari-Extension/. Code post ik hier wel.
@GekkePrutser: Lekker werk!
Heb ook meteen maar even dat gekke witte vakje waar mijn avatar niet instaat weggehaald

[ Voor 15% gewijzigd door rogierslag op 21-09-2013 12:27 ]

[jmxd]

Als tip aan de devvers zou ik ze willen wijzen op www.dribbble.com, die website is geheel geoptimaliseerd voor retina schermen en laadt alleen de grotere afbeeldingen als het ook daadwerkelijk een retina scherm is. Anders krijg je de normale versies.

[crisp]

Twylight schreef op dinsdag 24 september 2013 @ 22:50:
Als tip aan de devvers zou ik ze willen wijzen op www.dribbble.com, die website is geheel geoptimaliseerd voor retina schermen en laadt alleen de grotere afbeeldingen als het ook daadwerkelijk een retina scherm is. Anders krijg je de normale versies.

Mooi voorbeeld; de retina-versie van de homepage is ook maar liefst 1MB groter dan de gewone versie

[jmxd]

crisp schreef op dinsdag 24 september 2013 @ 23:38:
[...]

Mooi voorbeeld; de retina-versie van de homepage is ook maar liefst 1MB groter dan de gewone versie

Het is dan ook een website met erg veel afbeeldingen, op Tweakers zal dat verschil niet zo groot zijn gok ik

[crisp]

Twylight schreef op dinsdag 24 september 2013 @ 23:52:
[...]
Het is dan ook een website met erg veel afbeeldingen, op Tweakers zal dat verschil niet zo groot zijn gok ik

Als je je beperkt tot de belangrijkste grafische elementen in de user interface valt dat wel mee ja; dat passen we dan ook al toe binnen het responsive project.