@Tryt4n
Posted
img src="small.jpg" srcset="big.jpg" sizes="(min-width: 650px) 50vw, 100vw" alt="Example"
You should use sizes attribute. In this example if min-width:650px would be loaded big.jpg with width of 50vw, if smaller than 650px small.jpg with width of 100vw.
Also you can use JS to dynamically change src of image:
window.addEventListener("change", () => { if (window.innerWidth >= 650) { element.setAttribute("src", "your_path_to_img") } else { element.setAttribute("src", "your_path_to_img-small") } })
Or you can use CSS for example you can create div and then give it height and width and set background: url("path-to-img"). And of course place it in media query. But then you should also give that div a role="image" and aria-label="image_description".
Also in form you have input element but you haven't got label. Even when label isn't visible it still should have be.
label for="email" aria-label="Enter your email"
input type="email" name="email" id="email" title="email_field" placeholder="Email Address"
