100% jpg
Een vraagje. Als je in Photoshop kiest voor "Opslaan voor web en apparaten" (in de Engelse versie "Save for web") dan kun je de kwaliteit instellen. Het valt mij op dat als ik de kwaliteit op 100% instel dat de bestandsgrootte dan kleiner is dan wanneer ik het bestand als "normale" jpg opsla en de kwaliteit op "maximaal" (12) instel. Nu vraag ik me af hoe dat kan. Je zou toch verwachten dat een kwaliteit van 100% overeenkomt met het kwaliteitsniveau "maximaal". Maar blijkbaar zit hier dus verschil in. Ik ben bezig een template te maken voor mijn cms. De definitieve versie wil ik dan opslaan als jpg zodat ik 'm kan slicen, maar ik vraag me af hoe ik 'm dan het beste kan opslaan. "Opslaan voor web en apparaten", opslaan als "normale" jpg of misschien ongecomprimeerd als TIF? Wie kan er iets meer over zeggen? En waarom kun je bij "Opslaan voor web en apparaten" kiezen voor een kwaliteit van 100% terwijl dit blijkbaar dus geen 100% is? Wie o wie...
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
Thanks voor de link Wouter! Dat waardeer ik zeer. Ik ga het eens even allemaal doorlezen. Jij zegt dat je het als png zou opslaan... maar betekent dit dat je sowieso de lay-out van een website in png zou opslaan ipv jpg?
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
Ik heb het doorgelezen. Duidelijk! Ik vraag me overigens af of webp (van Google) nog een succes gaat worden. Ik hoor er weinig over.
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.
Elwin, het is nu inderdaad een PSD. Maar het zijn zooooveel lagen. Dus vandaar dacht ik om het als 1 laag op te slaan in een jpg. Dat is / was de reden. Maar ik kan er in dat geval dus beter een png of tif van maken.
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.
Ja inderdaad... maar wel raar dat PNG, wat ongecomprimeerd is, factor 3x zo klein is dan de jpg. Toch best vreemd.
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
Oké, thanks voor de toelichting :)