Images and PWA in magento

Images & PWA in
Magento
© Rrap Software Pvt Ltd
Pradip Shah,
Founder, luroConnect

eCommerce trends
Mobile
Image quality
Webp
Magento direction
No support for media queries
No support for pixel ratio
No support for webp
Whine, Whine!

Problems of Magento Images
• One solution is not suitable to all – code is not flexible
• Ignores mobile completely
• Mobile displays are better than desktop
• Iphone X has 3x retina display
• Most android phones are 2x
• Major difference in image quality
• Chrome & Firefox support webp – not Magento
• Ignores custom transformations you may need

img srcset & picture
Source : http://w3c.github.io

Magento 2 & image code
module-catalog/Block/Product/AbstractProduct.php
public function getImage($product, $imageId, $attributes = []){
return $this->imageBuilder->create($product, $imageId, $attributes);
templates/product/list.phtml
$productImage = $block->getImage($_product, $image);
module-catalog/Block/Product/ImageBuilder.php
public function create(Product $product = null, string $imageId = null, array $attributes = null){
$product = $product ?? $this->product;
$imageId = $imageId ?? $this->imageId;
$attributes = $attributes ?? $this->attributes;
return $this->imageFactory->create($product, $imageId, $attributes);
module-catalog/Block/Product/ImageFactory.php
$data = [ 'data' => [
'template' => 'Magento_Catalog::product/image_with_borders.phtml',
'image_url' => $imageAsset->getUrl(), 'width' => $imageMiscParams['image_width’],
…
'product_id' => $product->getId()
],
];
return $this->objectManager->create(ImageBlock::class, $data);

Magento does not support devicepixelratio
<theme>/templates/product/image_with_borders.phtml :
getWidth() ?>px;">
getRatio() * 100) ?>%;">
<img class="product-image-photo"
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
max-width="<?= /* @escapeNotVerified */ $block->getWidth() ?>"
max-height="<?= /* @escapeNotVerified */ $block->getHeight() ?>"
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>"/>

Guess what?
You are hosed!
The lowest element is generating a product-container

list.phtml …
<div class="product-item-info" data-container="product-<?= /* @escapeNotVerified */ $viewMode ?>">
<?php
$productImage = $block->getImage($_product, $imageDisplayArea);
…
<a href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>"
class="product photo product-item-photo" tabindex="-1">
<?= $productImage->toHtml() ?>
</a>

<?php
$productImage_dt = $block->getImage($_product, $imageDisplayArea);
$productImage_dt_webp = $block->getImage($_product, $imageDisplayArea . “_webp”);
$productImage_pd = $block->getImage($_product, $imageDisplayArea . “_pad”);
$productImage_mo_2x = $block->getImage($_product, $imageDisplayArea . “_mo_2x”);
$productImage_mo_webp_2x = $block->getImage($_product, $imageDisplayArea . “_mo_webp_2x”);
…
<a href="<?= $_product->getProductUrl() ?>"


<picture class="product-image-photo“>
<source media="(max-width: 415px)"
srcset="<?php echo $productImage_mo->toHTML(); ?>,
<?php echo $productImage_mo_2x->toHTML();?> 2x" type="image/jpeg">
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="="<?php echo $productImage->toHTML(); ?>
</picture>

</a> <theme>/templates/product/image_only.phtml :
<?php $block->getImageUrl() ?>

<?php
$productImage_small = $product->getMediaConfig()->getMediaUrl($product->getData(‘small’);
$productImage_large = $product->getMediaConfig()->getMediaUrl($product->getData(‘large’);
…
<a href="<?= $_product->getProductUrl() ?>"


<picture class="product-image-photo“>
<source media="(max-width: 415px)"
srcset="<?php echo $productImage_small.’?w=180&h=180&o=webp’?>,
<?php echo $productImage_large.’?w=360&h=360&o=webp’?> 2x" type="image/webp">
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="="<?php echo $productImage->toHTML(); ?>
</picture>

</a>
What we do

Synchronous image generation
• Traditionally Magento generated images when the frontend would
load – category page with 32 items
• Many CDN based image generation is synchronous
• i.e. while the image is being fetched it is being converted
• However, due to HTTP/2, the requests will go out in parallel
Browser
php
img1 img2 img3
Request Response

Magento 2.3 and image code
Asynchronous generation of images
module-catalog/Observer/ImageResizeAfterProductSave.php
if (!(bool) $product->getId()) {
foreach ($product->getMediaGalleryImages() as $image) {
$this->imageResize->resizeFromImageName($image->getFile());
}
} else {
module-media-storage/Service/ImageResize.php
public function resizeFromImageName(string $originalImageName) {
…
foreach ($this->getViewImages($this->getThemesInUse()) as $viewImage) {
$this->resize($viewImage, $originalImagePath, $originalImageName);
private function resize(array $viewImage, string $originalImagePath, string $originalImageName)
{
$imageParams = $this->paramsBuilder->build($viewImage);
$image = $this->makeImage($originalImagePath, $imageParams);
…
$image->resize($imageParams['image_width'], $imageParams['image_height’]);
…
$image->save($imageAsset->getPath());
Guess what?
each image will have many variations use them or not!
Fix the view.xml in your themes now.

PWA and images
• Fetching a correctly sized image
You should get a higher resolution image if you are on a high pixel
density device. A good rule of thumb is to multiply the size of the
image you display by the pixel ratio.
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
https://facebook.github.io/react-native/docs/0.8/pixelratio

PWA has choices of

https://headless.page/

PWA has
potential but
don’t use
Magento for
images

www.hartsofstur.com
https://www.hartsofstur.com/api
/catalog/products/57

Same image to all devices

Other image services
• Imagekit
• Great Indian Bootstrapped SaaS story
• Piggyback on a paid cloudflare account
• Cloudflare does webp conversion
• Imagekit backend offers image optimization
• Issue : Not application aware, conversion is synchronous, cf is distributed
• Question : Do they store or just convert (cf is distributed remember)
• Fastly
• Magento cloud partner – application aware
• CDN with Varnish on edge – distributed varnish
• Image optimization is synchronous

Resources
• https://medium.com/@bjoern.meyer/pwa-ecommerce-solutions-
compared-83bb498433e9
• https://headless.page/

https://www.luroConnect.com/
Where to find us
https://www.luroConnect.com/
info@luroConnect.com
@luroconnect

Images and PWA in magento

More Related Content

What's hot

Similar to Images and PWA in magento

Recently uploaded

Images and PWA in magento