{"id":21622,"date":"2017-11-06T18:45:38","date_gmt":"2017-11-06T18:45:38","guid":{"rendered":"http:\/\/are_your_website_images_ready_to_embrace_the_iphone_x_notch"},"modified":"2022-09-23T10:16:06","modified_gmt":"2022-09-23T17:16:06","slug":"are_your_website_images_ready_to_embrace_the_iphone_x_notch","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/are_your_website_images_ready_to_embrace_the_iphone_x_notch","title":{"rendered":"Are your website images ready to embrace the iPhone X notch?"},"content":{"rendered":"

The announcement of the iPhone 8, 8 plus and the iPhone X at the iPhone 10th anniversary Apple event on 12th September 2017, came with a massive buzz.<\/p>\n

The iPhone X (pronounced \u201ciPhone 10\u201d) has a 5.8-inch super retina screen, which stands out amongst other Apples, giving the machine<\/em> the tagline \u201cit is all screen\u201d. A resolution of 2436 x 1125 is also featured, making it the highest resolution iPhone to date.<\/p>\n

Since the announcement, designers and prototypers have obviously been working in full gear to carve out products and designs to match the upcoming iPhone X.<\/p>\n

That Notch<\/h2>\n

This is arguably one of the fascinating features of the iPhone X! (and the wonderful portrait above too). The Notch up top. Bold, elegant, has the flows around it and still fascinating, even though the guy in the portrait below doesn\u2019t seem so thrilled.<\/p>\n

\"One<\/p>\n

We have to find a way to make him happy, how to make the notch really beautiful and useful for our images. Let\u2019s do this with Cloudinary image transformation tools.<\/p>\n

The iPhone X screen is unique in that the dark space (notch) that houses the camera and other sensors are actually part of the hard glass screen and content displayed flows around this notch. This is a very important aspect to consider in the UI\/UX design of products to fit the all screen<\/em> iPhone. In this article, we will discuss a way to fix<\/em> your images, testing how it would look on the iPhone X.<\/p>\n

\"spot<\/p>\n

How do you work with that screen?<\/h2>\n

Image management and transformation can be done on-the-fly with Cloudinary. And when I say on-the-fly,<\/em> that means that images are transformed using dynamic delivery of their URLs!<\/p>\n

Cloudinary also offers mobile-first image optimization for mobile design and the best part, it\u2019s easy to use. These images are cached on the CDN and are immediately available upon request.<\/p>\n

Cloudinary\u2019s image management and transformation service will be used in this article to simulate how images fit on the iPhone X screen. With this, you can test your images and products to see how well they fit on this new type of screenX.<\/p>\n

Before we begin, let\u2019s have a look at the sample image we will be transforming.<\/p>\n

\"image<\/p>\n

Transform the image<\/h2>\n

To perform this test, you need the notch image<\/a>.\n\"iphone_x_notch<\/p>\n

Next, upload the image to be transformed. In our case, we uploaded the overhead swimming pool image displayed above.<\/p>\n

Now we need to apply the transformation. Images in Cloudinary take the form of:<\/p>\n

https:\/\/res.cloudinary.com\/<cloud_name<\/span>><\/span>\/image\/upload\/<transformation_parameters<\/span>><\/span>\/<public_ID<\/span>><\/span>.<image_format_file_extension<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Cloudinary offers lots of image URL transformation parameters and they can be found here<\/a>. For this test, we are going to be using quite a few parameters.  The URL might look a bit scary at first, but scroll down a bit and we will walk you through the whole thing.:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"image<\/a><\/p>\n
Looking at the URL, you can see what it means:<\/p>\n
So to adjust the swimming pool image, we use the URL below, and work on the <transformation parameters><\/code> portion:\nhttps:\/\/cloudinary.com\/<\/a> <transformation-parameters><\/code> \/Spencer_Watson.jpg<\/p>\n