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 make sure the email and its images adapt to different screen sizes. Stripo email templates support @media queries which enable adapting 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 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:
For further details on the "Responsive image" feature, please refer to the following link.
Adjusting the image size for the mobile version:
You can decrease the logo size for desktop devices by reducing its 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 to 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, when it comes to responsiveness, they can be quite challenging to work with. This is because background images have their own fixed size, which means that they're not able 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. Therefore, testing your emails across different devices, email clients, and screen sizes is recommended to ensure optimal image rendering and user experience.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.