Twee verschillende afbeeldingen op website en mobiele site

[dannyvdb1997]

Beste Tweakers,

Het klinkt als een stomme vraag. Ik wil op mijn site een leaderboard van 728px breed plaatsen. Op mijn mobiele site moet echter op dezelfde plaats een 250x250 banner terecht komen. Deze moet de 728 leaderboard dus vervangen. Nu heb ik heel internet al afgestruind en verschillende tutorials tegengekomen, maar ik kom er niet uit.

Ik heb onder andere deze code gebruikt:
<code>
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
</code>

En dit in de CSS gezet:
<code>
@media (min-device-width:320px) {
img[data-src-960px] {
content: attr(data-src-960px, url);
}
}

@media (min-device-width:960px) {
img[data-src-1260px] {
content: attr(data-src-1260px, url);
}
}
</code>
Ik krijg de afbeelding dan wel te zien, maar op mobiel zie ik niet de 250x250 banner.

Heeft er iemand tips?

[_Erikje_]

Dit werkt niet met css, wel met een beetje JavaScript. Google even op responsive images, het kan wel zonder js

https://css-tricks.com/re...g-resolutions-use-srcset/

[ Voor 28% gewijzigd door _Erikje_ op 13-01-2016 22:46 ]

[Morrar]

Zou je niet beide plaatjes in de broncode kunnen zetten met display: none. Vervolgens kun je dan met @media de correcte op display: block zetten zodat alleen die getoond wordt.

Of een div maken en vervolgens met @media de correcte afmetingen en het juiste achtergrondplaatje instellen? Dan wordt alleen het juiste plaatje geladen.

[ Voor 7% gewijzigd door Morrar op 13-01-2016 23:25 ]

[dannyvdb1997]

_Erikje_ schreef op woensdag 13 januari 2016 @ 22:45:
Dit werkt niet met css, wel met een beetje JavaScript. Google even op responsive images, het kan wel zonder js

https://css-tricks.com/re...g-resolutions-use-srcset/

Ah, met deze site ben ik al veel verder gekomen.

Als ik deze code plak in mijn pagina, is het bijna goed.

<img
src="http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/screativeref-adidas5.jpeg"
srcset="http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/screativeref-diedmeister3.jpeg 1280w,
http://voetbalindebollens...screativeref-adidas5.jpeg 640w,
http://voetbalindebollens...screativeref-adidas5.jpeg 320w"
sizes="(max-width: 500px) 250px, 500px"
alt="whatever">

Op mijn laptop heb ik het goede formaat, op mijn iPhone 6s ook, maar op de iPhone 4s van mijn moeder niet. Dan krijg ik de 728 banner weer. Voor jullie beeldvorming.

Dit is de 250x250 banner: http://voetbalindebollens...screativeref-adidas5.jpeg
Dit is de 728 leaderboard: http://voetbalindebollens...tiveref-diedmeister3.jpeg

[Merethil]

Morrar schreef op woensdag 13 januari 2016 @ 23:24:
Zou je niet beide plaatjes in de broncode kunnen zetten met display: none. Vervolgens kun je dan met @media de correcte op display: block zetten zodat alleen die getoond wordt.

Of een div maken en vervolgens met @media de correcte afmetingen en het juiste achtergrondplaatje instellen? Dan wordt alleen het juiste plaatje geladen.

Probleem hiermee is dat je alsnog beide plaatjes laadt via HTTP requests en dan alleen niet toont. Zonde van de bandbreedte lijkt mij

[Morrar]

Merethil schreef op donderdag 14 januari 2016 @ 08:49:
[...]


Probleem hiermee is dat je alsnog beide plaatjes laadt via HTTP requests en dan alleen niet toont. Zonde van de bandbreedte lijkt mij

Daar had ik ook aan gedacht, vandaar de oplossing met de DIV met de background-image in de CSS. Dus zoiets:

code:

@media (min-device-width:8000px) {
    div#banner {
         width: 750px;
         height: 100px;
         background-image: url('banner_large.jpg');
    }
}

@media (min-device-width:320px) {
    div#banner {
         width: 250px;
         height: 50px;
         background-image: url('banner_small.jpg');
    }
}

Ik zou verwachten dat een background image voor een niet relevante stijl niet geladen wordt, maar misschien heb ik het mis...

[dannyvdb1997]

Morrar schreef op donderdag 14 januari 2016 @ 09:18:
[...]


Daar had ik ook aan gedacht, vandaar de oplossing met de DIV met de background-image in de CSS. Dus zoiets:

code:

@media (min-device-width:8000px) {
    div#banner {
         width: 750px;
         height: 100px;
         background-image: url('banner_large.jpg');
    }
}

@media (min-device-width:320px) {
    div#banner {
         width: 250px;
         height: 50px;
         background-image: url('banner_small.jpg');
    }
}

Ik zou verwachten dat een background image voor een niet relevante stijl niet geladen wordt, maar misschien heb ik het mis...

Ah, oke. En wat is dan de beste manier om de banners op te roepen in het bericht?

[Merethil]

Morrar schreef op donderdag 14 januari 2016 @ 09:18:
[...]


Daar had ik ook aan gedacht, vandaar de oplossing met de DIV met de background-image in de CSS. Dus zoiets:

code:

@media (min-device-width:8000px) {
    div#banner {
         width: 750px;
         height: 100px;
         background-image: url('banner_large.jpg');
    }
}

@media (min-device-width:320px) {
    div#banner {
         width: 250px;
         height: 50px;
         background-image: url('banner_small.jpg');
    }
}

Ik zou verwachten dat een background image voor een niet relevante stijl niet geladen wordt, maar misschien heb ik het mis...

Met een background-image zou het inderdaad kunnen, maar lijkt mij niet de makkelijkste oplossing. Via Javascript kan je natuurlijk prima afvangen of iets wel of niet getoond moet worden. Wil je het in CSS opvangen dan is het inderdaad zo wel te doen.

[Barryvdh]

Kan je niet de Picturefill library gebruiken, om op andere browsers ook het gewenste effect te krijgen?
http://scottjehl.github.io/picturefill/

[Morrar]

dannyvdb1997 schreef op donderdag 14 januari 2016 @ 09:20:
[...]


Ah, oke. En wat is dan de beste manier om de banners op te roepen in het bericht?

Gewoon met een leeg <div>-element. Eenvoudig voorbeeldje:

code:

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="banner"><!-- Banner komt hier --></div>
        <div id="text">Hier komt dan de rest van de tekst... </div>
    </body>
</html>

De CSS zorgt voor de correcte afmetingen en de correcte afbeelding van de banner <div>.

Merethil schreef op donderdag 14 januari 2016 @ 09:20:
[...]


Met een background-image zou het inderdaad kunnen, maar lijkt mij niet de makkelijkste oplossing. Via Javascript kan je natuurlijk prima afvangen of iets wel of niet getoond moet worden. Wil je het in CSS opvangen dan is het inderdaad zo wel te doen.

Zeker waar dat het met Javascript ook prima kan. Ik ben iets te lang uit de business om een oordeel te vellen over wat het beste is. Javascript oplossing is wellicht eenvoudiger, maar wel afhankelijk van (het aan hebben staan van) Javascript.

Tot slot zou je nog kunnen testen wat sneller is qua layouten; voordeel van CSS is wellicht dat de browser het direct interpreteerd en kan renderen. Javascript moet eerst draaien voordat de layout afgerond kan worden. Maar goed, gaat natuurlijk slechts over milliseconden

[ Voor 42% gewijzigd door Morrar op 14-01-2016 10:42 ]

[Merethil]

Morrar schreef op donderdag 14 januari 2016 @ 10:38:
[...]


Gewoon met een leeg <div>-element. Eenvoudig voorbeeldje:

code:

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="banner"><!-- Banner komt hier --></div>
        <div id="text">Hier komt dan de rest van de tekst... </div>
    </body>
</html>

De CSS zorgt voor de correcte afmetingen en de correcte afbeelding van de banner <div>.


[...]


Zeker waar dat het met Javascript ook prima kan. Ik ben iets te lang uit de business om een oordeel te vellen over wat het beste is. Javascript oplossing is wellicht eenvoudiger, maar wel afhankelijk van (het aan hebben staan van) Javascript.

Tot slot zou je nog kunnen testen wat sneller is qua layouten; voordeel van CSS is wellicht dat de browser het direct interpreteerd en kan renderen. Javascript moet eerst draaien voordat de layout afgerond kan worden. Maar goed, gaat natuurlijk slechts over milliseconden

Hoogstens inderdaad dat de image sneller ingeladen wordt met CSS, tenzij je je javascript ook gewoon laat starten vóór document-ready: De ruimte wordt vast gealloceerd door je CSS queries, en je javascript bepaalt welke IMG src in te laden. Maar goed, ik denk inderdaad dat background een betere is, performance-wise.

[dannyvdb1997]

Bedankt voor de hulp iedereen. Met behulp van deze code in de CSS:

code:

@media (min-device-width:200px) {
    div#banneradidas {
         width: 336px;
         height: 280px;
         background-image: url('http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/screativeref-adidas5.jpeg');
    }
}

@media (min-device-width:100px) {
    div#banneradidas {
         width: 728px;
         height: 68px;
         background-image: url('http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/banner728.jpg');
    }
}

En deze in het bericht is het gelukt:

code:

<div id="banneradidas"></div>

[ Voor 17% gewijzigd door dannyvdb1997 op 14-01-2016 11:18 ]

[Merethil]

dannyvdb1997 schreef op donderdag 14 januari 2016 @ 11:14:
Bedankt voor de hulp iedereen. Met behulp van deze code in de CSS:

code:

@media (min-device-width:200px) {
    div#banneradidas {
         width: 336px;
         height: 280px;
         background-image: url('http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/screativeref-adidas5.jpeg');
    }
}

@media (min-device-width:100px) {
    div#banneradidas {
         width: 728px;
         height: 68px;
         background-image: url('http://voetbalindebollenstreek.nl/wp-content/uploads/2016/01/banner728.jpg');
    }
}

En deze in het bericht is het gelukt:

code:

<div id="banneradidas"></div>

Ik zou wel op de "lagere resolutie" een max-device-width zetten zodat ze elkaar niet per ongeluk kunnen overlappen.
Kijk bijvoorbeeld ook naar de onderste post in deze thread: http://stackoverflow.com/...us-responsive-breakpoints

[ Voor 7% gewijzigd door Merethil op 14-01-2016 11:23 ]

[dannyvdb1997]

Merethil schreef op donderdag 14 januari 2016 @ 11:19:
[...]


Ik zou wel op de "lagere resolutie" een max-device-width zetten zodat ze elkaar niet per ongeluk kunnen overlappen.
Kijk bijvoorbeeld ook naar de onderste post in deze thread: http://stackoverflow.com/...us-responsive-breakpoints

Goede idd. Op iPhone en gewone site werkt het, maar op Samsung weer niet. Waar kan dit dan ergens aan liggen...

[Merethil]

dannyvdb1997 schreef op donderdag 14 januari 2016 @ 11:53:
[...]


Goede idd. Op iPhone en gewone site werkt het, maar op Samsung weer niet. Waar kan dit dan ergens aan liggen...

Dat ligt waarschijnlijk aan dat de Samsung weer een andere pixelcount en device-pixel-ratio heeft dan je iPhone. Je kan er vanuit gaan dat dit voor veel apparaten verschilt en dus op de Samsung zul je misschien weer andere breedtes moeten pakken.

Als je naar http://www.whatismyscreenresolution.com/ gaat met jouw specifieke devices zie je wat voor resolutie gebruikt wordt door de browser en dus op welke sizes je moet richten voor jouw specifieke devices.
Over het algemeen is het trouwens ook handider om de maat "em" te gebruiken ipv "px" aangezien em weer een X-aantal pixels is per em, maar ook van device tot device kan wisselen.

Voorbeeldje van die website: Ik heb een Nexus 5 met 1920x1080 resolutie, maar de resolutie die mijn browser gebruikt is 640x360, oftewel ik heb een DPR van 3.0 (breedte en hoogte delen door 3 geeft mijn "echte" browserresolutie).

Reden waarom dit gebeurt is omdat het op 1920x1080 heel vervelend sites bekijken is op een 5" schermpje: Je ziet geen ruk tenzij je heel erg inzoomed. Nu heeft je device dat dus eigenlijk al voor je gedaan. Dit zijn dus ook de specifieke resoluties waar je media queries naar kijken, niet de resolutie van het paneel van het device zelf.

[bartvb]

Andere optie die wat flexibeler maar ook ingewikkelder is, is het gebruik van een adserver. DFP (Adserver van Google) heeft bijvoorbeeld:

https://support.google.com/dfp_sb/answer/4525701?hl=en

Waarmee je verschillende formaten ads weer kan geven op verschillende devices.

DFP is gratis (zolang je geen mega ingewikkelde dingen wil) maar het is wel even puzzelen als je helemaal nieuw bent in de online advertising wereld. Als je echter regelmatig campagnes verkoopt en als je ook gebruik wil maken van b.v. AdSense dan kan het nog best een aardige optie zijn. Ook omdat je op die manier de adverteerder makkelijker kan vertellen hoe vaak de creatives zijn bekeken en hoe vaak er is doorgeklikt.

[dannyvdb1997]

Op iPhone lijkt het allemaal goed te werken en op de HTC Desire 516 van mijn zusje ook. Alleen de S6 Edge blijft moeilijk doen en ook een Blackberry doet niet wat het moet doen. Dit zijn de screenresoluties: http://imgur.com/a/IgFI7

In de CSS heb ik voor de vierkante banner max 1000px ingesteld.

[Mustii_93]

dannyvdb1997 schreef op woensdag 13 januari 2016 @ 17:34:
Beste Tweakers,

Het klinkt als een stomme vraag. Ik wil op mijn site een leaderboard van 728px breed plaatsen. Op mijn mobiele site moet echter op dezelfde plaats een 250x250 banner terecht komen. Deze moet de 728 leaderboard dus vervangen. Nu heb ik heel internet al afgestruind en verschillende tutorials tegengekomen, maar ik kom er niet uit.

Ik heb onder andere deze code gebruikt:
<code>
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
</code>

En dit in de CSS gezet:
<code>
@media (min-device-width:320px) {
img[data-src-960px] {
content: attr(data-src-960px, url);
}
}

@media (min-device-width:960px) {
img[data-src-1260px] {
content: attr(data-src-1260px, url);
}
}
</code>
Ik krijg de afbeelding dan wel te zien, maar op mobiel zie ik niet de 250x250 banner.

Heeft er iemand tips?

Wat je kunt doen is een div met de juiste groote,
en dan met je CSS een background-image toevoegen, met een media query verander je de background en de grootte van de banner.
Linkje naar een voorbeeldje
http://codepen.io/anon/pen/Bjdewa

Oops, ik zie net dat het zelfde al eerder is gezegd.

[dannyvdb1997]

Mustii_93 schreef op donderdag 14 januari 2016 @ 19:31:
[...]


Wat je kunt doen is een div met de juiste groote,
en dan met je CSS een background-image toevoegen, met een media query verander je de background en de grootte van de banner.
Linkje naar een voorbeeldje
http://codepen.io/anon/pen/Bjdewa

Oops, ik zie net dat het zelfde al eerder is gezegd.

Oké, heb deze nu op een aantal pagina's neergezet. Blackberry blijkt nog steeds niet te werken. Voor S6 Edge wacht ik nog op respons...

Trouwens iedereen bedankt voor de hulp! Voor een groot gedeelte werkt het (op een aantal devices na...)

[ Voor 8% gewijzigd door dannyvdb1997 op 14-01-2016 20:03 ]

[Mustii_93]

dannyvdb1997 schreef op donderdag 14 januari 2016 @ 20:03:
[...]


Oké, heb deze nu op een aantal pagina's neergezet. Blackberry blijkt nog steeds niet te werken. Voor S6 Edge wacht ik nog op respons...

Trouwens iedereen bedankt voor de hulp! Voor een groot gedeelte werkt het (op een aantal devices na...)

Wat werkt er niet precies?
Wat heb je al gebruikt, wat voor media queries