Recompressed images with artifacts

In any graphic editor, when saving an image in JPEG format, you can specify the compression ratio. The lower it is, the more blurry the image will be, but at the same time the file size is reduced.

Blurry images are perceived by users as of poor quality, which lowers the site’s rating in the eyes of users. This problem is especially relevant for product photos. Poor-quality images will simply spoil the impression and will make the goods cheaper.

Use JPEG images with a minimum quality of 90.

Demonstration of image changes with reduced quality:

Demonstration

PHP code

HTML code

Open a demo Download the example code

<?php


$image = imagecreatefromstring(file_get_contents('./photo.jpg'));
$qualities = [90, 80, 50, 30, 10, 1];
foreach($qualities as $quality) {
    if(!is_file('./photo-'.$quality.'.jpg'))
        imagejpeg($image, './photo-'.$quality.'.jpg', $quality);
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
            }
            img {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <?php foreach($qualities as $quality) {?>
                <div>
                    Качество <?=$quality?>% размер <?=filesize("./photo-".$quality.".jpg")?> Б
                    <img src="./photo-<?=$quality?>.jpg" />
                </div>
            <?php } ?>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
            }
            img {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="grid">
                            <div>
                    Качество 90% размер 56723 Б
                    <img src="./photo-90.jpg" />
                </div>
                            <div>
                    Качество 80% размер 36026 Б
                    <img src="./photo-80.jpg" />
                </div>
                            <div>
                    Качество 50% размер 19558 Б
                    <img src="./photo-50.jpg" />
                </div>
                            <div>
                    Качество 30% размер 15295 Б
                    <img src="./photo-30.jpg" />
                </div>
                            <div>
                    Качество 10% размер 10245 Б
                    <img src="./photo-10.jpg" />
                </div>
                            <div>
                    Качество 1% размер 7680 Б
                    <img src="./photo-1.jpg" />
                </div>
                    </div>
    </body>
</html>

Lessons

Recompressed images with artifacts

PRO subscription for working with the service