How does Facebook and other image intensive sites maintain a thumbnail size of the full image without shrinking or distorting the thumbnail?
Are these thumbs cropped versions of the original and stored so when the thumb is clicked they reference the full size image.
My images are stretched or shrunk if I simply try to confine them to a preset size in my img tag.
Ideally I would like to crop each image to fit a preset size without distorting the aspect ratio. If this can be done on the fly is this an efficient way to handle images in high volumes?
It is considered bad practice to resize images with your HTML markup or CSS styles. Scaling them up means bad quality, scaling them down means that your users have to download a larger file than necessary, which hurts speed.
There are libraries built for image resizing and caching for almost any language or framework. They mostly feature cropping as well, in order to maintain a standard aspect ratio. For PHP, have a look at phpThumb, which is based on GD/ImageMagick.
The resulting resized versions of your images are saved in a cache folder, so they don't need to be regenerated every time the image is requested. This way, the performance is almost as good as serving static files. The only overhead is a small check if the resized version exists in the cache.
I can't speak directly for facebook, but most sites upload a large image, and then smaller, preset sizes are automatically recreated (usually by the scripting language and some kind of library, like PHP/GD) and saved with a similar file name pattern, so that you can use as little bandwidth as possible, improve loading times, and avoid manipulating images with css.
Related
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.
Users on my site upload images of various dimensions. Some might be huge some might be small so resizing to a default image might work but small images being resized would look ugly. Is there anything i can do to resize all images to one size and make the quality clear without making it look crappy?
You will not be able to make small images "High Definition". No image can be scaled to a larger size without loosing clarity (with the exception of vector graphics, but I'm guessing that isn't what you're working with). You can, however, resize larger graphics into smaller ones.
Try phpThumb for an excellent image manipulation library, or see JohnPS's answer for a good solution for re-sizing larger images.
There is a PHP PEAR package Image_Transform that you can install to do basic resizing of images.
This package includes a function fit that will shrink an image to fit inside a box (width and height), but leave it the same size if it's already small enough. See scaling function docs.
I have one basic question. I have project where I need more sizes of one picture.
Yes... During uploading you make thumbnails... and so on... I know this story ... performance vs. storing possibilities.
So I save original img, a make 2 thumbnails copies for example max width 100px and maxwidht 200px with respect to ratio.
Now I need show image in 150px max width so I take saved img(200px) and .....
I use getimagesize() for calculating showing width and height respected to ratio,
or I set max-widht and max-height and I leave it for browser (browser make it for me),
or I set width a keep height: auto (but I want also limit max height)
So actualy I use php and getimagesize() but this function every time work with file and I am little scared. When you process 1 img it is OK but what about 20 or 100.
And... another idea, while uploading I save to DB also size information, for this I have to save data for 3 img (now only original one) this complicate everything.
So ... any ideas? What is your practice? THX.
Two images, at a maximum: A thumbnail, and the original image are sufficient. Make sure that your upload page is well-secured, because I've seen a website taken down through DoS (abusing an unprotected image-resizing page). Also limit the maximum upload size, to prevent abuse.
You can use the max-width and max-height CSS properties to limit the size of your images.
My approach
I wrote a pretty simple gallery application in php a while ago and this is how it works:
The images are stored in a folder with subfolders representing albums (and subalbums). They are uploaded via FTP and the webserver only has read-permissions on them.
For each image there are three versions:
a full one (the original)
a "mid" one (1024x768px max)
a "thumb" one (250x250px max)
All requests for images by the browser are served by php, and not-yet-existing versions are generated on the fly. The actual data is served through X-Sendfile, but that's an implementation detail.
I store the smaller versions in separate directories. When given a path to an original image, it is trivial to find the corresponding downscaled files (and check for existence and modification times).
Thoughts on your problem
Scaling images using HTML / CSS is considered bad practice for two simple reasons: if you are scaling up, you have a blurred image. If you are scaling down, you waste bandwidth and make your page slower for no good reason. So don't do it.
It should be possible to determine a pretty small set of required versions of each file (for example those used in a layout as in my case). Depending on the size and requirements of your project there are a few possibilities for creating those versions:
on the fly: generate / update them, when they are requested
during upload: have the routine that is called during the upload-process do the work
in the background: have the upload-routine add a job to a queue that is worked on in the background (probably most scalable but also fairly complex to implement and deploy)
Scaling down large images is a pretty slow operation (taking a few seconds usually). You might want to throttle it somehow to prevent abuse / DoS. Also limit dimensions and file size. A 100 MP (or even bigger) plain white (or any color) JPG might be very small when compressed, but will use an awful lot of RAM during scaling. Also big PNGs take really long to decompress (and even more to compress).
For a small website it doesn't matter, which approach you choose. Something that works (even if it doesn't scale) will do. If you plan on getting a good amount of traffic and a steady stream of uploads, then choose wisely and benchmark carefully.
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.
Lot of user opening my site in mobile,
Tell me which image type will load quickly in mobile device ,
jpg,gif,png ,
Which one is best ?
Go with PNG8 where possible and limit the color palette. Try to only use as many colors as strictly needed not more.
There are PNG tweaking tools which allow you to get rid of unnecessary chunks of that PNG. For more information on PNG chunks there is the PNG chunks specification found here.
http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
The tweaking tool I was talking about can be found here. It runs on Linux using wine as far as I have tested it.
http://entropymine.com/jason/tweakpng/
Additionally TinySVG is a pretty interesting format. SVG graphics allow lossless rescaling and because it is in fact a XML file you can modify it in a programmatic way.
EDIT: One note on JPEG graphics. If the file size exceeds 10kb save it progressive if it is under 10bk save it baseline. It is a small optimization for JPEGs.
There is no single "best" image type. The image that loads the quickest is the smallest one. But quick loading does you no good if your image is distorted and unidentifiable.
Pick image format base on the type of image you are trying to render:
JPEG is hands down the best for photos 99% of the time when you consider perceived image quality relative to file size; but JPEG's lossy compression algorithm relies on the existence of noise (lots of soft/subtle color transitions) and a lack of sharp lines/edges in the source image for the best effect. Never use JPEG for rasterized text!
PNG is the best option for rasterized images comprised of sharp edges and smooth/solid color blocks. Basically, anytime you need clean/lossless images (logos, icons, UI elements, text, etc.—anything but photos/paintings basically), you'd use PNG. It is also the only real option when you need alpha channel/partial transparency.
GIF is the only universally support animated image format, but aside from that I would just use PNG in most cases.
SVG is for vector images, but I'm not sure how many mobile browsers support it.
From a quick read, it seems that jpeg would be the best option. However, that is dependent on any specific needs you may have for some images (ie jpeg does not do transparent backgrounds, etc.)
Also, especially for a mobile site, if the images are frequently used parts of the website's layout (ie buttons, etc.) then using CSS Sprites is a good practice as it reduces the number of elements being downloaded to the user (of course, at the tradeoff that the image(s) which are downloaded are larger).