| type |
content |
super-big-text |
**Preparing images**
|
|
| content |
notes |
## App dictates format
- Using Illustrator — Export SVG
- Using Photoshop — Export JPG (or PNG)
|
There’s no real reason to export PNGs or JPGs from Illustrator—it’s a vector tool, export as vector.
Vice-versa, you can—but shouldn’t—export SVGs from Photoshop—it’s a bitmap tool, export as a bitmap.
|
|
| content |
notes |
## Default to SVG
If you can use an SVG—use an SVG
|
SVG will give you the best resolution & clarity of any image format because it’s just code & match. It’s automatically scaled for retina screens.
|
|
| content |
notes |
## Backup is JPG
Photos should be JPGs
|
When exporting a photo, always use a JPG. It’ll give you a good file size with a good enough quality.
There are newer formats like WebP, but they aren’t supported quite as well in all browsers yet.
|
|
| content |
## Try to avoid PNGs
In most cases anything that can be done in a PNG can be done better in an SVG*
<small>*In most cases</small>
|
|
| content |
notes |
## Avoid GIFs—period
- GIFs are **huge** files!
- They have poor user experience
- Bad accessibility: flashing that can cause seizures & can’t be stopped
Avoid them at all costs.
|
If you *must* include auto-playing snippets of video (which you should avoid as much as you can) it’s much better to provide a small video encoded as an MP4.
|
|
| type |
image |
image |
choice-flow-chart.svg |
|
| content |
## Videos & tutorials
- [Website file organization](/topics/organization/)
- [Images for the web](/topics/image-formats/)
|
|