PHP Image Processing Techniques: Compression, Cropping, Watermarking, and Thumbnail Generation

In modern web applications, image handling is a common requirement, including compression, cropping, watermarking, and thumbnail generation. PHP offers robust image processing capabilities through its GD library, and this guide demonstrates practical techniques with complete code examples.

Image Compression

Compressing images reduces page load time and bandwidth usage. The following PHP function uses GD to compress JPEG, GIF, or PNG files to a specified quality.

<code style='font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; font-size: 12px; display: -webkit-box; padding: 15px 16px 16px; color: rgb(171, 178, 191)'><span style="color: rgb(198, 120, 221); line-height: 26px">function</span> compressImage(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$quality</span>) {<br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$info</span> = getimagesize(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  <br/>  <span style="color: rgb(198, 120, 221); line-height: 26px">if</span> (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/jpeg'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromjpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/gif'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromgif(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/png'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefrompng(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  }<br/>  <br/>  imagejpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$quality</span>);<br/>  <br/>  <span style="color: rgb(230, 192, 123); line-height: 26px">return</span> <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>;<br/>}<br/><br/><span style="color: rgb(209, 154, 102); line-height: 26px">$source</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'original.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'compressed.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$quality</span> = 50;<br/><br/>compressImage(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$quality</span>);<br/></code>

Image Cropping

Cropping adjusts images to required dimensions. The example shows a function that crops an image based on given coordinates and size.

<code style='font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; font-size: 12px; display: -webkit-box; padding: 15px 16px 16px; color: rgb(171, 178, 191)'><span style="color: rgb(198, 120, 221); line-height: 26px">function</span> cropImage(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>) {<br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$info</span> = getimagesize(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  <br/>  <span style="color: rgb(198, 120, 221); line-height: 26px">if</span> (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/jpeg'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromjpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/gif'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromgif(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/png'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefrompng(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  }<br/>  <br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$crop</span> = imagecrop(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>, [<span style="color: rgb(152, 195, 121); line-height: 26px">'x'</span> =&gt; <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span>, <span style="color: rgb(152, 195, 121); line-height: 26px">'y'</span> =&gt; <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span>, <span style="color: rgb(152, 195, 121); line-height: 26px">'width'</span> =&gt; <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(152, 195, 121); line-height: 26px">'height'</span> =&gt; <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>]);<br/>  <br/>  imagejpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$crop</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>);<br/>  <br/>  <span style="color: rgb(230, 192, 123); line-height: 26px">return</span> <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>;<br/>}<br/><br/><span style="color: rgb(209, 154, 102); line-height: 26px">$source</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'original.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'cropped.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = 0;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = 0;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$width</span> = 200;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$height</span> = 200;<br/><br/>cropImage(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>);<br/></code>

Adding Watermark

Watermarks protect image copyright. This function overlays a PNG watermark onto an image at a chosen position (top‑left, top‑right, bottom‑left, bottom‑right).

<code style='font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; font-size: 12px; display: -webkit-box; padding: 15px 16px 16px; color: rgb(171, 178, 191)'><span style="color: rgb(198, 120, 221); line-height: 26px">function</span> addWatermark(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$watermark</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$position</span>) {<br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$info</span> = getimagesize(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  <br/>  <span style="color: rgb(198, 120, 221); line-height: 26px">if</span> (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/jpeg'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromjpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/gif'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromgif(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/png'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefrompng(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  }<br/>  <br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkImg</span> = imagecreatefrompng(<span style="color: rgb(209, 154, 102); line-height: 26px">$watermark</span>);<br/>  <br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkWidth</span> = imagesx(<span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkImg</span>);<br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkHeight</span> = imagesy(<span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkImg</span>);<br/>  <br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$position</span> switch {<br/>    <span style="color: rgb(198, 120, 221); line-height: 26px">case</span> <span style="color: rgb(152, 195, 121); line-height: 26px">'top-left'</span>:<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = 0;<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = 0;<br/>      <span style="color: rgb(230, 192, 123); line-height: 26px">break</span>;<br/>    <span style="color: rgb(198, 120, 221); line-height: 26px">case</span> <span style="color: rgb(152, 195, 121); line-height: 26px">'top-right'</span>:<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = imagesx(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>) - <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkWidth</span>;<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = 0;<br/>      <span style="color: rgb(230, 192, 123); line-height: 26px">break</span>;<br/>    <span style="color: rgb(198, 120, 221); line-height: 26px">case</span> <span style="color: rgb(152, 195, 121); line-height: 26px">'bottom-left'</span>:<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = 0;<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = imagesy(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>) - <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkHeight</span>;<br/>      <span style="color: rgb(230, 192, 123); line-height: 26px">break</span>;<br/>    <span style="color: rgb(198, 120, 221); line-height: 26px">case</span> <span style="color: rgb(152, 195, 121); line-height: 26px">'bottom-right'</span>:<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = imagesx(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>) - <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkWidth</span>;<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = imagesy(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>) - <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkHeight</span>;<br/>      <span style="color: rgb(230, 192, 123); line-height: 26px">break</span>;<br/>    default:<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span> = 0;<br/>      <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span> = 0;<br/>      <span style="color: rgb(230, 192, 123); line-height: 26px">break</span>;<br/>  }<br/>  <br/>  imagecopy(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkImg</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$x</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$y</span>, 0, 0, <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkWidth</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$watermarkHeight</span>);<br/>  <br/>  imagejpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  <br/>  <span style="color: rgb(230, 192, 123); line-height: 26px">return</span> <span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>;<br/>}<br/><br/><span style="color: rgb(209, 154, 102); line-height: 26px">$source</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'original.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$watermark</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'watermark.png'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$position</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'bottom-right'</span>;<br/><br/>addWatermark(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$watermark</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$position</span>);<br/></code>

Generating Thumbnail

Thumbnails are useful for displaying smaller versions of images. The sample function creates a true‑color thumbnail with specified width and height.

<code style='font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; font-size: 12px; display: -webkit-box; padding: 15px 16px 16px; color: rgb(171, 178, 191)'><span style="color: rgb(198, 120, 221); line-height: 26px">function</span> generateThumbnail(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>) {<br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$info</span> = getimagesize(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  <br/>  <span style="color: rgb(198, 120, 221); line-height: 26px">if</span> (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/jpeg'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromjpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/gif'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefromgif(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  } elseif (<span style="color: rgb(209, 154, 102); line-height: 26px">$info</span>[<span style="color: rgb(152, 195, 121); line-height: 26px">'mime'</span>] == <span style="color: rgb(152, 195, 121); line-height: 26px">'image/png'</span>) {<br/>    <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span> = imagecreatefrompng(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>);<br/>  }<br/>  <br/>  <span style="color: rgb(209, 154, 102); line-height: 26px">$thumb</span> = imagecreatetruecolor(<span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>);<br/>  <br/>  imagecopyresampled(<span style="color: rgb(209, 154, 102); line-height: 26px">$thumb</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>, 0, 0, 0, 0, <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>, imagesx(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>), imagesy(<span style="color: rgb(209, 154, 102); line-height: 26px">$image</span>));<br/>  <br/>  imagejpeg(<span style="color: rgb(209, 154, 102); line-height: 26px">$thumb</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>);<br/>  <br/>  <span style="color: rgb(230, 192, 123); line-height: 26px">return</span> <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>;<br/>}<br/><br/><span style="color: rgb(209, 154, 102); line-height: 26px">$source</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'original.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span> = <span style="color: rgb(152, 195, 121); line-height: 26px">'thumbnail.jpg'</span>;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$width</span> = 200;<br/><span style="color: rgb(209, 154, 102); line-height: 26px">$height</span> = 200;<br/><br/>generateThumbnail(<span style="color: rgb(209, 154, 102); line-height: 26px">$source</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$destination</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$width</span>, <span style="color: rgb(209, 154, 102); line-height: 26px">$height</span>);<br/></code>

By leveraging PHP's GD functions as shown, developers can efficiently perform these image processing tasks in their projects.