Обрезка однотонных полей у изображений

Часто изображение содержит однотонные белые рамки. Они не несут никакой полезной функции и только увеличивают размер изображения. Это замедляет загрузку изображения и страницы в целом.

Удалите пустые белые края у картинки, используя функцию «Обрезать до содержимого» в графических редакторах.

Демонстрация работы и код PHP функции, обрезающей изображения:

Демонстрация

PHP код

HTML код

Открыть демонстрацию Скачать код примера

<?php
/**
 * Вам нужно установить imagemagick.
 * Для убунту это делается так apt install imagemagick
 */

$data = exec("magick photo.jpg -trim photo_crop.jpg", $output);
$data = array_pop($output);
?><!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;
                grid-gap: 10px;
            }
            img {
                width: 100%;
                border:2px solid black;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div>
                Исходная картинка
                <img src="./photo.jpg" />
            </div>
            <div>
                Обрезанная картинка
                <img src="./photo_crop.jpg" />
            </div>
        </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;
                grid-gap: 10px;
            }
            img {
                width: 100%;
                border:2px solid black;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div>
                Исходная картинка
                <img src="./photo.jpg" />
            </div>
            <div>
                Обрезанная картинка
                <img src="./photo_crop.jpg" />
            </div>
        </div>
    </body>
</html>

Есть замечания или дополнения? Напишите нам на почту admin@site-alarm.com или в телеграм канал.

Проверьте ваш сайт