How to add a GIF through HTML & CSS to a web page

I want to add few gifs to a page and also don’t to make it too heavy that will increase my page loading time.

Note: If the GIF is badly made, overly sized, or had a ton of video type content going on then it will always be heavy and slow. Made correctly and with sensible content GIFs don’t need to be excessive