green is for Column element
red are divs
blue is an image in a div
orange is a background image of the upper red div, non-repeat and manually shifted to the right.
That’s the structure I recommend, and that should be used because the structure makes sense in HTML, as each column represent an individual piece of content. So you need 7 images: 4 circles and 3 arrows.
Alternatively you can have the orange image be a normal image (not background) with position absolute and manually position, and you can add an interaction to it to animate and/or reveal it.
Also you should just save one image of the circle and have the text in HTML text, over the image, so you really have only 3 images: 1 circle bg and 2 arrows.