Images and video that you take with your phone or DSLR camera are likely of far greater resolution (and size) than is needed for use on the web. This will slow down loading time for your pages considerably. Also, GitHub will not allow you to upload files greater than 100mb. Usually images of your work don't need to be more than a few hundred Kb each. In order to reduce the size of your files, you can use:
Images and GIFs should be small enough to save in your local repository. This is also fine for short videos. The HTML should look something like this:
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
And the result should render like this:
For longer videos, it often makes more sense to upload them to a streaming service like YouTube or Vimeo. Once you upload the video, you can right click and "copy embed code" to paste into your html file. It should look something like this:
<iframe width="1019" height="573" src="https://www.youtube.com/embed/HBJMgkzkaas" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
And the result should render like this:
GIFs are effective ways to show short animations without taking up much space. You can convert a movie or series of images to a GIF using an online service like Giphy. GIFs can be referenced using the img
tag, just like other images.