I am trying to optimize my website using pagespeed, and I got the advice to use JPEG2000 instead of normal JPG. So I converted all my images but when I changed the images it doesn't show on my laptop. So I checked "caniuse" and now I see that this extension is only supported on mobile phones (android and ios)
So how do I implement this in my website? Do I need to use javascript to change the extension to jpf if the device is a mobile phone?
I use picture and srcset based on screensize, but that doesn't work if I drag my screen smaller on my laptop.. Does anyone know how to use this new JPEG2000?
Someone gave you some really bad advice. Support for JPEG 2000 is very limited. It's likely you system simply cannot decode the image.
The problem with the JPEG standards is they are done from an academic egghead perspective. The original JPEG standard was entirely unimplementable. At the time there was no good 24-bpp format for photographs available so, as fate would have it a group of developers stepped in and filled the gaps in the standard. That resulted in the JFIF file format and the IJG encoder/decoder.
The JPEG2000 standard is even worse from an implementation point of view. It contains no end-to-end description of the encoding and decoding process. Add to that JPEG2000 provides limited benefits over existing image formats so there is is little incentive for developers to wade through the confusing standard and create implementations for it. Compare the PNG standard to the JPEG2000 and you will quickly see the difference. The PNG standard is a guide for implementors while the JPEG2000 standard seems like an academic paper.
As such, there is little incentive to adopt JPEG2000. It's just one of a myriad of image format out there that are rarely used.
JPEG 2000 is supported by Safari and no other browser.
Using it as the default image format is a terrible idea.
You could use srcset to provide images in a range of formats for clients with different levels of support.
Related
This question is slightly long, so I'll try to be clear.
On a website I co-develop, I created a drawing application that sends data about the lines drawn on the <canvas> element to the server to create an image and save it at multiple sizes, which works. There is the standard save which is saved to 320x212, with the smaller version at 240x176.
However, some users on my site use a pretty antiquated device/browser for the application. It also has a smaller viewport, so the image is smaller, so server-side I'm currently multiplying the coordinates to compensate when saving the image to the standard size. But this has the side-effect of random unfilled parts of the image showing up, that were filled in on the canvas.
(source: socialcu.be)
(On the canvas for the smaller device's viewport, the entire bottom portion was green, while my method of multiplying the coordinates to compensate caused many unfilled portions to appear on the scaled-up image)
So my first question is, would making the image as a vector image, scaling it up (while still a vector), and then saving it as a raster image fix that issue?
And secondly (if the answer to the first is a yes), then what would be the best way of doing this in PHP? I've heard of Cairo, but the information on it (namely tutorials for the PHP package) is quite lacking. Optimally, is there a way to do this in Imagick, or a tutorial on how to use Cairo?
Cairo is definitely lacking for documentation on the PHP site, so it will be a much more difficult set to learn. I found a couple of links through Google in regard to Cairo. There is a blog post about someone's experience with it here: Getting started with Cairo
Referenced in that post are a couple of walk-thrus by Michael Maclean.
There are quite a few examples of drawing with imagick on the imagick website, and from the looks of the available research online with examples imagick has a better support community (for now). imagick will output a raster image though.
I've programmed an uploadscript for uploading PDF files. Via PHP I want to check if the uploaded files are ready for print using the X3 standard. That means images and fonts has to be embedded into the file etc.
Unfortunately I don't know how to achieve my aim? Does anybody has some ideas that might help me?
I'm assuming you are referring to the ISO PDF/X-3 standard? Are you sure it has to be PDF/X-3 you need to check against? Most publishing workflows today use something based on either PDF/X-1a (the vast majority) or PDF/X-4 (up and coming).
How do you want the checking? There are a number of commercial libraries that allow you to PDF/X-3 checking (and other PDF preflight), do you want to use those or are you looking at implementing this yourself using some PHP library?
If you want to use an existing library, let me point you at pdfToolbox from callas (warning, I am affiliated with this company) which has a command-line version that is easily usable from PHP (I made such an implementation with Drupal). There are definitely other companies that have technology in this area too, Enfocus comes to mind.
If you want to use a PHP PDF library to do this, be aware that PDF/X-3 checking goes much further than having all images and fonts embedded. There are a lot of very subtle requirements you'll have to implement.
I am trying to create a web application where designers can submit and share there work. But i figured not all designers would submit only jpeg's or gif's. So i am allowing options to submit their creations in .ai (Adobe Illustrator) format. But after the file is uploaded can i give any options to the users to view those illustrations. Is there any external application which i can use to give preview of such files.
I am developing in PHP, and using CakePHP
They can save their files as SVG, which is a vector graphics file that won't loose quality on zoom.
Modern browsers can display SVG file, Wikipedia seems to use them a lot : http://fr.wikipedia.org/wiki/Fichier:SVG_Simple_Logo.svg
ImageMagick seems to have support for .ai
http://www.imagemagick.org
Illustrator natively has the ability to save as a PDF.
The challenge with users submitting an .ai file is you can have many versions of the same design or document with varied layer combinations within the same document and endless combinations of these across various artboards (which can all be different sizes within the same document). I don't think doing this well is a matter of simply being able to display a certain file format or a preview of the document. As above I think it would be better to utilise other formats such as PDF, SVG or just make it simpler and educate them through the UI to save comps as PNG/JPG/SVG etc and make the ai available for download.
Does anyone know of a script, preferably PHP-based that will allow conversion of a static flash to an image?
As long as you're talking about converting a flash DisplayObject (which nearly everything in flash is) to a jpeg, as3 core libs has a fantastic jpeg exporter that I use on a regular basis. It sends the converted jpeg or png as raw post data, so you can pretty much do anything you want with it on the php side of things.
You can get the as3corelib package here: http://github.com/mikechambers/as3corelib - There's many many tutorials on getting the bitmap encoder up and running all over the web, and it's super simple, but if you need help with that I can help as well.
I am currently working on a website which needs images to be uploaded. I have seen some standard image uploading tools which work well, but I am looking for one that compresses on the client side before the upload has been done.
I have looked at a view, but none seem to suit. Can anyone recommend a web based client side image compression tool?
Thanks
~ Kyle
Take a look at http://www.plupload.com/. It will resize images and chunk them so your server can handle them. I don't think it will actually compress them but this might solve your problem another way.
I am assuming you are talking mainly about JPG images.
SWFUpload supports client side image resizing. (i.e. reducing the number of Pixels, see Demo here.)
Other than that, compressing the image file (as in, compressing the file's binary data using a Zip algorithm) is not going to do you much good: JPG is extremely tough to compress and usually yields only 2-3 percent's savings.
One image compression tool i will recommend is https://optimizejpeg.com/ .It is a very very powerful online tool and i am using this currently for my website.You can compress 50 images in just few seconds and these images gets saved in a zip folder.You don't need plug in at all for this and hence this helps to speed up your website more without any hassles as we all know plug in creates excess load on your website.With this help of tool you can upload any jpg/png/gif or a ppt file.This tool helps you to compress your image drastically by reducing it to 70-80% with no losses.Colors can also be changed here and there using the existing colors of the images.To your surprise no one can view or identify the changes in the image and hence the look of the image remains the same and also get beautified.
So do enjoy using this tool and share your experiences.