Retina images! Please help!

[MockoB]

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 :)

[crosscut01]

@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.

[MockoB]

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.

[MockoB]

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!

[crosscut01]

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

[MockoB]

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.

[MockoB]

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!

[ssimard]

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>

[ssimard]

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

[ssimard]

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(PSTMPIMGDIR_, 'psimport'); $watermarkTypes = explode(',', Configuration::get('WATERMARKTYPES'));

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;

} ```

[ssimard]

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 getbestpath was used instead of the original..

[MockoB]

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

[ssimard]

@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.

[MockoB]

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

[Pedalman]

@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.

[Traumflug]

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.

[roband7]

@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.

[dprophitjr]

@ssimard at the end of srcset, I see a space then 2x. That, to me, adds a %20 because linux doesn't like filenames with spaces in them like WinDoze will allow. Just wondering?

[ssimard]

@dprophitjr said in Retina images! Please help!:

@ssimard at the end of srcset, I see a space then 2x. That, to me, adds a %20 because linux doesn't like filenames with spaces in them like WinDoze will allow. Just wondering?

My god i'm terribly sorry, I didn't see this reply until now.

Actually you have to enclose the 2x into the filename string, not after..

Ex.

On browsers without srcset support, the value of the src attribute will be used as the image src [default image]. On regular resolution displays, the 1x variant of the srcset will be used [1x image]. On displays with 2 device pixels per CSS pixel, the 2x variant of the srcset will be used [2x image]. Similarly, there is a 3x image, and a 4x image.

See example here: The srcset Attribute

[ssimard]

@mdekker did you finally include my code in the csv import section ?

Just curious cause I am still running 1.0.2 (will upgrade to 1.0.3 soon I promise) and the retina 2x images are NOT created either via the webservice.

I got it fixed for csv import but we are going to maintain our products via Filemaker Pro and I need to also import images using the webservice.

I was being lazy and wanted to ask before looking up in the code, taking a chance that it had been fixed in 1.0.3 at the same time :grinning:

If anyone is curious about how to upload an image to a product using the webservice, here's my php code:

``` <?php

function addNewImage( $productid, $imagename ) { $url = 'https://yourthirtybeessite.com/api/images/products/' . $productid; $imagepath = 'img/'. $image_name; $key = 'YOURAPIKEY';

$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:multipart/form-data','Expect:'));
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_USERPWD, $key.':');
curl_setopt($ch, CURLOPT_POSTFIELDS, array('image' => new CurlFile($image_path)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$result = curl_exec($ch);
curl_close($ch);

return $result;

}

echo("Uploading an image...");

echo(addNewImage(71,'cafe.jpg')); ?>```

[ssimard]

Well looks like I will have to look into the webservice code after all.

Just upgraded to 1.0.3 and the retina images are not created via the webservice image upload either.

Will report what I find.

[MockoB]

@ssimard it is not quite clear for non programmers like me how to make the implementation and in which files to do it ... please open GitHub issue and hope it will be fixed in the core ...

[ssimard]

@mockob you don't have to overwrite anything if you are only uploading your images via the backend, it will work.

The only thing you have to change is in the template itself, in the Smarty files.

@mdekker was supposed to fix it in the core for the CSV and Webservice upload.

[MockoB]

And what about to fix it in the core so nobody has to change the template files and possibly screw something ... never mind. Do you have any idea about the x3 and x4 images?

[ssimard]

Well the iPhone X and the Plus variants (6 Plus, 7 Plus and 8 Plus) are all using a retina 3x display (but TB does not create them).

I don't know anything with a 4x display, does not mean there are none thou.