<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
  <channel>
    <title>pieroxy.netjpeg</title>
    <link>https://pieroxy.net/blog/tags/jpeg/</link>
    <description>tech, dev, web &amp; other stuff</description>
    <language>en</language>
    <copyright>Pieroxy</copyright>
    <pubDate>Thu, 25 Aug 2022 14:06:00 GMT</pubDate>
    <dc:creator>Pieroxy</dc:creator>
    <dc:date>2022-08-25T14:06:00Z</dc:date>
    <dc:language>en</dc:language>
    <dc:rights>Pieroxy</dc:rights>
    <image>
      <title>pieroxy.netjpeg</title>
      <url>https://pieroxy.net/blog/tags/jpeg/</url>
    </image>
    <item>
      <title>JPEG Compression: Is 80 the magic quality - Part 1 - the retina screens</title>
      <link>https://pieroxy.net/blog/2016/05/01/1462088700000.html</link>
      <content:encoded>&lt;style&gt;
table.ic {
display: inline-block;
background-color: white;
}
center {
display: block;
background-color: #eee;
font-style: italic;
padding: 10px;
margin:20px 0px;
}
&lt;/style&gt;
&lt;h3&gt;Foreword - encoding JPEGs&lt;/h3&gt;
How do you encode your JPEGs ?

&lt;p&gt;Let's take a concrete example. You you have a 150x150 image. You want to compress it in JPG, but which quality settings should you use? JPEG encoders usually take a quality setting as a parameter, between Q1 and Q100, where 1 is the worst quality and 100 the best.

&lt;center&gt;
An image encoded in different qualities. The legend shows the quality setting and the corresponding filesize.&lt;br&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_10.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 10 - 1579B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_20.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 20 - 1960B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_30.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 30 - 2260B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_40.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 40 - 2513B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_50.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 50 - 2729B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_60.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 60 - 2973B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_70.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 70 - 3308B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_80.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 80 - 3826B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_90.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 90 - 4939B&lt;/table&gt;
&lt;table class="ic"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="/images/articles/images_opt/486.c.150.jpg_100.jpg"&gt;&lt;tr&gt;&lt;td&gt;Q 100 - 32KB&lt;/table&gt;
&lt;/center&gt;

&lt;p&gt;We can see that the greater the quality, the better and bigger the image. There is clearly a compromise to be done as Q100 is clearly too big an image and the increase in filesize doesn't translate to an equivalent increase in visual quality. 80 seems a sensible choice. The filesize is 3.8KB.

&lt;p&gt;While this 80 quality settings is the most sensible, we're going to show that in some circumstances it is completely off the mark.

&lt;p&gt; In this first part, we'll focus on high density displays, aka retina screens as they were first introduced by Apple a few years ago.&lt;p class="readMore"&gt;&lt;a href="https://pieroxy.net/blog/2016/05/01/1462088700000.html"&gt;Read more...&lt;/a&gt;&lt;/p&gt;</content:encoded>
      <category domain="https://pieroxy.net/blog/categories/web-design/">Web Design</category>
      <category domain="https://pieroxy.net/blog/tags/compression/">compression</category>
      <category domain="https://pieroxy.net/blog/tags/design/">design</category>
      <category domain="https://pieroxy.net/blog/tags/image/">image</category>
      <category domain="https://pieroxy.net/blog/tags/jpeg/">jpeg</category>
      <category domain="https://pieroxy.net/blog/tags/jpg/">jpg</category>
      <category domain="https://pieroxy.net/blog/tags/web/">web</category>
      <pubDate>Sun, 01 May 2016 07:45:00 GMT</pubDate>
      <guid isPermaLink="false">tag:pieroxy.net,2016-05-01:pieroxy.net/1462088700000</guid>
      <dc:date>2016-05-01T07:45:00Z</dc:date>
    </item>
  </channel>
</rss>

