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. Stripo 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 with 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. For this you need to switch to mobile mode, press on the image and activate this control:
As a result, in Stripo 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 size of smaller images for the mobile version;
In case you upload the images with smaller sizes (for example logo), you can deactivate the responsive control not to stretch them on the width of mobile phone.
In this case, you can simply set up the suitable image size manually:
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.
However to have the best result you have the opportunity to change the background image position and sizes:
Please be aware, background images of containers/structures/stripes do not display in Outlook.
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.
Thank you for taking the time to read our articles. We hope this information is helpful to you.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.