Bilder im webp Format werden im Chrome nicht angezeigt

[Nevada208]

Hallo zusammen,

für einen Online Shop werden Bilder aus einer Datenbank per PHP Script ausgelesen und entsprechend formatiert.

Im ersten Schritte lese ich die Bilddaten aus der Datenbank und lege ein JPG Bild in ein Verzeichnis.

Die Funktion dafür sieht so aus:

function mkthumb($img_src, // Dateiname
$img_width, // max. Größe in x-Richtung
$img_height, // max. Größe in y-Richtung
$folder_scr, // Ordner der normalen Bilder
$des_src, // Ordner der Thumbs
$imgquality) // Qualitätsfaktor jpg
{
// Größe und Typ ermitteln
list($src_width, $src_height, $src_typ) = getimagesize($folder_scr.$img_src);
// neue Größe bestimmen
if($src_width >= $src_height)
{
$new_image_width = $img_width;
$new_image_height = $src_height * $img_width / $src_width;
}
if($src_width < $src_height)
{
$new_image_height = $img_width;
$new_image_width = $src_width * $img_height / $src_height;
}

switch($src_typ)
{
case '2' : $image = imagecreatefromjpeg($folder_scr.$img_src);
$new_image = imagecreatetruecolor($new_image_width, $new_image_height);
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_image_width,$new_image_height, $src_width, $src_height);
imagejpeg($new_image, $des_src.$img_src, $imgquality);
imagedestroy($image);
imagedestroy($new_image);
break;

case '3' : $image = imagecreatefrompng($folder_scr.$img_src);
$newimage = imagecreatetruecolor($new_image_width, $new_image_height);
imagealphablending($newimage, FALSE);
imagesavealpha($newimage, TRUE);
imagecopyresampled($newimage, $image, 0, 0, 0, 0, $new_image_width,$new_image_height, $src_width, $src_height);
imagealphablending($newimage, true);
imagepng($newimage, $des_src.$img_src, 8);
imagedestroy($image);
imagedestroy($newimage);
break;
}

}

Das gesamte Script sieht so aus:


<?php

include_once("include_header.php");

$SQLsrv->targetDB = 'DATABASE0';

$sql = "select Artikelnummer from dbo.art";
$data = $SQLsrv->fetch_all_srv($sql);

$conn_id = ftp_connect(FTP_SERVER);
$login_result = ftp_login($conn_id, FTP_USER, FTP_PASS);
ftp_pasv($conn_id, true);

function convertImageToWebP($source, $destination, $quality) {
$extension = pathinfo($source, PATHINFO_EXTENSION);
if ($extension == 'jpeg' || $extension == 'jpg')
$image = imagecreatefromjpeg($source);
elseif ($extension == 'gif')
$image = imagecreatefromgif($source);
elseif ($extension == 'png')
$image = imagecreatefrompng($source);
return imagewebp($image, $destination, $quality);

}

$sizeArr = array(800 => 'basic', 601 => 'original', 270 => 'big', 125 => 'middle', 160 => 'preview', 55 => 'small', 80 => 'middlesmall', 45 => 'verysmall');

foreach($data as $value)
{
$art_nummer = $value['Artikelnummer'];

$sql2 = "SELECT bild_id, Bild, blobkey, Ordnung FROM Bild WHERE Blobkey ='AR".$art_nummer."'";
$data2 = $SQLsrv->fetch_all_srv($sql2);

foreach($data2 as $value)
{
$fp = "bilder/".$art_nummer."_".$value['Ordnung'].".jpg";
$file = $art_nummer."_".$value['Ordnung'].".jpg";
$filew = $art_nummer."_".$value['Ordnung'].".webp";
$inhalt = $value['Bild'];
$f = fopen($fp,"w+",9999999);
fwrite($f,$inhalt);
fclose($f);

foreach($sizeArr as $size => $target)
{
mkthumb($file, $size, $size, 'bilder/', 'bilder/transfer/', 100);

$src_file = "S:/xampp/htdocs/Datentransfer/Datenexport/bilder/transfer/".$file;
$output = 'S:/xampp/htdocs/Datentransfer/Datenexport/bilder/webp/'.$filew;

convertImageToWebP($src_file, $output, $quality=100);

$dst_file = "httpdocs/pictures_webp/".$target."/".$filew;

$upload = ftp_put($conn_id, $dst_file, $output, FTP_BINARY); // put the files

if($upload == false) {
echo "fehlgeschlagen".$art_nummer.'<br>';
}

}

unlink($src_file);
unlink("S:/xampp/htdocs/Datentransfer/Datenexport/bilder/".$file);
unlink("S:/xampp/htdocs/Datentransfer/Datenexport/bilder/webp/".$filew);
}
}
ftp_close($conn_id);
?>

Irgendwie läßt sich der Code hier nur besch.... einfügen!

Die Bilder werden alle in den richtigen Verzeichnissen erzeugt. Im Firefox sind alle Bilder sauber sichtbar.
Im Google Chrom und im Opera werden die Bilder nicht alle angezeigt, ein Teil schon. Die nicht angezeigten Bilder sind einfach weiß.
Es ist auch kein Muster zu erkennen das nur bestimmte Bildgrößen angezeigt werden. Das ist einfach quer Beet.

Wenn ich die Bilder im JPG Format erzeuge und auf den Server spiele funktioniert alles.

Hat jemand eine Idee wo ich hier ansetzen muss um den Fehler zu finden?

Gruß Neveda

[Christian Marquardt]

"Im ersten Schritte lese ich die Bilddaten aus der Datenbank und lege ein JPG Bild in ein Verzeichnis."
Unsinniges vorgehen
"Wenn ich die Bilder im JPG Format erzeuge und auf den Server spiele funktioniert alles."
Dann erzeuge halt JPGs

Den Rest kann man mangels lesbaren Quelltext nicht beurteilen

[Nevada208]

"Im ersten Schritte lese ich die Bilddaten aus der Datenbank und lege ein JPG Bild in ein Verzeichnis."
Wie soll ich es sonst machen. Die Bilder sind in der Datenbank des Warenwirtschafsystems, also nicht in
irgendeinem Verzeichnis als Datei.

"Dann erzeuge halt JPGs"
Das hatte ich vorher. Für Google ist die Ladezeit von Webseiten ein wichtiger Faktor für das Ranking.
Deshalb sollen die Bilder auch im webp-Format verwendet werden da diese ohne Qualitätsverlust wesentlich
kleiner sind von der Dateigröße.

Was ich nicht verstehe ist, dass Die Bilder z.B. im Edge und Firefox, sowie auf einem Windowsrechner (mit Tool zur Ansicht von webp Dateien)
sauber angezeigt werden. Nur im Opera und im Google Chrome werden nur einige (ca. 30%) angezeigt

Beispiel:
https://testshop.proficleanshop.de/k...inigungsmittel

Mal im Chrome und mal im Firefox öffnen.

Es werden durch das PHP Script 8 verschiedene Bildgrößen erzeugt weil ich die Bilder nicht skalieren möchte.

Von den 8 erzeugten webp-Bildern werden einige im Chrome angezeigt und einige nicht, auch nicht immer
die selben Größen.

"Den Rest kann man mangels lesbaren Quelltext nicht beurteilen"
Quelltexte ließe sich früher hier besser abbilden, einfach copy and paste... heute ist es einfach scheiße
Sieht auch nicht besser aus wenn ich es mit den Code-Klammern einschließe. Ich kopiere den Quelltext aus PhpStorm

und so sieht es hier aus:

  <?php  include_once("include_header.php");  $SQLsrv->targetDB   = 'DATABASE0';  $sql    = "select Artikelnummer from dbo.art where _freigabe = 1 and shopaktiv = 0 and _WARTEFREIGABE = 0"; $data   = $SQLsrv->fetch_all_srv($sql);  $conn_id = ftp_connect(FTP_SERVER); $login_result = ftp_login($conn_id, FTP_USER, FTP_PASS); ftp_pasv($conn_id, true);  function convertImageToWebP($source, $destination, $quality) {     $extension = pathinfo($source, PATHINFO_EXTENSION);     if ($extension == 'jpeg' || $extension == 'jpg')         $image = imagecreatefromjpeg($source);     elseif ($extension == 'gif')         $image = imagecreatefromgif($source);     elseif ($extension == 'png')         $image = imagecreatefrompng($source);     return imagewebp($image, $destination, $quality);  }  $sizeArr = array(800 => 'basic', 601 => 'original', 270 => 'big', 125 => 'middle', 160 => 'preview', 55 => 'small', 80 => 'middlesmall', 45 => 'verysmall'); foreach($data as $value) {     $art_nummer = $value['Artikelnummer'];      $sql2 = "SELECT bild_id, Bild, blobkey, Ordnung FROM Bild WHERE Blobkey ='AR".$art_nummer."'";     $data2   = $SQLsrv->fetch_all_srv($sql2);      foreach($data2 as $value)     {         $fp     = "bilder/".$art_nummer."_".$value['Ordnung'].".jpg";         $file   = $art_nummer."_".$value['Ordnung'].".jpg";         $filew  = $art_nummer."_".$value['Ordnung'].".webp";         $inhalt = $value['Bild'];         $f = fopen($fp,"w+",9999999);         fwrite($f,$inhalt);         fclose($f);          foreach($sizeArr as $size => $target)         {             mkthumb($file, $size, $size, 'bilder/', 'bilder/transfer/', 100);              $src_file = "S:/xampp/htdocs/Datentransfer/Datenexport/bilder/transfer/".$file;             $output = 'S:/xampp/htdocs/Datentransfer/Datenexport/bilder/webp/'.$filew;              convertImageToWebP($src_file, $output, $quality=100);              $dst_file = "httpdocs/pictures_webp/".$target."/".$filew;                 $upload = ftp_put($conn_id, $dst_file, $output, FTP_BINARY); // put the files                  if($upload == false) {                     echo "fehlgeschlagen".$art_nummer.'<br>';                 }         }         $counter++;         unlink($src_file);         unlink("S:/xampp/htdocs/Datentransfer/Datenexport/bilder/".$file);         unlink("S:/xampp/htdocs/Datentransfer/Datenexport/bilder/webp/".$filew);     } } ftp_close($conn_id); ?>

Funktion umd das JPG zu erzeugen

  function mkthumb($img_src,     // Dateiname             $img_width,    // max. Größe in x-Richtung             $img_height,       // max. Größe in y-Richtung             $folder_scr,       // Ordner der normalen Bilder             $des_src,        // Ordner der Thumbs                $imgquality)        // Qualitätsfaktor jpg {    // Größe und Typ ermitteln    list($src_width, $src_height, $src_typ) = getimagesize($folder_scr.$img_src);    // neue Größe bestimmen    if($src_width >= $src_height)    {      $new_image_width = $img_width;      $new_image_height = $src_height * $img_width / $src_width;    }    if($src_width < $src_height)    {      $new_image_height = $img_width;      $new_image_width = $src_width * $img_height / $src_height;    }      switch($src_typ)     {             case '2' :     $image = imagecreatefromjpeg($folder_scr.$img_src);                         $new_image = imagecreatetruecolor($new_image_width, $new_image_height);                         imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_image_width,$new_image_height, $src_width, $src_height);                         imagejpeg($new_image, $des_src.$img_src, $imgquality);                         imagedestroy($image);                         imagedestroy($new_image);                         break;              case '3' :     $image = imagecreatefrompng($folder_scr.$img_src);                         $newimage = imagecreatetruecolor($new_image_width, $new_image_height);                         imagealphablending($newimage, FALSE);                         imagesavealpha($newimage, TRUE);                         imagecopyresampled($newimage, $image, 0, 0, 0, 0, $new_image_width,$new_image_height, $src_width, $src_height);                         imagealphablending($newimage, true);                         imagepng($newimage, $des_src.$img_src, 8);                         imagedestroy($image);                         imagedestroy($newimage);                         break;      }  } 

[Christian Marquardt]

"Wie soll ich es sonst machen."
Die Bilder aus der Datenbank direkt anzeigen
img src="loadPic.php?pic=bild1&width=100&height=300"
Es wird ein PHP-Script aufgerufen, welches kein Contentype text/html zurückgibt, sondern ein image/jpeg bzw. image/webp. Das Script holt das bild aus der DB skaliert es ggf. und sendet es direkt an den Client

Ansonsten:
Bei jeden Request holst du das bild aus der DB und speicherst es im Filesystem?
Das ist alles andere als sinnvoll.



Bei dem Link sehe ich hier im Firefox alle Bilder

"heute ist es einfach scheiße"
Wer keine Zeilenumbrüche drin hat, ja da sieht es nicht so gut aus

[Christian Marquardt]

Lt. deinem Quellcode holst du die Bilder ja nicht nur aus der DB und speicherst sie irgendwo, sie werden dann ja auch noch umkopiert.

Würde mal folgenden Test machen:
Alle Bilder fertig im Filesystem ablegen
Beim anzeigen der Webseite nicht aus der DB holen und nicht umwandeln, sondern direkt darauf verweisen ( img src="pic1.webp")
Wenn die Browser das dann richtig darstellen können, liegt es wohl nicht am Bildtyp
Dann könnte der Ganze Prozess (DB-Abfrage, 2x speichern im Filesystem) zu lang sein

[Nevada208]

Das ist ja das kuriose. im Firefox passt alles aber nicht im Chrome.

"Die Bilder aus der Datenbank direkt anzeigen"
Die Bilder werden aus einer lokalen DB erzeugt und dann auf den Webserver gespielt. Dort liegen Sie dann als Bilddateien.

Erklärt aber alles nicht warum die Bilder im Firefox alle zu sehen sind und im Chrome nur teilweise.
Wenn das Script falsch wäre müssten ja alle Bilder Fehler haben. Es ist auch nicht das der Browser dann den alt-Text anzeigt, das Bild ist einfach weiß.

Was es noch kurioser macht ist, wenn ich die Bildgrößen etwas ändere in der Zeile
$sizeArr = array(800 => 'basic', 600 => 'original', 270 => 'big', 125 => 'middle', 160 => 'preview', 55 => 'small', 80 => 'middlesmall', 45 => 'verysmall')

wird ein in Chrome sichbares Bild erzeugt. Wenn ich aus 600 in der Zeile 601 mache für die Bildgröße dann wird ein Bild erzeugt was in Chrome angezeigt werden kann.
Aber nur für diesen einen Artikel, bei anderen wieder nicht.

[Christian Marquardt]

Mache den in #5 vorgeschlagenen Test mit den erzeugten Bildern
Erst all Bilder mit deinem Script erzeugen lassen
In einem zweiten Ablauf nur mit den Browsern die Bilder direkt anzeigen lassen ohne die Erzeugung durch das Script

"Die Bilder werden aus einer lokalen DB erzeugt und dann auf den Webserver gespielt. Dort liegen Sie dann als Bilddateien."
Bei jedem Request auf die Seite.
Wie beabsichtigst du das zu lösen, wenn mehrere gleichzeitig zugreifen?
Dem einen wird das Bild weggelöscht, was er gerade erzeugt hat?

[Nevada208]

Ich habe alle Bilder aus der Warenwirtschaft in ein Verzeichnis exportiert. Ohne mein Script sondern über die Exportfunktion des Programms. Dann
mit der Funktion als webp-Datein in ein neues Verzeichnis convertiert.

function convertImageToWebP($source, $destination, $quality) {
$extension = pathinfo($source, PATHINFO_EXTENSION);
if ($extension == 'jpeg' || $extension == 'jpg')
$image = imagecreatefromjpeg($source);
elseif ($extension == 'gif')
$image = imagecreatefromgif($source);
elseif ($extension == 'png')
$image = imagecreatefrompng($source);
return imagewebp($image, $destination, $quality);
}

Das Ergebnis ist das gleiche. Im Firefox kann ich mir alle Bilder anzeigen lassen und im Chrome sind wieder die Hälfte nur weiß.

[Christian Marquardt]

Du sollst das nur im 1. Lauf mit der Funktion machen. Im 2. Lauf auf die schon erstellten Grafiken verweisen

[Nevada208]

Was meinst Du auf die erstellten Grafiken verweisen? Hab ja 2 Verzeichnisse, das eine mit den JPG Dateien und das andere mit den WEBP Dateien

Hab jetzt noch mal folgendes Script probiert mit dem gleichen Ergebnis. Im firefox alles ok, im Chrome nur die Hälfte, der Rest wieder weiß

$input  = $verzeichnis.'/'.$image.'.jpg';
$output = 'S:/xampp/htdocs/Datentransfer/Datenexport/bilder/webp/'.$image.'.webp';  

$file=$input; $image=  imagecreatefromjpeg($file);
ob_start(); imagejpeg($image,NULL,100);
$cont=  ob_get_contents(); ob_end_clean();
imagedestroy($image);
$content =  imagecreatefromstring($cont);
imagewebp($content,$output);
imagedestroy($content); 

[Christian Marquardt]

Im 1. Lauf erzeugst du die Grafiken
Im 2. Lauf verlinkst du statisch auf die im 1. Lauf erzeugten Grafiken

[Nevada208]

1. Lauf = ich habe die webp Dateien aus dem Verzeichnis erzeugt in dem die jpg Dateien liegen und in ein neues Verzeichnis gespeichert
2. Lauf = ich lasse mir die Dateien im Firefox und Crome anzeigen

Ich würde Dir ja gern ein paar Bilder senden wie das ERgebnis aussieht aber sobald ich die hochladen will kommt:
"Image resize failed due to your image library not having support for this image type."

[Christian Marquardt]

Ich will die Grafiken nicht sehen. Was soll ich damit?
Es geht darum, ob die in dem Verzeichnis erzeugten Grafiken von den Browsern angezeigt werden, wenn sie schon statisch da sind - vorher durch das Script erzeugt. Ohne vorher aus der DB gelesen worden zu sein und umkopiert.
Dann kannst du das Problem einkreisen, ob es an den Browsern liegt; die Grafiken "falsch" sind oder du ein zeitliches Problem hast

[Nevada208]

"Ich will die Grafiken nicht sehen. Was soll ich damit?"
Ich wollte Dir nicht die Bilder schicken sonder eine Screenshot wie die Ausgabe im Chrome und Firefox ist.

Ein Problem mit dem Browser ist es nicht. Es muss was am Script sein welches die WebP Dateien erzeugt. Ich habe mal ein paar Bilder von den Bildern aus dem lokalen jpg-Verzeichnis über ein online Tool
zu WebP generieren lassen. Die sind alle in Ordnung. Hast Du vielleicht ein Codebeispiel für die Convertierung jpg to webp für PHP?

[Christian Marquardt]

Nein. Wie gesagt halt ich die Nutzung nicht für sinnvoll