9/19/2023 0 Comments Jpegmini images blurry on mobileThe background is set using both the shorthand property and using individual CSS background properties to account for some quirks in Gmail and Android clients. For retina background images, you should use the background CSS property instead of the background HTML attribute on something like a table cell. The implementation is slightly more complex, but the principles are the same.īut note that this approach won’t work everywhere. You can use retina images as background images. On larger screens, the max-width rule will kick in to constrain the image size, while on smaller screens they will fill 100% of the screen-or container-width. This is a handy trick for making images responsive across different screen sizes. You’ll notice the inclusion of a width style set to 100%. In the example below, we use the width attribute (no height attribute) and the max-width to get retina images working across all email clients. To get around this, you can include a max-width rule in the style attribute of the image. Some versions of Microsoft Outlook still display the retina images at their full size, despite the explicit sizes set by the width and height attributes. On high DPI displays, we get beautiful, crisp, retina images. Then, in our HTML, we use the original, intended display size in the width and height attributes to scale the larger image down: In this case, the image file is 276 pixels by 102 pixels, but anything that’s at least double the intended display size works. To keep the logo crisp, we simply create an image at a larger size. If we created and saved the logo image at that size, subscribers would see a blurry mess on retina screens: Using HTML, it’s sized so that it displays at 130 by 48 pixels. In our emails, we include the Litmus logo at the top. When they’re scaled down in the email, there are more pixels for retina screens to display. For images to look good on those screens, they need to be twice as large. Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. How exactly can you optimize images for retina screens? Forturnately, it’s quite simple. If you’re not optimizing your images for high-DPI screens, those users see a degraded email design, which can lead to equally degraded trust in your brand. Retina ImagesĪs users grow accustomed to retina screens, they expect text and images to appear crisp and clear. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens. If you’re not accounting for high-DPI displays, you run the risk of looking careless to subscribers. After opening an email, our eyes move to the design and imagery before we start reading any copy or tapping calls-to-action. Subject lines, copy, and cadence all play an important part in looking good to subscribers, but visuals draw people to an email campaign first. While most companies started with smaller devices like phones, retina screens can now be found on tablets, laptops, and even desktop computers like Apple’s massive 27-inch Retina 5k iMac. Likewise, retina is commonly used to refer to images optimized for high-DPI displays, which you’ll learn about below.Īlthough Apple was the first to introduce the Retina display to a mainstream audience, it wasn’t long before other device manufacturers hopped on board. While ‘Retina display’ is an Apple brand name, the term ‘retina’ is often used to describe high-DPI displays from other manufacturers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |