Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Images and PWA in magento

201 Aufrufe

Veröffentlicht am

This was a talk given by me at Magento Meetup Bangalore on 16-3-2019. Magento images are sort of broken for mobiles and that becomes more crucial for PWAs.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Images and PWA in magento

  1. 1. Images & PWA in Magento © Rrap Software Pvt Ltd Pradip Shah, Founder, luroConnect
  2. 2. © Rrap Software Pvt Ltd
  3. 3. © Rrap Software Pvt Ltd eCommerce trends Mobile Image quality Webp Magento direction No support for media queries No support for pixel ratio No support for webp Whine, Whine!
  4. 4. © Rrap Software Pvt Ltd 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
  5. 5. © Rrap Software Pvt Ltd img srcset & picture Source : http://w3c.github.io
  6. 6. © Rrap Software Pvt Ltd 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);
  7. 7. © Rrap Software Pvt Ltd Magento does not support devicepixelratio <theme>/templates/product/image_with_borders.phtml : <span class="product-image-container" style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;"> <span class="product-image-wrapper" style="padding-bottom: <?= /* @escapeNotVerified */ ($block->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) ?>"/></span> </span> Guess what? You are hosed! The lowest element is generating a product-container
  8. 8. © Rrap Software Pvt Ltd 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>
  9. 9. © Rrap Software Pvt Ltd <div class="product-item-info" data-container="product-<?= /* @escapeNotVerified */ $viewMode ?>"> <?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() ?>" <span class="product-image-container"> <span class="product-image-wrapper“> <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> </span> </a> <theme>/templates/product/image_only.phtml : <?php $block->getImageUrl() ?>
  10. 10. <div class="product-item-info" data-container="product-<?= /* @escapeNotVerified */ $viewMode ?>"> <?php $productImage_small = $product->getMediaConfig()->getMediaUrl($product->getData(‘small’); $productImage_large = $product->getMediaConfig()->getMediaUrl($product->getData(‘large’); … <a href="<?= $_product->getProductUrl() ?>" <span class="product-image-container"> <span class="product-image-wrapper“> <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> </span> </a> What we do
  11. 11. © Rrap Software Pvt Ltd 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
  12. 12. © Rrap Software Pvt Ltd 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.
  13. 13. © Rrap Software Pvt Ltd 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
  14. 14. © Rrap Software Pvt Ltd PWA has choices of
  15. 15. © Rrap Software Pvt Ltd
  16. 16. © Rrap Software Pvt Ltd https://headless.page/
  17. 17. © Rrap Software Pvt Ltd PWA has potential but don’t use Magento for images
  18. 18. © Rrap Software Pvt Ltd www.hartsofstur.com https://www.hartsofstur.com/api /catalog/products/57
  19. 19. © Rrap Software Pvt Ltd Same image to all devices
  20. 20. © Rrap Software Pvt Ltd 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
  21. 21. © Rrap Software Pvt Ltd Resources • https://medium.com/@bjoern.meyer/pwa-ecommerce-solutions- compared-83bb498433e9 • https://headless.page/
  22. 22. © Rrap Software Pvt Ltd https://www.luroConnect.com/ Where to find us https://www.luroConnect.com/ info@luroConnect.com @luroconnect

×