Some pitfalls of working with responsive images are:
- Some may need to be repositioned within a div as the screen gets larger or smaller .
- You have to make sure your image has a decent resolution if it is going to be full-screen, but not too big where it will eat data/bandwidth.
- Some screens use retina display, and you may need to have 2 versions of each image so that retina displays can see the higher resolution one.
- If an image is not working, you need to have a background color as a fallback.
- If text is on top of the image, the readability of the text may be based on where it’s located on the picture, which again means you may need to reposition elements as the screen gets smaller, and consider what would happen if the image gets switched out with a different one down the road, the text still needs to be readable.