name: image-types layout: false class: center middle section-title section-title-4 animated fadeIn # Image types --- layout: true class: title title-4 --- # Image types .pull-left[ .box-inv-4.medium[Bitmaps] .center[] .box-4.small[**JPEG**: Photographs] .box-4.small[**PNG/GIF**: Images<br>with limited colors] ] -- .pull-right[ .box-inv-4.medium[Vectors] .center[] .box-4.small[**PDF (or EPS)**:<br>Anything vector based] .box-4.small[**SVG**: Vectors online] ] --- layout: false .box-4.small[PNG • 130 KB] .center[ <figure> <img src="img/03/main-plot.png" alt="Standard PNG" title="Standard PNG" width="60%"> </figure> ] --- .box-4.small[PNG • 130 KB • Zoomed] .center[ <figure> <img src="img/03/main-plot-zoomed.png" alt="Standard PNG zoomed" title="Standard PNG zoomed" width="60%"> </figure> ] --- .box-4.small[JPG • 75% quality • 161 KB] .center[ <figure> <img src="img/03/main-plot-75.jpg" alt="75% JPG" title="75% JPG" width="60%"> </figure> ] --- .box-4.small[JPG • 75% quality • 161 KB • Zoomed] .center[ <figure> <img src="img/03/main-plot-75-zoomed.jpg" alt="75% JPG zoomed" title="75% JPG zoomed" width="60%"> </figure> ] --- .box-4.small[JPG • 10% quality • 88 KB] .center[ <figure> <img src="img/03/main-plot-10.jpg" alt="10% JPG zoomed" title="10% JPG zoomed" width="60%"> </figure> ] --- .box-4.small[JPG • 10% quality • 88 KB • Zoomed] .center[ <figure> <img src="img/03/main-plot-10-zoomed.jpg" alt="10% JPG zoomed" title="10% JPG zoomed" width="60%"> </figure> ] --- class: center middle  --- class: center middle <figure> <img src="img/03/xkcd-compression.png" alt="xkcd compression comic" title="xkcd compression comic" width="100%"> </figure> ??? <https://xkcd.com/1683/> --- class: title title-5 # In defense of the JPG .pull-left.center[ <figure> <img src="img/03/benjamin.jpg" alt="Benjamin" title="Benjamin" width="62%"> <figcaption>Benjamin, December 2017</figcaption> </figure> ] .pull-right[ .box-inv-4[**RAW**<br>No compression • 27.1 MB 😱] .box-inv-4[**JPG**<br>75% quality • 3.2 MB] .box-inv-4[**JPG**<br>10% quality • 654 KB] .box-inv-4[**PNG**<br>32.9 MB 😱] ] --- class: title title-5 # Use the right file type .pull-left[ .center[ <figure> <img src="img/03/atl-small.jpg" alt="Atlanta" title="Atlanta" height=200> </figure> ] .box-inv-4[Photographs] .pull-left[ .box-4[Web] .box-inv-4[JPG] ] .pull-right[ .box-4[Print] .box-inv-4[JPG] ] ] .pull-right[ .center[ <figure> <img src="img/03/main-plot.png" alt="Health wealth" title="Health wealth" height=200> </figure> ] .box-inv-4[Graphs & logos] .pull-left[ .box-4[Web] .box-inv-4[PNG or SVG] ] .pull-right[ .box-4[Print] .box-inv-4[PDF] ] ] ??? Photo by [Brad Huchteman](https://unsplash.com/photos/sR1Kz2auNJE) on Unsplash --- class: title title-5 # What programs do I use? -- .pull-left-3.center[ ## Photos/bitmaps <figure> <a href="https://www.adobe.com/products/photoshop.html" target="_blank"><img src="img/03/ps.png" alt="Adobe Photoshop" title="Adobe Photoshop" width="175"></a> <figcaption>Adobe Photoshop</figcaption> </figure> .pull-left[ <figure> <a href="https://www.gimp.org/" target="_blank"><img src="img/03/gimp.png" alt="GIMP" title="GIMP" width="120"></a> <figcaption>GIMP</figcaption> </figure> ] .pull-right[ <figure> <a href="https://www.canva.com/" target="_blank"><img src="img/03/canva.png" alt="Canva" title="Canva" width="120"></a> <figcaption>Canva</figcaption> </figure> ] ] -- .pull-middle-3.center[ ## Vectors <figure> <a href="https://www.adobe.com/products/illustrator.html" target="_blank"><img src="img/03/ai.png" alt="Adobe Illustrator" title="Adobe Illustrator" width="175"></a> <figcaption>Adobe Illustrator</figcaption> </figure> .pull-left[ <figure> <a href="https://inkscape.org/" target="_blank"><img src="img/03/inkscape.png" alt="Inkscape" title="Inkscape" width="120"></a> <figcaption>Inkscape</figcaption> </figure> ] .pull-right[ <figure> <a href="https://www.designer.io/en/" target="_blank"><img src="img/03/gravit.png" alt="Gravit Designer" title="Gravit Designer" width="120"></a> <figcaption>Gravit Designer</figcaption> </figure> ] ] -- .pull-right-3.center[ ## Documents <figure> <a href="https://www.adobe.com/products/indesign.html" target="_blank"><img src="img/03/id.png" alt="Adobe InDesign" title="Adobe InDesign" width="175"></a> <figcaption>Adobe InDesign</figcaption> </figure> .pull-left[ <figure> <a href="https://www.scribus.net/" target="_blank"><img src="img/03/scribus.png" alt="Scribus" title="Scribus" width="120"></a> <figcaption>Scribus</figcaption> </figure> ] .pull-right[ <figure> <a href="https://www.canva.com/" target="_blank"><img src="img/03/canva.png" alt="Canva" title="Canva" width="120"></a> <figcaption>Canva</figcaption> </figure> ] ]