Solved

compressing images after upload

Posted on 2016-11-06
4
29 Views
Last Modified: 2016-11-07
I usually use this site to compress my images before using them:

https://tinypng.com/

I see they have an API so I would rather just let it handle the compression and upload in my actual from when I add a product. it would save  having to go to the website, upload it, download it and then upload it again on my site. I can't seem to find much detail in the documentation as how to implement thought. Not sure if anyone has experience with this?

https://tinypng.com/developers/reference/php

I was using this W3schools script but want to replace it with the API

	$target_dir = "uploads/";
			$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
			$uploadOk = 1;
			$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
			// Check if image file is a actual image or fake image
			$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    		if($check !== false) {
        	echo "File is an image - " . $check["mime"] . ".";
        	$uploadOk = 1;
    		} else {
        	echo "File is not an image.";
				$uploadOk = 0;
    }
			

			// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }

Open in new window

0
Comment
Question by:Black Sulfur
  • 2
  • 2
4 Comments
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 41876182
First question: How much is this going to save you, and how much does it cost.  Savings might include disk storage, bandwidth, etc.  Cost might include actual dollars (I don't know about the terms and pricing) as well as bandwidth and time required to optimize the images.  There is some chance that this kind of thing is a premature optimization.  Might be best to get the upload app working first, then take some measurements and think about whether it needs optimization at all.

Here is how I would design the app...

1. Upload the image
2. Move the image to permanent storage in two places.  One place is the "originals" directory, and the other place is the "optimized" directory
3. Use cURL to start an asynchronous process (one process for each uploaded image)
4. The async process would take the image from the optimized directory, send it to the API, retrieve the optimized image from the API, and overwrite the image file in the optimized directory
5. All online web images are served from the optimized directory
6. All downloaded and print images are served from the originals directory

As a sidebar note, you will achieve much better image compression with JPG than you will with PNG.  We have an article here at E-E that talks to some of the issues.
https://www.experts-exchange.com/articles/5931/Putting-Your-Photos-Online.html
0
 

Author Comment

by:Black Sulfur
ID: 41876288
In my particular instance, it isn't about saving space as so much getting a better GTmetrix score as you get lower rankings if your images aren't compressed.

https://gtmetrix.com/

As for your suggestion in point number 2, that is a great idea and I think I managed to find something that does something similar.

https://github.com/ImageOptim/php-imageoptim-api#readme
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41876293
getting a better GTmetrix score ...
I don't know how a GTMetrix score might translate into something of value (like money) but there's probably no harm in following their guidance.  For the best possible web site visibility, buy Google Adwords!  But that said, if it's not too much work to optimize the images, it's probably useful, especially if you expect your clients to be using low-speed internet connections.  You may also want to consider server-side cache - it will boost the overall performance of your web site.  And, of course, do all the right and standard things to make your database lightning fast.
0
 

Author Comment

by:Black Sulfur
ID: 41877758
Well, it could translate into money if you pitch it right ;) For example, you do some research and find that in a particular city there are a websites for a certain type of business but there is one without a website. You approach them and show them their competitors websites and that they have a low score. You then show them the mock-up you did for their site which you optimized properly by caching, compressing images, asynchronously loading scripts, minifying your css/html/js, etc. and all of a sudden their face lights up when they see their competitors with a score of 48/100 and their site is so old it isn't even built on bootstrap and isn't at all responsive. They they see yours with a score of 92/100 and fully responsive.

Anyway, I'm probably talking nonsense.

I will check out your article on caching. I just use a htaccess file for that currently.

I found something else that I have almost got working which is awesome. In case anyone is interested, here it is:

https://im2.io/api
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now