Since the past few months, I've been noticing that they tend to some kind of pixelated image first which then gets replaced by a much better image.
Is this some kind of trick to reduce perceived latency by facebook?
Or is it Chrome doing it?
i think it's progressive image rendering. Quote from the linked blog
Images already render progressively in a web browser -- but you can do even better. Simply save your GIF or PNG images with the "interlaced" option, or your JPEG images with the "progressive" option.
This blog might answer your query - checkout following links -
Image Optimization Part 3: Four Steps to File Size Reduction
Image Optimization Part 4: Progressive JPEG…Hot or Not?
Related
I've noticed there are two different ways facebook shows an open graph story with an image in a users' feed: one with a small image and the title and description next to it (example), and one with a larger image with the title and description beneath it (example).
Following a tutorial, I was able to generate the large images. However, now that I'm leaving the tutorial and designing my own script, my posts are always shown with the small image.
Anyone has an idea what's causing this? I'm pretty sure both methods use <meta property="og:image" content="someimage.jpg" />
In order to get the large image format your images must be at least 200x200. However, with the new News Feed rolling out soon, you'll want to make your images even larger. Facebook is now recommending 1200x630 images.
Note that even if you are using an image this large, Facebook may still display your story with a smaller image format. Facebook attempts to auto-optimize the format that it shows to people by continually running A/B tests, and so your posts may show up in any of the available image formats.
We recently wrote a blog post showing the different image formats which you may find helpful.
Use an image that is at least 1200 width by 630 height.
Use the Facebook DEBUG tool to call your page again, thereby clearing the Facebook cached version that you uploaded previously at a smaller size:
https://developers.facebook.com/tools/debug/
i am trying to load images from URL to UIIMageView.
it works fine, but i want to download the images at a lower resolution/size
because its taking too long to load.
i have tried to use AFNetworking+UIImage class but the performance are the same.
[iv setImageWithURL:[NSURL URLWithString:#"http://cegamers.com/wp-content/uploads/2011/06/automaton.jpg"] placeholderImage:[UIImage imageNamed:#"placeholder-avatar"]];
anyone know how a library or some kind of way for this?
Generally you can't do it without server-side help. Usually you'd rely on the server generating thumbnails for you. There are image conversion proxy servers that will download the full image server-side, and serve a resized version to you.
Without any sort of server-side resizing, the options are limited and not very good.
If the image is in progressive/interlaced format then you can download only part of the file, but that will be a low-quality approximation.
Unfortunately you can't know how much data you'll need in advance, so your best bet is to either request entire image and close the TCP/IP connection when you see you've got enough data (hopefully [NSURLConnection cancel] does that) .
Or you could download some arbitrary small amount of data using HTTP Range request and then estimate how much more you need to download (it might save some bandwidth, but it will cost you latency).
I'm not aware of anything in iOS SDK that would let you inspect how many progressive scans of a partially-downloaded JPEG file you've got, so you might need to get your hands dirty with libjpeg or your own JPEG parsing.
But really it'd be easier if you could download entire image server-side and generate a proper thumbnail for it.
Yes. If you simply add 's' to the end of the img_hash in any direct image link on imgur, then you get the small square version of it.
http://i.imgur.com/DkDdK.jpg <--- Direct link
http://i.imgur.com/DkDdKs.jpg <--- Small square version. Notice the extra s
We're currently working with Filepicker.io to allow users the ability to upload both images and videos. It appears that if we specify image conversions in the Javascript API options, video uploads don't process and instead get stuck at 99.30%. If I remove the 'conversions' option, video uploads process without issue. Is it not possible to specify image conversion options and accept both type of uploads? If so, this should really be specified in the docs.
I attached a JSFiddle with the code in question. http://jsfiddle.net/BYkD4/
It might be an issue on our end, taking a look now. For large files (+1Mb) we split the file into chunks, upload them in parallel, and then reassemble them on the server side. We use browser progress up to the 90% mark, after which we have to "best guess" what the server-side progress looks like, for now at least. That's the reason why it's hanging at 99.30% - it may actually be able to complete if you give it enough time.
In any case, looking into it
Edit: looks like this was an issue on our end. Fix deployed, everything should be working fine. Sorry about the issue
Trying to pull user images via the Facebook Social Graph.
Finding it odd that no matter what I upload the image as (gif, bmp, tiff, or jpg), my call to https://graph.facebook.com/507988137/picture?type=large (my pic) always returns a jpg.
Does anyone know if I'm OK assuming that his image is always a "jpg"? I'm using php get_file_contents to pull the images & would prefer not having to sniff test them for various formats.
Facebook doesn't save the original image that you upload. Instead it converts all uploaded images to jpgs of 4 different sizes to support all the different places where the image may be displayed.
In case you are interested, Facebook basically has this down to a science, in fact, I've read several times that they are the largest image hosting service in the world. More details within this Facebook blog post, Facebook Photos Infrastructure
That's because FaceBook stores it as a jpg, because that is in general the most efficient image format for pictures.
It's always a good idea to check if the data is what you expect. Checking image type is quite easy. It will always be a web format, which basically comes down to jpg, png and gif, with gif being very unlikely because of its limitations (GIF can contain 256 colors at most, and is generally larger than png. Has license limitations too).
BMP is not a web format and cannot be displayed in most browsers. You will not get a BMP from that url.
make sure you also handle the case where a gif is returned to you.
This is the default profile pic for users that doesn't update their profile pic
We've seen PNG images on the web that are less than 1kb. When I create a new blank PNG in Photoshop, its size is about 20-30 Kb :(
For example, I've seen a 100*10 px PNG that was only 90 bytes!
Which Apps can generate these? Do you have any tips?
After fvu's answer: plz tell me what optimizer is better than other?
There no reason a minimal png should be that big. Check out png optimizers like this one or this online tool should Photoshop not include such a tool. Google knows about even more PNG optimizer tools.
Edit: a 10*100px png floodfilled with red measures 143 bytes optimized with Paintshop Pro's integrated PNG optimizer. Apparently it can be made even smaller than what Paintshop manages :-)
Edit based on OP's comment: Corel Paint Shop Pro is a photo editor, I guess you can call it a lightweight alternative to Photoshop. It was the quickest way for me to create a png comparabable to op's example.
As for what optimizer is best: some good old fashioned testing and comparing should tell you a lot, I wouldn't be surprised to see that the performance of individual optimizers depends on the input characteristics - eg some will do better on photos than others but on computer imagery it's the other way around, based on the algorithms used.
Aside from the compression ratio the ease with which you can integrate the optimizer in your workflow should be considered quite important.