The web-standard for mobile images is 480 pixels wide.
Images of this size will be visible on all mobile devices; the iPhone 4S/5 has a high-resolution screen that's 640 pixels wide. Many Android smartphones top out at 720px wide, although some go up to 800px. Anything over that is probably considered a tablet. Hence 480 will be sufficient to be viewed by all mobile devices in portrait mode.
Here are some additional CSS actions you can take to manage images for mobile:
1. Push image width to 100%
Add the following CSS style:
img { max-width: 100%; height: auto; }
This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need.
2. Specific styles for different devices
You also can use CSS's @media query to specify specific CSS for certain media types. This means that your site can use different image sizes, font sizes, etc. based on the customer's device. This means you have to curate CSS for several sizes, but also means you can customize the experience for each device.
Here are some examples:
/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 481px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */You can learn more about media queries here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp