Images

Image Formats

Image Formats

Raster vs Vector

Raster - Image data stored as "pixels."

  • DPI - "dots per inch" is typically 300 for print, 72 for web (but doesn't matter).
  • Retina / "high DPI" - 2 pixels for every 1
  • Blurry when enlarged
  • Program of Choice: Adobe Photoshop
  • Best Formats: PNG & JPEG

Image Formats

Raster vs Vector

Vector - Draw shapes with math

  • Use math to draw shapes using points, lines and curves
  • Typically used for fonts and logos
  • Program of choice: Adobe Illustrator
  • Format of choice: SVG

Image Formats

Raster vs Vector

Image via tutorialspark.com 

JPG / JPEG

  • Raster
  • "Joint Photographic Experts Group"
  • Up to 10:1 compression
  • Best when many colors are present with smooth variations between the colors, like a photo or painting.

PNG

  • Raster
  • "Portable Network Graphics"
  • Different compression levels:
    • 8-bit (256 colors)
    • 24-bit RGB
    • 32-bit RGBA
  • A = Alpha (transparency)
  • Best for icons, logos, or when you need to use transparency (example)

webcomic via lbrandy.com

GIF

  • "Graphic Interchange Format"
  • 8-bit (256 colors)
  • Supports animation, but video formats (MPEG / WEBM) have better compression.

SVG

  • "Scaleable Vector Graphics"
  • Vector!
  • Create with Adobe Illustrator (preferred), Photoshop, or using HTML-style markup. Learn more here.
  • Complex animated example: slack.com (underlines and exclamation points)
  • Simple example (view online here): 
<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Additional Formats

  • TIFF - uncompressed (don't use)

  • BMP - BitMap - similar to JPG but less efficient

  • WEBP - Web Picture, great compression but not supported across all browsers (caniuse.com/webp)

Image via http://superuser.com/a/296437a

Let's prepare an img

Adobe Photoshop --> preferred

pixlr.com/editor --> free online editor

Image Copyright

Everything is Copyrighted unless it tells you otherwise

Creative Commons

  • Copyright, but allows certain uses.
  • Three Variables:
    • Commercial / NonCommercial
    • Attribution
    • Derivatives (No Derivatives / Share Alike)
  • More info: creativecommons.org/licenses/

Resources page 1

Flickr advanced search

thenounproject.com

 

freevectorfinder.com

iconfinder.com

https://stocksnap.io/

http://www.gratisography.com/

http://www.splitshire.com/

http://littlevisuals.co/

http://www.lifeofpix.com/

http://images.superfamous.com/

https://picjumbo.com/

http://www.nypl.org/research/collections/digital-collections/public-domain

https://www.pexels.com/

http://www.freeimages.com/

http://deathtothestockphoto.com/

https://search.creativecommons.org/

https://unsplash.com/

http://www.imcreator.com/free

http://getrefe.tumblr.com/

http://lockandstockphotos.com/

http://snapwiresnaps.tumblr.com/

http://jaymantri.com/

Resources page 2

old photos:
http://nos.twnsnd.co
​https://www.rijksmuseum.nl  
​http://www.gettyimages.com/creative-images/royaltyfree​ 
​http://publicdomain.nypl.org/pd-visualization/​​

StockSnap, Unfinished Business, Free Nature Stock, Stock Up, Pexels,  All The Free Stock, Unsplash, Travel Coffee Book , Splashbase, Startup Stock Photos, Designers Pics, Foodie’s Feed, Jéshoots, Death to the Stock Photo, Pixabay, Picography, Magdeleine, Snapographic, Splitshire, New Old Stock, Picjumbo, Life of Pix, Gratisography, Getrefe, IM Free, ISO Republic, Kaboompics, Function, MMT, Paul Jarvis, Lock & Stock Photos, Raumrot, StockSnap, Free Nature Stock, Mazwai

<img>



  <img src="images/image.jpg" alt="if image does not display" title="description on hover">

Semantic IMG

Live Example

  <figure>
    <img src="img/album-eno.jpg" alt="Another Green World album cover" title="Another Green World">
    <footer>
      <!-- copyright typically goes in a small tag in a footer -->
      <small class="copyright">© Island Records, 1975</small>
    </footer>
    <figcaption>
      Another Green World by Brian Eno.
      Cover art is detail from the Tom Phillips painting
      <cite>After Raphael</cite>)
    </figcaption>
  </figure>

<picture>

  • Container for Responsive Images
  • Browser loads the image that best fits the screen size
  • Example via html5rocks 
<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

CSS: background-image

CSS background properties

body {
  background-image: url('img/myimg.png');
  background-repeat:repeat;
  background-size:50px;
}

Live Example

dataurl.net

Data URL

HTML/CSS Images

By Jason Sigal

Made with Slides.com

HTML/CSS Images

  • 3,477

More from Jason Sigal