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:
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 image size for the mobile version;
You can reduce the logo size for desktop devices by reducing 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.
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.