Doplnění rozměrů obrázků

Školení, která pořádám

Pokud HTML dokument obsahuje obrázky, je důležité, aby pomocí atributů width a height byly uvedené jejich rozměry. Důvod je ten, že když prohlížeč HTML dokument stahuje, může ho průběžně zobrazovat ještě před tím, než se dostane ke stažení obrázků. Pokud rozměry obrázků uvedené nejsou, tak neví, kolik pro ně má vyhradit místa, takže při jejich stahování dochází k poskakování obsahu stránky. Rozměry je vhodné uvádět v souladu se skutečnou velikostí obrázku, jinak utrpí kvalita nebo rychlost stahování. V PHP slouží ke zjištění rozměrů obrázku funkce getimagesize.

Pokud vypisujete obrázky PHP kódem (např. v galerii), je vhodné tuto funkci používat. Pokud máte HTML soubor s obrázky bez uvedených rozměrů, možná oceníte následující skript:

<?php
if ($argc != 2 || !file_exists($argv[1])) {
    echo "Účel: doplnění rozměrů obrázků a alt popisků ke značkám <img>\n";
    echo "Použití: php htmlimgs.php soubor.html\n";
    exit;
}

/** Doplnění rozměrů obrázků
* @param array array(0 => značka obrázku až do >)
* @return string značka doplněná o atributy width, height a alt
* @copyright Jakub Vrána, https://php.vrana.cz/
*/
function add_sizes($matches) {
    $return = rtrim($matches[0], ' /');
    $append = substr($matches[0], strlen($return));
    $has_width = preg_match('~\\swidth=~i', $matches[0]);
    $has_height = preg_match('~\\sheight=~i', $matches[0]);
    if ((!$has_width || !$has_height) && preg_match('~\\ssrc=(?:"([^"]*)"|\'([^\']*)\'|([^\\s]*))~i', $matches[0], $match) && ($imagesize = @getimagesize("$match[1]$match[2]$match[3]"))) {
        $return .= ($has_width ? '' : ' width="' . $imagesize[0] . '"');
        $return .= ($has_height ? '' : ' height="' . $imagesize[1] . '"');
    }
    if (!preg_match('~\\salt=~i', $matches[0])) {
        $return .= ' alt=""';
    }
    return $return . $append;
}

$file = file_get_contents($argv[1]);
$cwd = getcwd();
chdir(dirname($argv[1])); // soubor může obsahovat relativní cesty
$file_new = preg_replace_callback('~<img\\s[^>]+~i', 'add_sizes', $file);
chdir($cwd);
if ($file != $file_new) { // zapisuje se jen v případě změny
    $fp = fopen($argv[1], "wb");
    fwrite($fp, $file_new);
    fclose($fp);
}
?>

Skript se spouští z příkazové řádky a je schopen ošetřit lokální i vzdálené obrázky. Výhodně je použita funkce preg_replace_callback, která v dokumentu najde všechny značky <img>. Představa řešení některých problémů bez této funkce (a její sestřičky preg_match_all) mě poněkud děsí.

Jakub Vrána, Řešení problému, 29.7.2005, diskuse: 7 (nové: 0)

Diskuse

rony:

mozno je este vhodnejsie doplnat tie rozmery v ramci CSS: style="width:<n>;height:<n>"
v pripadoch, ze chcem mat kod striktnejsi.

skript je dobry napad, moze byt prijemnou sucastou CMS systemov a inych generatorov obsahu.

29.7.2005 09:38:24