Verscherp verschaalde jpg-bestanden in WordPress

Verscherp verschaalde jpg-bestanden in WordPress om ook de thumbnail afbeelding scherp te houden. Dit is als gevolg van de verschillende afmetingen die WordPress aanmaakt na het uploaden van een media file. Helaas wordt dit niet op de meeste efficiënte manier gedaan.

Dit zou zelfs een beetje kunnen helpen met page speed omdat de jpeg file ook wordt gezet op 90% van de kwaliteit. Hierdoor de grote van het bestand iets kleiner gemaakt en op deze manier gelijk ook weer scherper gemaakt. Dit kan dus meerdere voordelen hebben voor je website.

Verscherp verschaalde jpg-bestanden in WordPress zonder plugin

Als men een afbeelding upload in de media bibliotheek van WordPress, dan worden hier direct verschillende afmetingen van gemaakt. Deze afmeting worden bepaald door afmetingen die je opgeeft bij instelling >> media. Ook het theme en plugin kunnen verschillende afmetingen toevoegen. Dus als je een afbeelding upload worden daar direct meerdere afbeeldingen van gemaakt en opgeslagen.

Wie al een tijdje met WordPress werkt zal opgemerkt hebben dat de afbeelding die WordPress aanmaakt niet zo scherp zijn. Onderstaande code zorgt ervoor dat deze afbeelding scherpen worden gemaakt. Het is geen heel groot verschil maar het is zeker de moeite waard.

De onderstaande code kan je in de functions.php plaatsen van je child-theme. Waar is niet zo belangrijk maar het is altijd verstandig dit onderaan te plaatsen. Vergeet het ook niet in het child-theme te plaatsen zodat je dit niet verwijderd als er een up-date is van het thema. Als je nog geen child-theme hebt, maak er eentje. Lees hoe in WordPress child-theme maken.

// sharpen resized jpg-files
function my_sharpen_resized_file($resized_file) {
    $image = wp_load_image($resized_file);
    if(!is_resource($image))
        return new WP_Error('error_loading_image', $image, $file);
    $size = @getimagesize($resized_file);
    if(!$size)
        return new WP_Error('invalid_image', __('Could not read image size'), $file);
    list($orig_w, $orig_h, $orig_type) = $size;
    switch ($orig_type) {
        case IMAGETYPE_JPEG:
            $matrix = array(
                array(-1, -1, -1),
                array(-1, 16, -1),
                array(-1, -1, -1),
            );
            $divisor = array_sum(array_map('array_sum', $matrix));
            $offset = 0;
            imageconvolution($image, $matrix, $divisor, $offset);
            imagejpeg($image, $resized_file,apply_filters('jpeg_quality', 90, 'edit_image'));
            break;
        case IMAGETYPE_PNG:
            return $resized_file;
        case IMAGETYPE_GIF:
            return $resized_file;
    }
    return $resized_file;
}
add_filter('image_make_intermediate_size', 'my_sharpen_resized_file',900);

Deze code werkt alleen voor jpeg-files en dus niet voor png en andere bestanden. De originele file wordt niet bewerkt en zal blijven zoals men het upload.

Verscherp verschaalde jpg-bestanden in WordPress met plugin

Er zijn ook verschillende plugins die afbeeldingen scherper kunnen maken. Deze plugins kunnen vaak ook afbeeldingen comprimeren. Dit kan een extra voordeel zijn voor de website. Meeste ontwikkelaars gebruiken steeds meer andere online mogelijkheden om afbeeldingen te comprimeren. TinyPNG en CompressJPEG zijn bekende websites hiervoor.

Wie liever een plugin gebruikt kan eens kijken bij: Sharpen Images plugins. Iedereen kan voor zichzelf beslissen om een plugin te gebruiken of niet.