I would like to lessen the image size (and quality) of a jpeg on the fly when a user is using a certain browser, OS or screen size (used to distinguish mobile from desktop users). How do I do this?
I imagine hat i'd call a script that would return the image e.g.
<img src="<?resize.php?file=test.jpg&quality=75?>"
and in my resize.php I would need to convert test.jpg to be the $image ressource for imagejpeg () with which I can set the image quality.
How do I go about the conversion? also will
echo imagejpeg($img,NULL,$quality);
result in displaying an image using above html snippet?
You would need to write the resizing routine, and then have it saved someone web accessable. And I would cache the file the first time you resize it so you don't have to resize it every time someone loads a page.
Two objections:
img src requires an URL, not an image itself (actually, can be a data URL, but that's so wrong especially when trying to compress)
why rerender images for each hit? That would be horribly slow and inefficient. Just prerender them and select one of the variants according to user's specs.
If you still want to resize on the fly, then have a script resize.php or similar that will output the image of the given size. The script has to set the correct Content-Type header (image/jpg, for your example). Then use this as a tag:
<img src="resize.php?file=test.jpg&quality=75">
(note: no PHP tags, this is just a link!)
Related
Users on my website can click a portion of a photo to get a closeup of it.
I currently have a bit of JavaScript that fires off an AJAX call to a PHP script that uses ImageMagick to retrieve the relevant crop.
Could I be doing this better, outside of PHP? Using ImageMagick directly somehow, or something else?
Currently the files reside on the same server as the main website, but due to space restraints I'm in the process of moving them to a separate server, so will need to make a call between the two somehow.
The photos vary in size, some are 1600x1200 and only 200KB, others are 24MP+ 20MB+ originals.
Using ImageMagick, you have two options:
Crop the image while loading it. What is then loaded initially is a cropped image.
Load the image, then crop it. What is initially loaded is the complete image.
The first method is more efficient and faster.
This method is to append the image area information to the input image(s) in square brackets ([...]) like this:
convert wizard:[130x150+80+80] -resize 200% wiz-head.png
This will crop a piece of 130x150 pixels with an offset of 80 pixels from the top left corner of the original, built-in wizard: image. Here are both images side by side, wizard: (left) and the cropped section, resized by 200%:
If you wanted to crop a JPEG, you'd use something like:
convert some.jpeg[330x250+180+280] -resize 300% output.png
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page?
For example, i currently have a large image (1200x 1200) which i need to be fitted to 100x100. Would this be possible via jQuery or would it have to be done manually?
Thanks.
You would have to change your image sizes on the server and then change the page HTML or javascript to reference those smaller images. jQuery runs in the browser so, it can't take a 1200x1200 image on the server and somehow make it 100x100 before it gets downloaded.
But, changing the images to the smaller size on the server WILL drastically improve your page load time.
Yes it certainly will increase your page load speed.
And, resizing the image on the server is a better option.
reference:
Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?
To resize images server-side, you can use WideImage library.
With an instruction like this :
WideImage::load($path)
->resize(100, 100)
->output("jpg");
You load your image, resize it in memory and return its data in the desired format.
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page? Would this be possible via jQuery
No. This would require that the browser download the large image over the network and then process it to reduce it in size.
If you want to speed things up, you need to make the images smaller before they leave the server.
You don't need to do this manually though. Image resizing can be done programatically.
I'm building a responsive site using Zurb Foundation.
I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
The PHP file performs some simple arithmetic to constrain by width or height, checks if the resized version is already in cache, if so outputs it, if not, resizes the images, saves it using imagejpeg and outputs it with header("Content-type: image/jpeg");
I am also using Zurb Foundation and want to use the interchange javascript like so:
<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg"
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">
However, this does not seem to work. Only the 300px is shown for both breakpoints. After much testing it's clear that only what's in the src attribute is taking. The images passing through the resize script don't work. This is true even if it should be using the medium image which is the direct path the full size image.
I tried to debug the interchange javascript, but am not that skilled in Javascript.
Any help or advice would be appreciated. Someone must be trying to using dynamically resized images with PHP using interchange.js on a responsive site.
There is no need for debugging interchange, it works pretty well.
First, have you included the foudation.js file before interchange.js (dependancy) ?
Tip for debugging: try with default/medium/small and use different images (ex: different color rectangles) to quickly notice changes.
Also, in your example, there is only one path (see below) and you're having a "default" named-query. What is the point of loading the same image twice ? You might want your default size to be in src="", and your (typically) bigger sizes thereafter ?
What interchange does is letting the src"(ex: small.jpg)" loads as usual (hence it's displayed without js enabled) and THEN loads a bigger image depending on the named-query/media-query. So perhaps you could generate all your image size on upload (with no check for size existance needed). At least, it's the way I do it with wordpress.
<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">
As I can see on the Zurb Foundation Github repo Issues there may be a problem with url containing parameters and their regular expression
I have an image that has "src" pointing to an external server, like this:
<img src="http://somewhere.com/script.php?id=1234">
The image returned is .png and it can be returned as a "X" image or "O" image.
How can I determinate if the image is X or O with javascript/jquery? Calculating md5 of the loaded image? In case how can I access to the image bytes and calculate md5?
First of all, what you're doing is probably very inefficient. Because you load the image from a dynamic PHP script, most browsers will not cache it. Furthermore, loading images from another site you do not have access to is always considered bad practice.
Anyways, the easiest way to do this is using a server side language like PHP. Then you can get the file size using either curl, fsocketopen, get_headers or fopen. By comparing this number to the known file size of the images, you know which image is loaded. Take a look at this page for an example using curl.
Alternatively, you can also do this using JavaScript (if you really must): take a look at this stackoverflow question.
You could draw the image into a canvas object and then check the pixels. E.g. an X would perhaps have a black pixel at the top-left corner while an O would have a transparent or white one (depends on the images of course).
I am writing an PHP script to upload image files to the server and I have a few questions?
Is there a way to decrease the size of images in terms of kilobytes?
When I am using those files what is the best practice to embed those images into page? I mean do I always have to download the whole page?
Lastly, When resizing the pages(like 250X250 pixels) what is the pratice in order not to face the resolution problems?
I hope my questions are not too general. Thanks in advance!
Take a look at this http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/ - There are many other free tools out there to convert images after the upload. The resolution shouldn't be an issue that is usually a problem when you give a size to an image object in html that is huge and not proportioned.
Here is another php resizer I have used this code before to do what you are requesting.
Is there a way to decrease the size of
images in terms of kilobytes?
You'll need to create a new image, based on the one you received.
You should first take a look at the PHP GD functions.
For instance: http://ch2.php.net/manual/en/function.imagecreatefromjpeg.php
When I am using those files what is
the best practice to embed those
images into page? I mean do I always
have to download the whole page?
What do you mean by embedding?
If you are talking about decreasing the size of the image before is uploaded, you can't with PHP, unless you use something like HTML5/Flash to pre-process the file before being sent.
What you want to do, after a user uploads that image, verify that the file is a real image, then using some library (if you use a framework, it probably has a way to resize images) resize the image to whatever max width or max height or max width and height you are wanting.
This will decrease the size of an image.
For the 2nd question, if I understand it, you are talking about what about when a user uploads a 500x500 and you want it to be 400x250, then you must scale and crop, this way the image is never stretched but a few pixels from the top or the bottom will probably be removed.