date

30Sep

The focus point: responsive design for images

So we figured out a gadget that assures the perfect display of images on all possible devices. We translated our concept to a piece of code we use to crop an image perfectly for all screens and devices. Whenever you upload an image, you tell us which part of the photo should always be in the frame. Let’s say: the hottest chick in the photo, your amazing snowboard jump or that beautiful balloon right there in the corner. You simply drag the focus point in your image until you’ve selected the object that counts. The benefit is that your photograph, even on small devices like a watch, will always look great.

Why do we need a focus point?

Designing web products used to be simple. We had a couple of different resolutions to work with, but basically, everyone experienced our websites the same. Nowadays, we have to design and develop for countless different devices. Menu’s, textual content and icons are relatively easy. It’s just matter of properly rearranging them. Images, however, are a different story. Most photographs have a three-by-two ratio, so whenever the screen ratio alters, the photo has to be cropped and only the middle is displayed. Objects are cut off or even completely outside the frame.

Many websites and apps offer a way to move the picture horizontally and vertically, until the right part is displayed. However, moving pictures into the right position for one purpose does not cover the challenge we are dealing with. It only offers a solution for a specific purpose, on a specific device. Perhaps, your photo is perfectly displayed on desktop, but loses its charm on mobile.

We figured we could only solve the problem entirely, when we define a point of focus in the photograph. So that’s why we came up with the focus point. A tool we can’t live without? Probably not, but it does make the web a bit more beautiful, and life easier for developers. A code that we, therefore, love to share.

NOT a developer? Stop reading and ‘focus’ on this video:

OR: check out our public repository on GitHub

The focus point is suitable for all JavaScript applications. For every image, you'll define the focus point as two decimal values between 0 and 1, x and y. They represent the coordinates of the focus point in the picture. It is important to write some back-end code to be able to save these values for every image. That's up to you, because it’s different for every framework you use.

Then, to apply the focus point to an image in your application, we set some CSS rules to your element. To create a focus point editor in your image upload module, we will render a draggable button for you. Then you can simply read out the x and y values to save them to your database.

Wij zijn Lifely, een digital agency, al voelt dat wel een beetje als stoer doen op het schoolplein. Wat zijn we dan? We zijn een clubje mensen die heel erg veel van productontwikkeling houden. Eigenlijk komt het er op neer dat wij het tof vinden om bij Lifely te werken, onze klanten blij met ons zijn en de werksfeer niet anders te omschrijven is dan ‘chill’.

Jesse de Vries

Frontend Developer

Terwijl hij vele gebruikers een digitale glimlach bezorgt met het maken van toffe digitale producten, vermaakt hij zijn collega’s met flauwe woordgrappen. Dat is Jesse, bij Lifely bekend als de behulpzame techneut die Pim’s plannen moeiteloos vertaalt naar gebruiksvriendelijke interfaces. Wat niet bij iedereen bekend is, is dat Jesse ook een held is in pingpongen, pianospelen, het prototypen van technische snufjes en het verpotten van, jawel, pantoffelplanten.