I want to know how to apply progressive image in my website.
I'm using Image intervention. I search some way to apply image intervention
but I did not understand. Like
$img = Image::make('public/foo.png');
$img->interlace();
the original image and image that interlace don't have difference.
Can anyone help me to understand progressive image and how to apply it using image itervention in my website?
As you can see in this illustration:
Interlacing (also known as interleaving) is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image.
...
For example: Interlaced GIF is a GIF image that seems to arrive on your display like an image coming through a slowly opening Venetian blind. A fuzzy outline of an image is gradually replaced by seven successive waves of bit streams that fill in the missing lines until the image arrives at its full resolution.
~ Interlacing (bitmaps) on Wikipedia
In another word, you won't see any visual difference between two images unless you try to load them with a low-speed connection within a modern web browser.
(See: Firefox DevTools has now a network throttling tool to simulate slow connections)
And BTW, your code was correct. I guess you were just trying to see a difference between interlaced and non-interlaced images which you will not be able to as long as they are not huge and they'll load fast.
For better understanding:
Videos of SCTP vs TCP in progressive vs non-progressive
Related
Google Page Speed Insights suggests me to optimize webpage images on a webpage I'm currently working on. Images are uploaded from a server. I want to display optimized images on the page but don't want the original image on the server to change. Is there any way to do this in PHP?
You should reduce image size while uploading. Try this code.
reduce image size while uploading using the following PHP code used to upload image
If you don't want the original image to change then you'll find any optimisations you perform to bring the file size down / serve a move appropriately sized image will be redundant due to the overhead of "optimising" the image on the fly. (Unless your original image is just that big)
As I see it, you have 3 options:
Unless it has a massive impact (or you can envisage it will have a massive impact) just ignore Google Page Speeds for now.
You can use lossless compression which will reduce the file size without reducing the quality of the image. This is something you can do on your server with various different apps (just google what type of server you have followed by lossless image compression)
Just create a copy of the original image upon upload (or whenever) and serve that image to your users. The benefits to this are you can have different sized images which can be rendered for different devices, e.g. small image for mobile, and again you can use lossless compression on all of them. The downside to this is you'll obviously be using more server space.
Hope this helps!
I've been doing some speed optimization on my site using Page Speed and it gives recommendations like so:
Optimizing the following images could reduce their size by 35.3KiB (21% reduction).
Losslessly compressing http://example.com/.../some_image.jpg could save 25.3KiB (55% reduction).
How are the calculations done to get the file size reduction numbers? How can I determine if an image is optimized in PHP?
As I understand it, they seem to base this on the image quality (so saving at 60% in Photoshop or so is considered optimized?).
What I would like to do is once an image is uploaded, check if the image is fully optimized, if not, then optimize it using a PHP image library such as GD or ImageMagick. If I'm right about the number being based on quality, then I will just reduce the quality as needed.
How can I determine if an image is fully optimized in the standards that Page Speed uses?
Chances are they are simply using a standard compression or working on some very simple rules to calculate image compression/quality. It isn't exactly what you were after but what I often use on uploaded images etc etc dynamic content is a class called SimpleImage:
http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/
this will give you the options to resize & adjust compression, and I think even change image type (by which I mean .jpg to .png or .gif anything you like). I worked in seo and page optimization was a huge part of my Job I generally tried to make the images the size the needed to be no smaller or bigger. compress JS & CSS and that's really all most people need to worry about.
It looks like you could use the PageSpeed Insights API to get the compressions scores: https://developers.google.com/speed/docs/insights/v1/reference, though I'm guessing you'd want to run a quality check/compression locally, rather than sending everything through this API.
It also looks like they've got a standalone image optimizer available at http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2, though this appears to be a Windows binary. They've got an SDK there as well, though I haven't looked into what it entails, or how easy it would be to integrate into an existing site.
I currently have a website that aggregates images, the problem is those images are very large, and when I display them at smaller sizes, they still eat up a lot of computation.
I'm curious as to how to actually force reduced size/quality without just smooshing it into a <div> element.
Here is my site in question, you can see how 'laggy' it gets when you produce images:
http://newgameplus.nikuai.net/TEST/index.html
I was using timthumb.php to resize the images, but the host doesn't allow that script for some reason.
The best way to do this is to use some sort of image re-factoring service.
I have written my own one that uses ffmpeg and imagemagik to resize images on the fly and to generate arbitrarily sized thumbnails from videos. I memcache the results to make subsequent requests super snappy, and have some interesting additions such as automatic Point of Interest detection using Face Detection and Image Entropy, with the aim being "nice thumbnails, no matter the size"
An example of such a service is src.sencha.io - the documentation for this service is here but I have included the important bits below.
Specify Image Size
<img src='http://src.sencha.io/320/200/http://yourdomain.com/path/to/image.jpg'
alt='My constrained image'
width='320'
height='200' />
This will take your image (http://yourdomain.com/path/to/image.jpg) and run in through the resizing service, returning a 320x200 version of your image. You cannot set the gravity/point-of-interest using this service though (as far as I can tell).
You can also use this service to change formats, resize dataurls, do percentage resizes and use the resizing service to detect the width/height of the user agent requesting the image.
There are many such services available on the web.
I agree with slash: It depends on how the images are being resized. One thing I do for a site is use photoshop (or GIMP) to resize the image to the exact dimensions i need for the page i'm using the image for. Then i also include the same dimensions in the width-height attributes on the image itself.
Additionally, you can use your photo editing software to check the size of your image if you were to save it with a different file extension, and (specifically with jpeg and png files) photoshop will let you reduce the quality, which lowers file size and speeds up page loading.
I am working on a site at the moment, that requires the admins of the site to be able to upload pretty much any size of image, I then need to find a way to get the image down to the size required for the front end of the end the site, all this needs to be done without know what size of image the user is uploading, but the image always needs to scale to 209x293 without looking awful.
Is this even possible?
You should argue with your client, to forget that rule(accept ANY image), and accept rather, only images in that proportion, or better, you can use a tool to crop the image, forcing the user to crop an image in your needed resolution.
Jcrop is a library in Jquery which can help you a lot if you want to create that cropping feature.
Don't know your precise requirements, but since you tagged it with CodeIgniter, you can check out the Image Manipulation Class which has everything you need to do the job.
Not knowing the size of images before uploading is, you know, quite a common problem...Just be careful of the MAX SIZE, which is set in your php.ini.
You might find useful also the page on file uploading right in php's manual.
On my site I have given an option to user to choose thier profile image
Type link of an image
Image is a url link, and first I want it to resize to 400x300 (image's original size doesn't matter), and then display it on my web page.
Something like below:
<img src="http://mywebsite.com/resize.php?image=http://someotherurl.com/upload/image2.jpg&width=400&height=300" />
anyone knows this kind of script, please tell me how to solve this issue.
Thanks
A recent post:
https://stackoverflow.com/questions/1302464/php-image-resize-my-upload-script
has some code and comments that may give you some pointers. Otherwise may I suggest
http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php.
Good luck!
If you have the GD extenstion, you can use imagecopyresampled (the documentation also features some examples). However, if the image to be resized is large and there is a low memory limit on your server, you may run out of memory.
I don't have ready to use source code, but it should look like:
Load image pointed by image parameter into object of ImageMagick (or other graphics library).
Resize it.
Send content to output stream.
Optionally you could:
Check if loaded file is image (plus other validation checks).
Save resized image on disk and serve it from disk next time (if you do it often).
Check docs of you favorite graphics library used in PHP for details.
Good luck!
Use the Class called - class.upload.php.
Find it at: PHP Classes
We use it at all times in many of our work.
The name is deceptive but actually it is an uploader as well as image processor. It has a very big list of functionality for resizing images, adding text to images, converting formats, etc. etc.
There is sample code which shows how to read an Image from server, modify it and finally send it directly to browser without having to create a temp file on server.
HTH