Pictures: from mobile to desktop

Most of websites nowadays are made due to the "mobile first" concept, which means that you firstly create a mobile version of a site, and only then get to a desktop one. But the pictures you use in a mobile version may not look so well on a big screen.

What problems can you have transferring pictures from mobile to desktop and how do you solve them? Let's find out!

Problem #1: Disproportionate scaling Sometimes when trying to transfer a picture from a mobile version to a desktop one, designers simply enlarge width and height, so the picture would fit the size of the screen. But in this case elements of the picture can become disproportionate towards headers, buttons and other parts of a website.

Problem #2: Crop images Another mistake would be to crop images by enlarging only width. This way you leave much more space for other objects and don't disturb users too much, but if cropped wrong, a picture can lose its meaning.

Problem #3: Position change While enlarging, some pictures may change their relations to other elements of the design, which can badly affect a whole concept.

So, what can you do to solve these problems?

Scale and crop Combine these actions to perfectly fin a picture into a big screen without loosing important elements.

Use universal pictures There are pictures which can automatically be transformed for different screen sizes without loosing their meaning. Try to find such pictures! Imagine them cropped differently and make sure in still looks OK.

Use different pictures for mobile and desktop If you can't change a picture so it would look well on a desktop, just choose another picture! Sometimes different versions of a site work even better.