Something I found out recently which has been incredibly useful and makes me feel less bad about utilizing images on my main website is how to load in different resolutions based on the screen width. Below is an example of that which is more drastic than most would be utilizing since they are three very different pictures. If you have a way to resize the screen, the image will be a small red square, a medium green square, or a large blue square depending on how big the window is.

Using this method to post imags can help with load times on slower networks, keep bandwidth cost down since a lot of people are mobile users now, and general layout stuff. If you want to have the lowest resolution version of a photo load on mobile, a medium one to load on whatever size screens, and higher on large screens, you can. If you're an artist, I think the best option would be to do a low, medium, and maybe high res, and then link to source or any combo.

Below is example code to accomplish this feat, but this is just an example can you can play around with it until you get what you want. Doesn't have to be two, could be three, four, just one, or any number as long as you set the media-width values accordingly to what you want.

				   
<picture>
	<source media="(min-width: 1000px)" srcset="high-res.jpg">
	<source media="(min-width: 500px)" srcset="medium-red.jpg">
	<img src="low-res.jpg">
</picture>