Cloudinary Blog

PHP Image Compression, Resize & Optimization

PHP Image Compression, Resize & Optimization

Image optimization is a mandatory step for delivering images with the smallest possible file size while maintaining visual quality. That way, you save bytes and improve your website performance because the smaller the image files, the faster the browser can download and render them on your viewers’ screens.

Currently, web developers build apps in a variety of 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 on the web.

Webinar
How to Optimize for Page Load Speed

The Importance of Image Optimization

The faster images load on your website, the higher your conversion rates. In fact, half of all online visitors expect websites to load within two seconds. Surveys from akamai.com and Gomez have revealed that—

  • Lengthy load time is a major contributing factor to 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(). That function takes the path of the output image and quality specification between 1 and 100. As a prerequisite, install the GD library for PHP.
  • Through the Image Optimizer, which is a PHP library, built by Piotr Sliwa, for optimizing images by leveraging 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 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 Easy Alternative for PHP Image Optimization

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 CDNs ensures that your images are seamlessly displayed on your viewers’ devices.

Cloudinary offers the following optimization capabilities:

  • Automatic quality adjustment and encoding: Once you have set up the q_auto parameter for an image, 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, set up the q_auto:best. q_auto:low, q_auto:good, or q_auto:eco parameter, as you desire.

  • Automatic formatting: The f_auto parameter enables Cloudinary to analyze the image content and select the best format for delivery. For example, it might deliver images as WebP to Chrome or as JPEG-XR to Internet Explorer but retain the original format for all other browsers. With both f_auto and q_auto in place as parameters, Cloudinary would still deliver WebP and JPEG-XR to the relevant browsers. However, if the quality algorithm determines that PNG-8 or PNG-24 is the optimal format, Cloudinary might deliver selected images in either of those formats.

  • 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 toward 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.

About Cloudinary

Cloudinary offers easy-to-use, cloud-based media-management solutions for the world’s top brands. With offices in the U.S., U.K., and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich-media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter.


Further Reading on Image Optimization

Recent Blog Posts

Automatic Video Creation for Social Media at Scale

With video becoming increasingly popular, especially across social media, it’s as important as ever to ensure that your videos aren’t one of the hundreds that people just scroll on past. There’ve been a few successful techniques over the last couple of years to help with that, such as—

Read more
Uploading, Managing and Delivering PDFs With Cloudinary

The Portable Document Format (PDF) is a popular format developed by Adobe for delivering formatted text and images. A PDF file includes a complete description of all layout elements, including text, fonts, images and layers, ensuring that the file will look identical when opened on any device. The PDF format also has the big advantage of compressing high-quality files to a relatively small file size.

Read more
Share Your DAM Assets! New Visual Collections + Media Portal

If you've been working at home with young kids around during these “corona days”, you might have intuitively expected the last word of the title above to be "Toys" or "Candy"   😜. However, if you're a member of a creative team for a web site or software application, then you know how essential it is to have simple ways to share and collaborate on pre-production media assets.

Read more