How to reduce the image for mobile devices?

Introduction

On the majority of websites, images are commonplace. They are employed either for informational or aesthetic objectives. Images must be adjusted when they are shown on a smartphone's small screen because they have a set width and height. This article explains how to change your photos to make them compatible with mobile devices.

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:

Please refer to the following link for further details on the "Responsive image" feature.

• 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?

Copy the image block, disable the "Responsive Image" control, and reduce its size:

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.

• 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 ...

• 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 ...

• 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.

• How to get the image URL for the product image (Membership V2)

  Introduction When creating your product with AiTrillion Memberships, you'll be asked for the image URL to be applied for the main image of the product (you can later edit the images within the Shopify product dashboard once the product is created). ...

• How To Add Image In Thank You Email?

  Introduction Adding a personal touch to your thank-you emails can make a lasting impression on your customers. One effective way to do this is by including images that reflect your brand's personality. In this article, we’ll walk you through the ...