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:

  • 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: 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.


     <a class="product_img_link" href="{$|escape:'html':'UTF-8'}" title="{$|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}{$|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

  • 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) {
      		case 'products':
      			$imageObj = new Image($idImage);
      			$path = $imageObj->getPathForCreation();
      		case 'categories':
      			$path = _PS_CAT_IMG_DIR_.(int) $idEntity;
      		case 'manufacturers':
      			$path = _PS_MANU_IMG_DIR_.(int) $idEntity;
      		case 'suppliers':
      			$path = _PS_SUPP_IMG_DIR_.(int) $idEntity;
      		case 'stores':
      			$path = _PS_STORE_IMG_DIR_.(int) $idEntity;
      	$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);
      		$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)) {
      			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(
      				) {
      					// 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) {
      							(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 {
      		return false;
      	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.

Log in to reply

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