Adjusting Images for Marfeelized Mobile Sites

To define different images depending on the characteristics of the device, Marfeel uses an <img> srcset attribute which is supported by all major mobile browsers. 

When Marfeel's crawler finds an IMG tag, it checks if the attribute srcset is present and if it contains a source for mobile screens (480 pixels wide). Marfeel will use it as the final source of the image.

Marfeel adjusts images in this way to fit a customer's Marfeel Progressive WebApp (PWA) in order to provide end users with an optimal reading experience. The images a publisher uses to enrich their relevant content is a vital part of their publication and impacts the way their readers interact with it.

It's important to Marfeel that the media carefully chosen by customers to boost UX and engagement is presented optimally, and the way the publisher intended. 

Example

<img src="http://www.example.com/image.jpeg" srcset="http://www.example.com/smaller_image.jpeg 480w">

Benefits

Using an <img> srcset is beneficial because it avoids loading large images optimized for desktop and saves important bandwidth for a publisher's users. 

Customers can also provide a different image with a different aspect ratio to avoid important areas of the image being cut off. This is especially helpful if the image contains text or faces on the edges, where the automatic image center will fail. 

For more information regarding the <img> srcset, see the W3C spec here