What size of the image is ideal for iPad and iPhone, portraits and landscape

0
votes

I'm having 3 media query breakpoints in my application

  1. (min-width: 1024px) // For Desktops
  2. (max-width: 1023px) and (orientation:portrait) //For Mobile Portrait
  3. (max-width: 1023px) and (orientation:landscape) //For Mobile Landscape

Based on the breakpoints I'm going to change the source of the image corresponding to the device and orientation

The image is having a width and height of 346x251 for desktop device .

Now I need to slice the image for mobile portrait and landscape. What size would be ideal for mobile portrait and mobile landscape

1
htmlcssresponsive-designmedia-queriesaspect-ratio
I think you should not change the source of image, it will be good If you resize them using background-size: cover; – Tushar
@Tushar I need to load three different images based on the orientation and device, so i had to change the source – Rajasekar

1 Answers

1
votes

The short answer to me would be: whatever size works within the context of the rest of the layout.

What I usually do in similar situations is start with the smallest screen/browser size, try a layout, and then gradually increase the size of the view (in browser) until it looks like crap, then I make a change at that min-width with a media query.

I've found it's better to "future proof" your layouts by making it look good in any viewport size, not just the most common sizes based on today's products.