From a design perspective is it more common to use different size images for say desktop and mobile or is it more common to use the same image for each and display them in different size using css or otherwise. What are the pros and cons of each approach?
The first approach is the best for the user experience as it saves energy, time and sometimes money. Also its a common practice.
Energy consumption: The overall energy needed to download, process, and finally display an image is less. For small processing units (like telephones) this is very important.
Waste of time: The time a user needs to spend to see an image is less. Sometimes is impossible to see an image if its not pre-processed according to the first approach.
Monetary cost: In several cases the telecommunication providers charge by the amount of transferred data. The spendings on energy bills are less.
Designing for Sustainability