Cloudinary Blog

Compressing, Resizing, and Optimizing PHP Images

Compressing, Resizing, and Optimizing PHP Images

Image optimization, which results in the smallest possible file size but no loss in visual quality, is a mandatory step before delivery. That way, you save bytes and improve website performance because the smaller the image files, the faster the browser can download and render them on viewers’ screens.

Currently, web developers build apps in many programming languages, such as PHP, Python, and Ruby. This article shows you how to optimize images in PHP, one of the most common server-side languages for building web apps.


How to Optimize for Page-Load Speed


The Importance of Image Optimization

The faster images load on your website, the more likely visitors will return, yielding higher conversion rates. In fact, half of all visitors expect websites to load within two seconds. Surveys from Akamai and Gomez have revealed that—

  • Lengthy load time is a major contributing factor of page abandonment, which becomes more likely with each additional second of load time. Nearly 40 percent of visitors abandon a page after only three seconds.
  • Seventy-three percent of mobile users have experienced problems with load times on their devices.
  • A one-second delay in load time can cut visitor satisfaction by 16 percent, leading to a seven-percent-or-higher drop in conversion rate.

Image Optimization in PHP

You can optimize images in PHP in one of the following ways:

  • Through PHP’s built-in functions, such as imagejpeg(), which takes the path of the output image and quality specification between 1 and 100. As a prerequisite, install the PHP’s GD Graphics Library.
  • Through the PHP Image Optimizer, a PHP library built by Piotr Sliwa, which leverages several libraries, including OptiPNG, pngquant, and [jpegoptim](http://jpegclub.org/jpegtran/). The Image Optimizer can compress image files by 10-70 percent without sacrificing visual appeal.
  • With the PHP Image Cache, a simple PHP class that compresses images on the fly. Once PHP Image compression is complete, the Image Cache caches the image in your browser and then returns the image’s new source.
  • With Imagick, a native PHP extension for creating and modifying images by means of the ImageMagick API.

An Ideal Alternative for Optimizing Images in PHP

With Cloudinary, you can efficiently optimize media assets—regardless of programming language. One reason is that, by default, Cloudinary automatically performs certain optimization steps on all transformed images. Plus, its integrated, fast delivery capability through content delivery networks (CDNs) ensures that images are seamlessly displayed on viewers’ devices.

Cloudinary offers the following optimization capabilities:

  • Automatic quality adjustment and encoding: Once you have added the q_auto parameter to an image URL, Cloudinary chooses the optimal quality-compression level and encoding settings according to the image content, its format, and the viewing browser. The result is a compressed image with superior visual quality. See this example:

    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :quality=>"auto")
    PHP:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("quality"=>"auto"))
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(quality="auto")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {quality: "auto"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {quality: "auto"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {quality: "auto"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation quality="auto" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation quality="auto" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation quality="auto">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("woman.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("woman.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
    https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

    To fine-tune the visual quality of your images through automation, add the q_auto:best. q_auto:low, q_auto:good, or q_auto:eco parameter, as you desire.

  • Automatic formatting: Adding the f_auto parameter to image URLs causes Cloudinary to optimally format images. In most cases, Chrome users would receive a WebP (.webp); Internet Explorer users, a JPEG-XR (.jxr); and Safari users, a JPEG 2000 (.jp2). If a browser does not support any of those formats, Cloudinary deliversthe image in the format depicted by the file extension.

    In case you add both the f_auto and q_auto parameters to the URL of a JPEG image, Cloudinary’s automated quality algorithm halts chroma subsampling, retaining the JPEG format with no switch to WebP. That’s a quality safeguard because the lossy WebP format always performs chroma subsampling, which might reduce the visual quality of some images.

  • Resizing and cropping: By adding the width (w) and height (h) parameters to their URLs, you can resize images with Cloudinary, as in this example:

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")
    PHP:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>0.5, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=0.5, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: "0.5", crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="0.5" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="0.5" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="0.5" crop="scale">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("sample.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("sample.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Flower
    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :height=>200, :crop=>"scale")
    PHP:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("height"=>200, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(height=200, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {height: 200, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(200).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {height: 200, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {height: 200, crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation height="200" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation height="200" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation height="200" crop="scale">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Crop("scale")).BuildImageTag("sample.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).generate("sample.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Flower

Here, Cloudinary maintains the aspect ratio but resizes the image to the height and width you specified.

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>200, :height=>100, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>200, "height"=>100, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=200, height=100, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(100).crop("scale")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 200, height: 100, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="200" height="100" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="200" height="100" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="100" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(100).Crop("scale")).BuildImageTag("sample.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(100).crop("scale")).generate("sample.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Flower

Cloudinary supports many image-cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, and imagga_scale.

Conclusion

Properly optimizing and caching images is a crucial step for enhancing website performance. The tips this post offers are just a start. See the Cloudinary documentation for more ideas on optimization of JPEG images without compromising quality and on image transformations.


Want to Learn More About Image Optimization?

Recent Blog Posts

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more