You may wish to remove images for mobile devices because they do not display well on small screens, take up too much space or in an attempt to speed up page loads.

To remove images from mobile devices like cell phones, you can add @media styles to your style sheet

Add a class to the image in your HTML

<img class="no-mobile" src="/images/redballoon.jpg alt="Image of a red balloon" />

then in your style sheet, target these images with special styling to not have them display on smaller screens

@media (max-width: 640px) {
    .no-mobile {display: none};

This will keep the image from taking up space on the smaller screen and will remove the issue of the image extending beyond the screen or becoming too small to view properly.

Using {display: none;} or {visibility: hidden} will not speed up page load time depending on the browser

If you use these settings to remove the image, it does not stop the device from loading the image file in many browsers. So this method does necessarily not reduce the amount of time to load the page on the screen.

Some of the newer browsers on smart phones do respond to display: none by not loading the image, but you can't count on this and people with older smart phones will still have the issue of the slower page speeds due to the images being loaded with the page.

To stop content, images, etc from loading when the page loads, you can use some sort of JavaScript that keeps this content from loading when it detects a mobile device.