100% jpg
Gesponsorde koppelingen:
100% is inderdaad de beste JPEG kwaliteit. Dit zou groter moeten zijn dan 50%, maar kan volgens mij ook wel eens wat wisselen. Aan de bestandsgrootte alleen kun je niet zien wat de kwaliteit is.
Op net.tutsplus.com stond hierover een hele mooie tutorial een jaar geleden, ik zal hem eens opzoeken.
EDIT: 15 min. gezocht, blijkt het op webdesign.tutsplus.com te staan :(. Hier dan eindelijk de tutorial: http://webdesign.tutsplus.com/articles/general/image-types-and-usage-in-web-design/
Gewijzigd op 04/01/2012 11:27:38 door Wouter J
Maar voor een design zou ik altijd PNG gebruiken, dan kun je spelen met opacity en krijg je de scherpste beelden.
Maar voor bijv. foto's zijn deze scherpen beelden veel te veel, dus dan gebruik je JPEG.
En voor simpele afbeeldingen gebruik je GIF. En zo moet je het echt per afbeelding bekijken.
Edit:
Dan bedoel ik wel PNG24 en geen PNG8
Gewijzigd op 04/01/2012 11:40:17 door Wouter J
Als het bestand van lagen gestript is (plat gemaakt voor jpeg) is het volgens mij lastiger om van bepaalde elmeenten de eigenschappen (hoogte, breedte, correcte kleur, kleurverloop, schaduw, afronding, etc, etc) te bepalen. Als de afbeelding in PSD of Fireworks PNG beschikbaar is kan je dit allemaal in de eigenschappen van de elementen terugvinden.
Vervolgens ga je de site schrijven in HTML. Schrijf gewoon alle HTML, geen CSS erbij en niet nadenken 'hoe zou ik dit doen in CSS', nee focus je dan op het schrijven van juiste semantische HTML. Een goede, maar wel ietwat lange, video hierover: Let's Write Semantic Markup van CSS-tricks.
Zodra je je HTML klaar hebt gaan je de CSS maken. Mocht je het niet lukken met alleen CSS, maar heb je ook een afbeelding nodig. Ga dan naar die laag, kopieer de afbeelding sla het op als PNG en gebruik het. Ik dacht dat je dit bedoelde, de afbeeldingen in je design, maar voor slicen PSD gebruiken!
Schrijf jij eerst je pagina helemaal in html (zonder enige opmaak, dus gewoon als tekst)en ga je daarna pas de css toevoegen?
Ozzie PHP:
Schrijf jij eerst je pagina helemaal in html (zonder enige opmaak, dus gewoon als tekst)en ga je daarna pas de css toevoegen?
Ja, want dan weet ik zeker dat ik HTML schrijf via de HTML semantiek en niet omdat het nodig is voor stijlen.
Even een snel gemaakt voorbeeldje:
Je hebt deze footer gemaakt:
Nu ga ik HTML typen voor CSS, dus met in gedachte hoe ik alles ga opmaken (dit is dus verkeerd!):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<footer>
<div class="contact">
<h4>Contact</h4>
<p>Webdesignstraat 45<br>
3132 WD PLAATS<br>
0600-34993106
</div>
<div class="about">
<h4>About</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere.</p>
</div>
<div class="social">
<a href="http://twitter.com/"><img src="img/twitter.png" alt="Twitter"></a>
<a href="http://facebook.com/"><img src="img/facebook.png" alt="Facebook"></a>
<a href="rss-feed.xml"><img src="img/feed.png" alt="RSS feed"></a>
</div>
<div class="copyright">
<p>© Copyright 2012 - Wouter J</p>
</div>
</footer>
<div class="contact">
<h4>Contact</h4>
<p>Webdesignstraat 45<br>
3132 WD PLAATS<br>
0600-34993106
</div>
<div class="about">
<h4>About</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere.</p>
</div>
<div class="social">
<a href="http://twitter.com/"><img src="img/twitter.png" alt="Twitter"></a>
<a href="http://facebook.com/"><img src="img/facebook.png" alt="Facebook"></a>
<a href="rss-feed.xml"><img src="img/feed.png" alt="RSS feed"></a>
</div>
<div class="copyright">
<p>© Copyright 2012 - Wouter J</p>
</div>
</footer>
Je denkt, dit ziet er aardig uit. Maar als je naar HTML semantiek kijkt klopt dit niet.
Als ik eerst alleen semantisch nadenk en daarna pas via opmaak krijg je het wel goed:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<footer>
<section class="information">
<div>
<h4>Contact</h4>
<address>
Webdesignstraat 45<br>
3123 WD PLAATS<br>
0600-3499306
</address>
</div>
<div>
<h4>About</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere.</p>
</div>
</section>
<ul class="social-media">
<li><a href="http://twitter.com/" title="My Tweets on Twitter">Twitter</a></li>
<li><a href="http://facebook.com/" title="Become a fan on Facebook">Facebook</a></li>
<li><a href="rss-feed.xml" title="Subscribe my RSS feed">RSS</a></li>
</ul>
<small class="copyright">
© Copyright 2012 - Wouter J
</small>
</footer>
<section class="information">
<div>
<h4>Contact</h4>
<address>
Webdesignstraat 45<br>
3123 WD PLAATS<br>
0600-3499306
</address>
</div>
<div>
<h4>About</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere.</p>
</div>
</section>
<ul class="social-media">
<li><a href="http://twitter.com/" title="My Tweets on Twitter">Twitter</a></li>
<li><a href="http://facebook.com/" title="Become a fan on Facebook">Facebook</a></li>
<li><a href="rss-feed.xml" title="Subscribe my RSS feed">RSS</a></li>
</ul>
<small class="copyright">
© Copyright 2012 - Wouter J
</small>
</footer>
Qua semantiek is dit nu op zijn best. Alles heeft netjes een tag gekregen, het is duidelijk wat belangrijk is en wat niet en je kan zelfs al een poging wagen om zonder deze code in je hoofd te zien hoe het wordt.
Ik zal waarschijnlijk wel wat meer CSS nodig hebben om dit te stijlen, maar het is stukken beter.
Als ik volgende keer iets moet maken, ga ik dat ook eens op die manier proberen.
Png (dus ongecomprimeerd): 102kb.
Huh?
Maar JPG op 100% is onzinnig. Daarvoor moet je GIF of PNG gebruiken.
De wijze waarop JPG images worden gemaakt is gemaakt voor ong. 70% kwaliteit, zodra je daar boven komt wordt de grootte onnodig groot.
PNG is gemaakt voor de wat betere kwaliteit, die levert dan een mooie bestandsgrootte, maar die heeft weer als nadeel dat als er weinig kleuren worden gebruikt de goede kwaliteit onnodig heeft.
GIF kan weer goed overweg met afbeeldingen met weinig kleur, maar veel kwaliteit. Die heeft dan de juiste grootte, alleen met meer kleuren wordt de kwaliteit weer slechter en de grootte te groot.
Elk formaat heeft zo zijn doel en zijn voor en nadelen. Daarom moet je het per image bepalen.
Het is wel "Lossless compression".
Zoals Wouter zegt: afhankelijk van waarover het gaat, is het ene of het andere formaat meer geschikt.
jpg is maar voor 1 ding goed: foto's; foto's van de realiteit.
In de realiteit heb je vloeiende overgangen van kleuren; heb je een hele reeks tinten, kleurennuances; heb je geen lijnen en randen die perfect scherp zijn, heb je geen vlakken die slechts 1 kleur bevatten.
jpg zorgt er voor dat je altijd die vloeiende overgangen blijft behouden.
Voor alle andere dingen dan foto's zijn andere formaten beter.
Gewijzigd op 06/01/2012 14:43:41 door Kris Peeters
