Large, 'wall-to-wall' images seem to be quite popular in website building. But a large, maybe over 2000px wide image can be quite a heavy load on a small phone internet connection, therefore the best practice is to have the same image in various sizes, and let the screen size decide, which one to load. This is called a 'source set'.
The image on this page is such a source set. It contains three sizes of the same image, which have been prepared in Photoshop for the different breakpoints. When working in a framework with default br.pts. it's a good idea to use those given br.pts. for the sizing. Normally three different sizes will be enough.
You need an image editing programme, and you are not limited to just Photoshop.
Optimal Image Sizes
Large, 'wall-to-wall' images seem to be quite popular in website building. But a large, maybe over 2000px wide image can be quite a heavy load on a small phone internet connection, therefore the best practice is to have the same image in various sizes, and let the screen size decide, which one to load. This is called a 'source set'.
The image on this page is such a source set. It contains three sizes of the same image, which have been prepared in Photoshop for the different breakpoints. When working in a framework with default br.pts. it's a good idea to use those given br.pts. for the sizing. Normally three different sizes will be enough.
You need an image editing programme, and you are not limited to just Photoshop.
Download this component