All about images
- What file format to use and why for the web
What image file format to use
Images are divided into two types:
Raster Vector 
- Pixel-based
- Best for photographs
- Large file sizes
- More accessible and sharable
- Mathmatical curves and lines
- Best for logos, type, and geometric designs
- Smaller file sizes
- Less accessible and sharable
Once you've identified the type of image that is best for your situaion you can choose the best file type for your purpose.
Raster image file types:
- Great for photographs
- Compresses images to keep files small. Do not resave a JPG or you will loose quality
- Bad for logos, line art, and wide areas of flat color. It will look crunchy
- Excellent choice when transparency is a must
- Lossless compression so image quality is not affected
- Good option for logos and line art when SVG can't be used
- File sizes are much bigger so use sparingly
- Great for simple, minimal frame animations
- Nice option for icons, flat graphics, and images that use minimal colors and precise lines
- Good option for simple logos with blocks of colors
Vector file type:
- Resolution independent so files look crisp when displayed both large and small.
- Not supported by Internet Explorer so advance code is needed.
- Completely responsive
- Can be animated with CSS and JS.
Other image file types:
It is worth mentioning you will encounter the new WebP format created by Google. Images are 25 - 34% smaller than JPG files and use a lossless compression technology making for high quality images that load fast. Unfortunately not all browsers support this file format like all versions of Internet Explorer.
Never use TIF, RAW, PSD or PDF files to display images on the web. These are primarily meant for printing or sharing documents. They are too huge to load in any kind of decent speed for web viewing. 
- Sizing & resizing Images for the web
Resizing images
Two things to keep in mind are display size vs. actual file size.
Display size is only how it looks and file size is actually how big the file is in megabytes. File size determines the a how long it will take to load based on how large the file is.
NOTE: Even if the image is displayed at a small size it's still going to take a long time to load if the file size is huge.
The file below is displayed at 300px wide but the actual file size is 1200px wide.
Why file size matters
A file size of 300px = ~ 43kb.
The same image with a file size width of 1200px = ~ 230kb.Click the image below displayed at 300px to see the actual file size display of 1200px.
What is a good file size for the web?
Ideally aim for at most 2400px wide for full page width images and 1500px or less for anything smaller. The height is not important since it will adjust in proportion to the width.
If you need help understanding what pixel width looks like, How Big is My Browser is a great little resource for figuring that out.
The image file size below is 1500px wide and it still looks pretty good.
How to resize the file size
There are many ways to resize your images but here are a couple of quick options to resize your images along with a video walking you through the steps with each:
- Imageresizer which produces a more compressed image for the width.
- Getting creative
All about Canva
Here I talk about the differences between the pro and free version while designing a simple poster in Canva. I use the 4 principles of graphic design, (contrast, repetition, alignment, and proximity) to explore how to format a document. The interface of Canva can be overwhelming at first but once you get comfortable where things are at there are a lot of possibilities.
Jump to a chapter:
- 00:00 Introduction as to what Canva is for
- 00:57 The selling point for the pro version of Canva
- 02:20 List of features on the pro version versus the free version of Canva
- 02:34 Demo of what the background remover does
- 04:34 What you see when you first login
- 06:23 How to start a new document
- 07:48 Change the background color of a document
- 08:40 Adding a text box with the keyboard
- 11:04 Changing the type
- 14:06 selecting a san serif typeface
- 16:07 Adding in background images
- 21:18 Using text effects to change a design
- 24:25 How to print your document
Displaying data on Canva
Canva has been changing things around and perhaps for the better. Here I show you how to display a simple little graph and then instantly change it from a bar chart to a pie chart in just one click. The data is editable can be customized both in how it looks and displays.
Jump to a chapter:
How to make a custom poll
Here I am showing how to a very simple poll or survey of your audience using a design program like Canva to create the graphic and then use ThingLink to make that that graphic interactive.
Thinglink: https://www.thinglink.com/
Timestamps:
Interactive graphics
In this video I show how I made this info graphic on the "Five D's of Web Design" using Canva. Then I talk about how I made it interactive using Thinglink. You can jump ahead using the chapter markers before the video.
Timestamps:
- 00:00 Introduction on why I wanted an interactive graphic and how it works
- 04:15 How I created the D shape in Canva using lines and shapes in elements
- 04:57 Using elements to create a shape in Canva
- 06:32 Adding icons to your Canva design
- 07:50 Adding special effects to text in Canva
- 09:35 Exporting to Thinglink
- 10:00 Intro to Thinglink and how much it costs
- 11:47 How to link to Canva inside of Thinglink
- 13:14 How to add interactive tags in Thinglink
- 13:33 How to change your interactive icons
- 14:13 How to add text and search for an image
- 15:39 how to share, embed and add a QR code for your design
Using the Background Remover
Photoshop is still the goto tool for me to remove a background but in a pinch the background remover in Canva is amazing when it works. It saves you sooooo much time. In this short video I am showing off what it does for three separate images as well as on a curly little dog :)