How to reduce the image for mobile devices?
Introduction
How to optimize an image for mobile devices?
When sending images via email to be viewed on mobile devices, it's important to consider that email clients may have different default settings for displaying images. To ensure optimal compatibility and viewing experience, you can follow these guidelines:
Image format;
Save your images in widely supported formats such as JPEG, GIF or PNG. These formats are compatible with both iPhones and Android devices.
Image width;
Limit the width of your images to around 600-800 pixels. This width range ensures that the image fits well within the email client's default layout and doesn't require excessive scrolling or zooming.
Responsive design;
Consider using responsive email design techniques to ensure the email and its images adapt to different screen sizes. AiTrillion email templates support @media queries, which enable the adaptation of the content of email templates to the layout of mobile devices. This makes the email template easy to navigate, use, and display effectively.
The "Responsive image" control helps you adapt all images to a width that is more than the mobile device's screen width.
To adapt your images to the mobile screen, enable the "Responsive Image" control:
As a result, in AiTrillion preview mode, the width of mobile devices determines how the images are displayed:
Adjusting the image size for the mobile version.
You can reduce the logo size for desktop devices by reducing the width or height. However, when viewed on a mobile device, such a logo will be stretched to the mobile device's width and may appear too large.
How do you reduce the image size for the mobile device?
The primary logo should be hidden for the mobile view, and a second logo should be appended and hidden for the desktop view:
Result on mobile:
How to adapt the background images?
Background images are often used in web design to enhance the aesthetics of a page. However, regarding responsiveness, they can be quite challenging to work with. This is because background images have their own fixed size, which means they're unable to adapt to the screen size of different devices. As a result, the image might appear incomplete or distorted on some screens, which can hinder user experience.
While the guidelines mentioned above provide a general starting point, it's worth noting that email clients and user preferences can vary. So, testing your emails across different devices, email clients, and screen sizes is recommended to make sure you have the best image rendering and user experience.
Important Notes
- Always enable Responsive Image for image blocks to ensure proper scaling across mobile, tablet, and desktop devices.
Image size changes applied for mobile view do not affect the desktop version when responsive settings are used correctly.
Avoid using large, high-resolution images without optimization, as they can increase email load time on mobile devices.
Always preview the email in mobile view before sending to confirm image alignment and readability.
Excessive image resizing or stretching may reduce image quality; use proper dimensions instead of extreme scaling.
Test emails on multiple devices and email clients to ensure consistent image display.
Changes to image size will reflect only after saving and reloading the editor.
Avoid embedding text too close to the image edges, as mobile cropping may hide content.
Related Articles
Make mobile-specific layout adjustments in an email template
Introduction In this article, you will learn the default mobile optimization configurations offered by AiTrillion for emails, along with the ability to customize how your message appears on different devices. Common options for optimizing mobile ...Responsive control for images
Introduction In this article, you will learn about image adaptivity, when it's best to use it, and how to turn it off for an image. AiTrillion's templates support @media queries that allow you to adapt your template's content to the mobile device's ...Best Image Size For Push Notification
Introduction: AiTrillion recommends certain image formats for use in your web push notifications, so that they look brilliant and picture perfect on devices of all sizes. For any section of Web Push using images, you would use the image formats ...Add a Logo block to your email template
Introduction Adding your brand's logo to an email template is a simple yet powerful way to build trust and create a consistent visual identity. In this article, you'll learn how to insert a Logo block into your email template using the AiTrillion ...Is Form Builder Mobile-Friendly?
The design and a layout of this advanced forms builder is mobile-friendly. You can create perfectly responsive forms using highly intuitive form editor of the App. Your custom forms will function elegantly and properly on smartphones and tablets.