Cloudinary Blog

Compressing, Resizing, and Optimizing PHP Images

By Prosper Otemuyiwa Jul 12, 2020

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.

This article shows you how to compress images with PHP, one of the most common server-side languages for building web apps.

Advantages of Compressing and Optimizing Images With PHP

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.

Compressing Images With PHP

You can compress 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 Compressing Images With 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 image compression 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:
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 delivers the 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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("width"=>"0.5", "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(0.5));

Python:

CloudinaryImage("sample.jpg").image(width="0.5", crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="0.5" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/h_200/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :height=>200, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("height"=>200, "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->height(200));

Python:

CloudinaryImage("sample.jpg").image(height=200, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().height(200).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {height: 200, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation height="200" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation height="200" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation height="200" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_100/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>200, :height=>100, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("width"=>200, "height"=>100, "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(200)->height(100));

Python:

CloudinaryImage("sample.jpg").image(width=200, height=100, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(100).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 200, height: 100, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="200" height="100" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation width="200" height="100" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="100" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(100).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(100).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

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 Compressing And Optimizing Images?

Recent Blog Posts

Supercharge Shopify Conversions and Revenue with Cloudinary

By Aug 19, 2022

Our $2B Valuation

By Feb 17, 2022

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal Feb 02, 2022

Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Automatically Translating Videos for International Outreach

By Jan 26, 2022

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Minted Delivers High-quality Art at Scale with Cloudinary

By Jan 25, 2022

Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By Jan 24, 2022

Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.