Retina images! Please help!



  • I just managed to run the project on my local network, it is rocket since for me so don’t laught :) I tried to run it on my ipad and I am very dissapointed! Although I turned on the option for high resolution images the appearance of the product images is pathetic! I run for 3 years shop on presta 1.5 and I bought retina images module and the quality of the pictures is way better! According GA half of my clients visited the site with mobile device, I believe all devices got retina displays already not only iphones and ipads… So basically the thing which is selling online are the pictures, aren’t they? I invested a lot of money in photography equipment and that makes no point with the basic product appearance.
    Please advice me what could I do, I saw some templates whith perfect sharp images and some are not? Is it template related issue? I am selling jewellery and I can’t afford using the basic settings. I don’t believe I am the only one who uses ipad of all in this forum, or I am the only one who can’t manage to upload decent picture?
    Please advice me what to do?
    I know there are good people reading this forum :)



  • @MockoB said in Retina images! Please help!:
    “I saw some templates whith perfect sharp images and some are not? Is it template related issue? I am selling jewellery and I can’t afford using the basic settings.”

    Hi Mocko, which templates do you speak of? Can you point us to a specific product page of your site? What’s the dimensions and resolution of the image? Post the actual image here? Maybe that will help identify the issue.



  • I will PM you link to my site. I may send you picture to upload on presta basic site and template and see the difference. It is visible on every high pixel density screen, not just ipad or iPhone.



  • I sent you chat message, I don’t know if it is same like private message but I hope so. The difference may be seen on many templates on presta store also.
    One more thing to add. Just now I am using 20" screen whith resolution 2560/1440. So you can imagine how sharp its picture is! You may see here which are the most common desktop resolutions. So it happens that more than 80% are using “hd ready” and above resolution and we are still stuck with those low quality images. Unfortunately there isn’t retina images module for presta 1.6 otherwise I wouldn’t bother you. I just need razor sharp images for my products that’s all!



  • Sorry I couldn’t be more help. Your site images look good to me, but I’m not running the resolution you are.

    Seems that something has changed between PS 1.5 and 1.6, maybe. I remember the Warehouse theme specifically mentioning Retina Image quality in 1.5, and now it’s nowhere to be found in 1.6: https://themeforest.net/item/warehouse-responsive-prestashop-16-theme-blog/3178575?s_rank=1



  • It is supposed that 1.6 has the retina feature by default but it is not even closer to retina quality. Or it is may be just thirtybees, I tested the feature just on thirtybees and not PS.



  • I found that x2 images are created in product img folders. I found there are media queries in _image.scss file, and yet the x2 images are not displayed neither on my ipad or iphone! I tested both PS and TB. I don’t know if it should be @2x or 2x the addition to the file name, I don’t know if there should be some additional line in htaccess file, but the thing is that it is missing and there are not HQ images.
    Please help!

    PS, here is link: http://mydevice.io/devices/#sortSmartphones to check devices with 2 and more pixel ratio, and reconsider if it is or not issue that the feature is not working!



  • I know this is somehow a bit old but I’ve just upgraded my custom template to support retina images.

    Basically, all I had to do was to add the html5 “srcset” tag for 2x screens to all my images sources and it worked like a charm.

    Ex.

     <a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
          <img class="replace-2x img-responsive center-block" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}"  srcset="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default2x')|escape:'html':'UTF-8'} 2x" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
        </a>```

  • administrators

    Nice. Thanks for sharing. Unfortunately many themes do not support it! We should link them to your post.



  • Oh and I should also mention that importing through the csv DOES NOT create the 2x retina images, it only works when adding a product via the backend.

    So I had to hack the copyImg() function in AdminImportController too…


  • administrators

    Do you have the code at hand?



  • My hack is not really pretty, I was testing yesterday and made it work quickly enough for my needs.

    Here’s the full override of the function, I left artefacts because I was unsure about them, maybe you could have a look and do a proper fix ?

    protected static function copyImg($idEntity, $idImage = null, $url = '', $entity = 'products', $regenerate = true)
      {
      	$tmpfile = tempnam(_PS_TMP_IMG_DIR_, 'ps_import');
      	$watermarkTypes = explode(',', Configuration::get('WATERMARK_TYPES'));
      
      	switch ($entity) {
      		default:
      		case 'products':
      			$imageObj = new Image($idImage);
      			$path = $imageObj->getPathForCreation();
      			break;
      		case 'categories':
      			$path = _PS_CAT_IMG_DIR_.(int) $idEntity;
      			break;
      		case 'manufacturers':
      			$path = _PS_MANU_IMG_DIR_.(int) $idEntity;
      			break;
      		case 'suppliers':
      			$path = _PS_SUPP_IMG_DIR_.(int) $idEntity;
      			break;
      		case 'stores':
      			$path = _PS_STORE_IMG_DIR_.(int) $idEntity;
      			break;
      	}
      
      	$url = urldecode(trim($url));
      	$parsedUrl = parse_url($url);
      
      	if (isset($parsedUrl['path'])) {
      		$uri = ltrim($parsedUrl['path'], '/');
      		$parts = explode('/', $uri);
      		foreach ($parts as &$part) {
      			$part = rawurlencode($part);
      		}
      		unset($part);
      		$parsedUrl['path'] = '/'.implode('/', $parts);
      	}
      
      	if (isset($parsedUrl['query'])) {
      		$queryParts = [];
      		parse_str($parsedUrl['query'], $queryParts);
      		$parsedUrl['query'] = http_build_query($queryParts);
      	}
      
      	$url = http_build_url('', $parsedUrl);
      
      	$origTmpfile = $tmpfile;
      
      	if (Tools::copy($url, $tmpfile)) {
      		// Evaluate the memory required to resize the image: if it's too much, you can't resize it.
      		if (!ImageManager::checkImageMemoryLimit($tmpfile)) {
      			@unlink($tmpfile);
      
      			return false;
      		}
      
      		$tgtWidth = $tgtHeight = 0;
      		$srcWidth = $srcHeight = 0;
      		$error = 0;
      		ImageManager::resize($tmpfile, $path.'.jpg', null, null, 'jpg', false, $error, $tgtWidth, $tgtHeight, 5, $srcWidth, $srcHeight);
      		$imagesTypes = ImageType::getImagesTypes($entity, true);
      		$generateHiDpiImages = (bool) Configuration::get('PS_HIGHT_DPI');
      
      		if ($regenerate) {
      			$previousPath = null;
      			$pathInfos = [];
      			$pathInfos[] = [$tgtWidth, $tgtHeight, $path.'.jpg'];
      			foreach ($imagesTypes as $imageType) {
      				//$tmpfile = static::get_best_path($imageType['width'], $imageType['height'], $pathInfos);
      
      				if (ImageManager::resize(
      						$path.'.jpg',
      						$path.'-'.stripslashes($imageType['name']).'.jpg',
      						$imageType['width'],
      						$imageType['height']
      				)
      				) {
      					// the last image should not be added in the candidate list if it's bigger than the original image
      					if ($tgtWidth <= $srcWidth && $tgtHeight <= $srcHeight) {
      						$pathInfos[] = [$tgtWidth, $tgtHeight, $path.'-'.stripslashes($imageType['name']).'.jpg'];
      					}
      					if ($entity == 'products') {
      						if (is_file(_PS_TMP_IMG_DIR_.'product_mini_'.(int) $idEntity.'.jpg')) {
      							unlink(_PS_TMP_IMG_DIR_.'product_mini_'.(int) $idEntity.'.jpg');
      						}
      						if (is_file(_PS_TMP_IMG_DIR_.'product_mini_'.(int) $idEntity.'_'.(int) Context::getContext()->shop->id.'.jpg')) {
      							unlink(_PS_TMP_IMG_DIR_.'product_mini_'.(int) $idEntity.'_'.(int) Context::getContext()->shop->id.'.jpg');
      						}
      					}
      				}
      
      				if ($generateHiDpiImages) {
      					ImageManager::resize(
      							$path.'.jpg',
      							$path.'-'.stripslashes($imageType['name']).'2x.jpg',
      							(int) $imageType['width'] * 2,
      							(int) $imageType['height'] * 2);
      				}
      
      				if (in_array($imageType['id_image_type'], $watermarkTypes)) {
      					Hook::exec('actionWatermark', ['id_image' => $idImage, 'id_product' => $idEntity]);
      				}
      			}
      		}
      	} else {
      		@unlink($origTmpfile);
      
      		return false;
      	}
      	unlink($origTmpfile);
      
      	return true;
      }
    

  • administrators

    Sure. Will do!



  • Cool ! Thanks.

    It fixed a weird bug too while creating all the sizes. I had some that were smaller with white areas around them, like it was using a smaller version instead of the source. Wasn’t too sure of why get_best_path was used instead of the original…



  • @ssimard what about category banner images, blog thumbnails etc. ?



  • @MockoB said in Retina images! Please help!:

    @ssimard what about category banner images, blog thumbnails etc. ?

    Haven’t gone that far yet, we are still building this site and are far from being done.

    But basically, if you had a 2x image built, you can fix your theme the same way for these I assume.



  • I’m glad to hear that! I will give it a try soon.



  • @ssimard said in Retina images! Please help!:

    Oh and I should also mention that importing through the csv DOES NOT create the 2x retina images, it only works when adding a product via the backend.

    So I had to hack the copyImg() function in AdminImportController too…

    That interested me for ages!

    Great to read about somebody who is interested in best possible image quality in his shop (I know, there is still pagespeed and Google).

    I always wondered how to get this done and which is the right workflow to adapt!

    Most of the time I am lacking time so I follow the lazy path. I am a Windows user and shoot product images myself. I have them in high res and tried many workflow and still do not know which is best.
    Prestashop as TB have their own way of shrinking images. For a year or so I also installed M. Dekkers :) ImageMagick module that trims also white space.

    But I thought that programs that are specialized on shrinking images, even lossless, that exists for years now can do the job better. Moreover, they are easier to use on a bunch of images via batch that the backoffice uploading of images or CSV import way of Prestashop.
    To name are PNGout, PngOptimizer (Freeware) and the Riot plugin. These offer a nice user experience since they work well with XNview, IrfanView, standalone and others lXN forum .

    So, I shrinked all my digital product images and even those images of my template in batch via those tools.

    Nowadays, eventually, there is a very cool tool for windows users that runs images in batch against dozens of those optimizuers for free by Javier Gutiérrez Chamorro (Guti): FileOptimizer

    In a nutshellm, I wonder if that was not contra productive or in contrast to the main aim ti improve image quality in the shop while at the same time reducing loading time since Prestashop applies its own shrinking magic?!
    PS:
    I set Prestashops’s image option in BO to 100% or 90% in order to minimize the shrinking, so called optimizing, of already shrinked images.

    What do you think about this worklow?
    Makes it sense to compress images before we load/import them into TB/Presta? As you know there are some modules/services on the market that state the same but take money and bandwith for this purpose.


  • Global Moderator

    Makes it sense to compress images before we load/import them into TB/Presta?

    Not really. Currently even the “original” image gets rewritten on import[1], so such optimization doesn’t survive the minute you add the image.

    If you want well optimized images, add all of them, then run this optimizer on all the images in img/p/. Like downloading this folder via FTP, then optimizing, then re-uploading the result via FTP. Thirty bees won’t touch these images and serve them happily as long as they exist and as long as nobody starts a “thumbnail regeneration”.

    Adding images later requires repeating this procedure for just the new images, of course.

    [1] This is known and considered to be a mis-feature, but as always, somebody has to rewrite this code section, which didn’t happen, yet.


  • Global Moderator

    @Traumflug said in Retina images! Please help!:

    Makes it sense to compress images before we load/import them into TB/Presta?

    Not really. Currently even the “original” image gets rewritten on import[1], so such optimization doesn’t survive the minute you add the image.

    If you want well optimized images, add all of them, then run this optimizer on all the images in img/p/. Like downloading this folder via FTP, then optimizing, then re-uploading the result via FTP. Thirty bees won’t touch these images and serve them happily as long as they exist and as long as nobody starts a “thumbnail regeneration”.

    Adding images later requires repeating this procedure for just the new images, of course.

    [1] This is known and considered to be a mis-feature, but as always, somebody has to rewrite this code section, which didn’t happen, yet.

    If you add the imagemagick addon this misfeature is fixed there.

    This of course needs to be ported to the core, but this is a nice interim fix.


Log in to reply
 

Looks like your connection to thirty bees forum was lost, please wait while we try to reconnect.