How can I make the pictures on my site compatible with all screen sizes, ex: apple iphone?

in complement to what @Nancy OShea said, you can have some more explanation on MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

and some cooked usedepending on the approach in CSS-Tricks

https://css-tricks.com/responsive-images-css/

QUICK & DIRTY:  Remove height & width values from HTML code.

Add this to your CSS:

img {width:100%}  /**adjusts up or down to fit any size screen.  Distortion may occur. **/

or

img {max-width:100%} /** No distortion.  Native size is maintained on large screens.**/

PREFERRED METHOD:

Use SrcSet with <picture> tag and 3 or 4 different sized images (1x, 2x, 3x, 4x).

https://www.w3schools.com/tags/att_source_srcset.asp

The latter approach sends less bandwidth to small devices and more to large ones.