Retina Bilder @x2 erzeugen

Duplicate mbdesign

Ich dneke es ist an der Zeit commerceSEO die Bilder für Retina und High Res. Displays zu erweitern.

Hier ein sehr gutes Modul für Wordpress als keiner Ansatz.
https://wordpress.org/plugins/wp-retina-2x/

Weitere infos zu css usw.

http://blog.kulturbanause.de/2012/04/websit…ina-optimieren/

http://brettjankord.com/2012/11/28/cro…-media-queries/

https://signalvnoise.com/posts/3271-eas…ages-using-scss

Idealerweise gleich beim Hochladen erzeugen und/oder vor allem in die Ajax Bild Processign Funktion einbauen. Habe da mal ein wenig rum gespielt, ist mit "Reltiv wenig Aufwand" erledigt.

Danke

jotest

Yep vielleicht auch hier noch info's
Adaptive Bilder (Retina Display, Responsiv und Fluid Bilder)
Also auch https://github.com/joeyvandijk/rimg

picturefill Slider unter 768px nicht Anzeigen (abschalten)

admin

Gehen tut das alles schon, nur die Frage ist auf welchem Weg! Da gibt es nämlich 2 Wege. Aber halt keinen einheitlichen Standard

markus-b

Wie meinst du das... 2 Wege?

Gibt mehrere Möglichkeiten, klar. Ich würde sagen die Variante die am meisten Sinn macht.

Die Bilder sollte auf jeden Fall als Kopie in der richtigen Auflösung erzeugt werden und auch nur wen das Original Bild es her gibt umwandeln.
Dann würde ich prüfen ob Bilder vorhanden und dann x2 anzeigen ansonsten immer das normale als default.

jotest

Glaube den WEG die am wenigsten LAST server und auch beim übetragung wen verbindung Client Langsam am besten lauft oder?

admin

Ich würde sagen, die Variante die von allen Browsern unterstützt wird
Mach doch mal im Bugtracker als Vorschlag rein.

Duplicate mbdesign

https://github.com/Retina-Images/Retina-Images (hat auch einen funktionierendes Fallback)

hier müsste man für Produktbilder bzw. Kategoriebilder nur auf die neuen x2 Bildpfade umbiegen.

Quick and dirty

PHP

<?php


/* -----------------------------------------------------------------
 *     $Id: category_image.php 420 2013-06-19 18:04:39Z akausch $
 *     Copyright (c) 2011-2021 commerce:SEO by Webdesign Erfurt
 *     http://www.commerce-seo.de
 * ------------------------------------------------------------------
 *     based on:
 *     (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
 *     (c) 2002-2003 osCommerce - www.oscommerce.com
 *     (c) 2003     nextcommerce - www.nextcommerce.org
 *     (c) 2005     xt:Commerce - www.xt-commerce.com
 *     Released under the GNU General Public License
 * --------------------------------------------------------------- */


defined('_VALID_XTC') or die('Direct Access to this location is not allowed.');


$a = new image_manipulation(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name, CATEGORY_IMAGE_WIDTH, CATEGORY_IMAGE_HEIGHT, DIR_FS_CATALOG_IMAGES . 'categories/' . $categories_image_name, IMAGE_QUALITY, '');


//Retina Images erzeugen @x2
$categories_image = explode('.', $categories_image_name);
    if($categories_image[1] == 'jpg' || $categories_image[1] =='png' || $categories_image[1] =='gif')
        $categories_image_name_retina = $categories_image[0] . '@2x.' . $categories_image[1];

// Prueft ob das Hauptverzeichnis bereits existiert,
if(!is_dir(DIR_FS_CATALOG_IMAGES . 'categories_x2/'))
    mkdir (DIR_FS_CATALOG_IMAGES . 'categories_x2/', 0777 );


$b = new image_manipulation(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name, CATEGORY_IMAGE_WIDTH*2, CATEGORY_IMAGE_HEIGHT*2, DIR_FS_CATALOG_IMAGES . 'categories_x2/' . $categories_image_name, 90 /*immer 90% IMAGE_QUALITY*/, '');


$string = str_replace("'", '', CATEGORY_IMAGE_MERGE);
$string = str_replace(')', '', $string);
$string = str_replace('(', DIR_FS_CATALOG_IMAGES, $string);
$array = explode(',', $string);
//$array=clear_string();
if (CATEGORY_IMAGE_MERGE != '') {
    $a->merge($array[0], $array[1], $array[2], $array[3], $array[4]);
    $b->merge($array[0], $array[1], $array[2], $array[3], $array[4]);
}
$a->create();
$b->create();

Alles anzeigen

jotest

https://html.spec.whatwg.org/multipage/embedded-content.html

http://scottjehl.github.io/picturefill/

admin

So lob ich mir das. Das Forum hier soll ja auch ein Austausch sein, es ist für uns immer sehr hilfreich, wenn auch mal Lösungsvorschläge kommen. So was können wir dann auch einarbeiten, testen und an die entsprechenden Stellen einarbeiten. Danke

admin

Das funktioniert ja sogar Ich baue es aus, so dass alle Bilder auch mit Retina Image erzeugt erden.

Duplicate mbdesign

Bitte auch berücksichten das die Bilder beim hochladen bzw. anlegen einer Kategorie oder Prodokute gleich mit angelegt/erzeugt werden.

Ich fülle mene Dazenbank und Bilderordner mit Shopsyn direkt aus der WAWI.

Wobei mir das lieber wäre nur den Original Ordner zu füllen und dann über das Ajax Script alles erzeugen kann.
Damit habe ich eine deutlich schnellere Übertragung der Bilder von der WAWI in den SHOP.

Danke

admin

Da das image Processing vom Shop in der Regel beim Hochladen angestossen wird, sollte es automatisch gehen

Duplicate mbdesign

OK sehr gut.

Ich habe nich mal ein wenig getestet. retina.js fällt flach, bringt ein haufen 404 errors wenn die Bilder @x2 nicht vorhanden sind und es werden ale Bilder 2x gealden.

Beste Lösung im Moment http://scottjehl.github.io/picturefill/#download

Problme dabei ist das die ganzen <img> im Quellcode überarbeitet werden müssen. Im Prinzip werden alle Bildformate in einem array ausgegeben und picturefill.js macht den rest. Funktioniert wEinwandfrei aber leider müssen die Bildpfade dann so aussehen.

Variante A mit neuem <picture> tag
<picture>
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

Variante B mit neuem srcset und sizes attribut

ich dachte schon an preg_repalce im outputfilter aber leider macht das kein Sinn, also den Code anpassen.

Wobei Kategorien und auch Bilderpfade an nur ca. 4 Stellen angepasst werden müssen da wir ja bei commerce seo viele schöne Klassen verwenden
Ich würde sagen wenn dies Bilder schon mal Retina Ready sind ist es viel Wert.

Icons usw. kann man immer noch machen.
Diese sehen auch gut aus wenn mann z.B. 48x48px einfach auch 24x24px runter skaliert im css und dann werden diese im Retina Dysplay perfect angezeigt.

Duplicate mbdesign

Retina pics fertig... schnell mit wenig Code um Änderungen.
Den Quatsch oben in den Posts alles vergessen

1) eine Zeile JS in den Header für Pixel Ratio zu ermitteln (evtl besser in SESSION schreiben als in ein Cookie)???

Code

echo "<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?2:w.devicePixelRatio);document.cookie='devicePixelRatio='+dpr+'; path=/'})(window)</script>";

2)

PHP

<?php


/* -----------------------------------------------------------------
 *     $Id: category_image_info.php 420 2013-06-19 18:04:39Z akausch $
 *     Copyright (c) 2011-2021 commerce:SEO by Webdesign Erfurt
 *     http://www.commerce-seo.de
 * ------------------------------------------------------------------
 *     based on:
 *     (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
 *     (c) 2002-2003 osCommerce - www.oscommerce.com
 *     (c) 2003     nextcommerce - www.nextcommerce.org
 *     (c) 2005     xt:Commerce - www.xt-commerce.com
 *     Released under the GNU General Public License
 * --------------------------------------------------------------- */


defined('_VALID_XTC') or die('Direct Access to this location is not allowed.');


$a = new image_manipulation(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name, CATEGORY_INFO_IMAGE_WIDTH, CATEGORY_INFO_IMAGE_HEIGHT, DIR_FS_CATALOG_IMAGES . 'categories_info/' . $categories_image_name, IMAGE_QUALITY, '');


$array = clear_string(PRODUCT_IMAGE_INFO_SMOTH);


#if (PRODUCT_IMAGE_INFO_SMOTH != '')
        //$a->smoth($array[0]);


    $string = str_replace("'", '', CATEGORY_IMAGE_MERGE);
    $string = str_replace(')', '', $string);
    $string = str_replace('(', DIR_FS_CATALOG_IMAGES, $string);
    $array = explode(',', $string);
    //$array=clear_string();

    if (CATEGORY_INFO_IMAGE_MERGE != '')
        $a->merge($array[0], $array[1], $array[2], $array[3], $array[4]);


    $a->sharpen();
    $a->create();


//Retina Images @x2 und @x3 erzeugen
$x1_width = getimagesize(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name);
$x2_width = (CATEGORY_INFO_IMAGE_WIDTH*2);
$x3_width = (CATEGORY_INFO_IMAGE_WIDTH*3);


//Retina x2 und x3
$extension = substr(strrchr($categories_image_name, "."), 0);
$src_x2 = str_replace($extension, '@2x'.$extension, $categories_image_name);
$src_x3 = str_replace($extension, '@3x'.$extension, $categories_image_name);

//Retina Images @x2    
if($x1_width[0] >= $x2_width) {


    $b = new image_manipulation(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name, (CATEGORY_INFO_IMAGE_WIDTH*2), (CATEGORY_INFO_IMAGE_HEIGHT*2), DIR_FS_CATALOG_IMAGES . 'categories_info/' . $src_x2, IMAGE_QUALITY, '');

    #if (PRODUCT_IMAGE_INFO_SMOTH != '')
        //$b->smoth($array[0]);

    if (CATEGORY_INFO_IMAGE_MERGE != '')
        $b->merge($array[0], $array[1], $array[2], $array[3], $array[4]);

    $b->sharpen();
    $b->create();
}


//Retina Images @x3    
if($x1_width[0] >= $x3_width) {


    $categories_image = explode('.', $categories_image_name);
    if($categories_image[1] == 'jpg' || $categories_image[1] =='png' || $categories_image[1] =='gif')
    $categories_image_name_x3 = $categories_image[0] . '@3x.' . $categories_image[1];

    $c = new image_manipulation(DIR_FS_CATALOG_IMAGES . 'categories_org/' . $categories_image_name, (CATEGORY_INFO_IMAGE_WIDTH*3), (CATEGORY_INFO_IMAGE_HEIGHT*3), DIR_FS_CATALOG_IMAGES . 'categories_info/' . $src_x3, IMAGE_QUALITY, '');

    #if (PRODUCT_IMAGE_INFO_SMOTH != '')
        //$c->smoth($array[0]);

    if (CATEGORY_INFO_IMAGE_MERGE != '')
        $c->merge($array[0], $array[1], $array[2], $array[3], $array[4]);

    $c->sharpen();
    $c->create();
}

Alles anzeigen

3) xtc_image.inc.php 866 2014-03-17 12:07:35Z akausch $ ändern.

Super schlanke Änderung mit 100% Fallback.

PHP

<?php


/* -----------------------------------------------------------------
 *     $Id: xtc_image.inc.php 866 2014-03-17 12:07:35Z akausch $
 *     Copyright (c) 2011-2021 commerce:SEO by Webdesign Erfurt
 *     http://www.commerce-seo.de
 * ------------------------------------------------------------------
 *     based on:
 *     (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
 *     (c) 2002-2003 osCommerce - www.oscommerce.com
 *     (c) 2003     nextcommerce - www.nextcommerce.org
 *     (c) 2005     xt:Commerce - www.xt-commerce.com
 *     Released under the GNU General Public License
 * --------------------------------------------------------------- */


$hover_suffix = '_hover';
$down_suffix = '_down';
$file_ext = '.gif';
$src_x1 = '';


require_once(DIR_FS_INC . 'xtc_not_null.inc.php');
require_once(DIR_FS_INC . 'cseo_get_img_size.inc.php');


function xtc_image($src, $alt = '', $title = '', $css = '', $width = '', $height = '', $parameters = '', $mouseover = false, $mousedown = false) {
    if ((empty($src) || ($src == DIR_WS_IMAGES)) || ( $src == DIR_WS_THUMBNAIL_IMAGES) && (IMAGE_REQUIRED == 'false')) {
        return false;
    }

    if (isset($_COOKIE['devicePixelRatio']))
        $pixel_ratio = intval($_COOKIE['devicePixelRatio']);


    //Retina x2 und x3
    $extension = substr(strrchr($src, "."), 0);
    $src_x2 = str_replace($extension, '@2x'.$extension, $src);
    $src_x3 = str_replace($extension, '@3x'.$extension, $src);           

    if (file_exists($src_x2) && $pixel_ratio == 2) { // @x2 Bild nur laden wen es vorhanden ist und pixel_ratio >1 
        $src_x1 = $src; // Alte Größe ermitteln
        $src = $src_x2; // Neues Retina @x2 Bild
    } elseif (file_exists($src_x3) && $pixel_ratio > 2) { // @x3 Bild nur laden wen es vorhanden ist und pixel_ratio >2
        $src_x1 = $src; // Alte Größe ermitteln
        $src = $src_x3; // Neues Retina @x3 Bild
    }

    if ($css != '') {
        $css = 'class="' . $css . '"';
    }

    $image = '<img ' . $css . ' src="' . DIR_WS_CATALOG . xtc_parse_input_field_data($src, array('"' => '&quot;')) . '" alt="' . xtc_parse_input_field_data($alt, array('"' => '&quot;')) . '"';


    if ($width == '' || $height == '')
        $image .= ' ' . cseo_get_img_size($src_x1 !='' ? $src_x1 : $src) . ' '; // Für Retina Original Bildgröße verwenden sonst macht es kein Sinn


    if (xtc_not_null($title)) {
        $image .= ' title="' . xtc_parse_input_field_data($title, array('"' => '&quot;')) . '"';
    } else {
        $image .= ' title="' . xtc_parse_input_field_data($alt, array('"' => '&quot;')) . '"';
    }


    if ($mouseover == true || $mousedown == true) {
        $image .= image_mouseover($mouseover, $mousedown, $src);
    }


    if (xtc_not_null($parameters))
        $image .= ' ' . $parameters;


    $image .= ' />';


    return $image;
}

Alles anzeigen

Duplicate mbdesign

Zur info

An einigen stellen müssen die Bilder noch um die Funktion xtc_image.inc.php erweitert werden. Z.B. Im warenkorb.

jotest

Ist ein Kombination von mit dieser

https://github.com/ahoward/jquery.bires

möglich oder welche ist besser?

Weil ladezeiten wegen/wen geringe Bandbreidte ist vielleicht auch wichtig oder?

Benutzer online in diesem Thema