A content delivery network (CDN) reduces the cost of transferring data because it sits between users and the website's hosting servers, or origin servers, cutting down on traffic between the hosting servers and the rest of the Internet. A CDN is a network of servers distributed around the world that store content closer to end users, reducing latency. CDNs serve up cached content so that the origin servers don't have to deliver the same content over and over.
Web hosting services charge for the data that is transferred to or from the origin server (this is often called "bandwidth"). But if most of a website's content is cached within a CDN, far less data needs to be transferred in and out of the website's host server, resulting in lower bandwidth costs.
To understand why, imagine that a popular pizza delivery joint located in San Francisco often gets orders from customers in Oakland (which is on the other side of the San Francisco Bay). Every time the restaurant delivers a pizza to Oakland, its drivers have to pay the toll required for crossing the bridge to Oakland, increasing costs.
However, if the restaurant opens a satellite location in Oakland, delivery drivers no longer have to cross the bridge and pay the toll to fill Oakland orders, with the added bonus that the pizza will be delivered faster.
Similarly, if a website stores some or all content in a CDN, which is closer to its users, then the website owner has to pay far less in "bridge toll" money for content served all the way from the website's original location.
First of all, "bandwidth" is not actually bandwidth in this context. When people say "bandwidth" in the context of web hosting, what they really mean is "data transfer." This is the amount of data that goes to or from the web host. (Bandwidth really means the maximum amount of data that can pass through a point on a network over time.)
Therefore, web hosting doesn't result in "bandwidth" costs, but rather data transfer costs. A certain amount of data per time period (typically per month) is allotted by hosting provider. Usually the provider will charge for either ingress (data going in) or egress (data going out), whichever is higher.
When users visit a website, their browser will load content via the Internet. If the website doesn't use a CDN, all of the content will have to come from an origin server, which means every time the website loads, HTTP requests go to the origin server, and content goes out from that same server. The more times this happens, the more data is transferred, resulting in higher costs for the website operator.
Most CDNs charge for their services, but the savings on monthly data transfers will typically outweigh the cost of using the CDN.