Google's PageSpeed tool told me to optimize my PNG images, which were saved for web in Photoshop. After researching lossless PNG compression options I downloaded ImageOptim and put a few images through it. The results have vastly different colors than the originals, which seems to indicate that this compression is actually lossy. Any suggestions?
Original image:
After ImageOptim:
Your image has embedded color profile, which for web is very wasteful and a compatibility headache.
For the web always export images in sRGB color, with no embedded profile, gamma 2.2.
http://imageoptim.com/color-profiles.html
Related
I need to get rather good images from my modelled objects from dymola. Taking a screenshot / using the snipping tool results in pictures with very poor quality due to the size of the models.
Is there a way to export the "pictures" i drew in dymola?
You can export your model as an SVG image which is scalable and editable.
Best regards,
Rene Just Nielsen
The SVG export recommended by Rene Just Nielsen is not bad, but the models often don't look exactly as they do in Dymola, so I prefer the png export.
High resolution png images can be exported with the function exportDiagram.
DymolaCommands.Documentation.exportDiagram(
"C:/tmp/export.png",
width=2000,
height=2000,
trim=true,
modelToExport="Modelica.Electrical.Analog.Examples.CauerLowPassSC");
Some notes about the function:
Very high resolutions, e.g. 4000x4000 pixels, take very long to export
If only file name is specified, the pics don't end up in the working directory but at top of the drive where the working directory is located
The function also exports svg files if a filename with the corresponding ending is chosen
We are building a web app where the user can make a design by using fabric.js and at the end he should receive a pdf file with his work.
At first, we tried to use JSPDF because it was prefered to have a cliente-side solution. However by doing pdf.addImage(canvas.toDataURL(),...) we are rasterizing the design.
In second place, we tried server side solution using WKHTMLTOPDF, sending canvas.toSVG(), but there are some issues with fonts and shapes rendering.
The designs are complex as they can have text, shapes, images and svg.
We also tried INKSCAPE (inkscape --without-gui --export-pdf ...), MPDF and MUPDF without good results. IMAGEMAGICK is not a solution has it also rasterize the design.
The main goal is to get a vector pdf, where it's possible to increase size and where the elements of the design are selectable, and if possible that pdf should be ready to print (300 dpi and cmyk)
Yes its possible using TCPDF library.
Please check this ImageSVG api for more information for converting SVG to PDF.
https://tcpdf.org/examples/example_058/
Export the canvas to svg and use pdflib to make the pdf.
You can find an exemple here:https://www.pdflib.com/pdflib-cookbook/graphics/starter-svg/
With phantomjs you can choose the file format to use for page.render().
I'm finding that the file size I'm getting for png is around three times higher than what I'm getting for gif. I wasn't aware that png should be any worse (in terms of file size) than gif; in fact I thought png was meant to be better.
Unfortunately, I kinda need to output to png because of its support for variable opacity, but the larger file size is a bit of an issue.
So, is there any way in which I can control file size of the png? Maybe change the encoding scheme or something? I'm currently using phantomjs 1.9.8.
Inside of PhantomJS
No, there is no way to make the png file size smaller, but there is a way to make it bigger (just for fun):
Render the file to png,
load the file to a canvas of appropriate size,
get the Data-URI of the canvas in png or any other format,
decode the Base 64 part and write to file (this is very tricky to get right).
PhantomJS 1.x has a bug which results in a vastly inflated, but valid file.
Only jpeg rendering enables you to specify a quality setting which will result in a smaller file size, but then again jpeg doesn't support transparency.
You could also see whether PhantomJS 2.0.0 behaves better, because it has an engine underneath it that is almost three years newer than in PhantomJS 1.x.
Outside of PhantomJS
Your best bet would be to render the png in PhantomJS as-is and post-process it with your favorite library. It may even be enough to open it and save it again.
You can for example call an installed program with the child process module or your can open a webpage that contains such a service and upload the captured file or base64 representation of it. The possibilities are endless.
I'm trying to insert some SVG images in a PDF using TCPDF with the method TCPDF::ImageSVG, but when I try this I get a white space.
If I try to enable TCPDF::setRasterizeVectorImages the image shows in the PDF file, but it is rasterized of course and so its quality is not good.
Do you have any idea?
Thank you very much for your help!
Unfortunately, TCPDF's SVG handling is quite limited, and the cause of your issue depends on the SVG you are trying to use. Later versions of TCPDF support more SVG functionality, so if you haven't done so, try using a later version of TCPDF.
If an update doesn't resolve the issue, and you're forced to use raster images, you can improve quality at the cost of file size. You can do this by rasterizing them at a high DPI yourself outside of TCPDF. Once you've done this, take your new high-resolution raster image and add it to your PDF with the Image method like any other raster image. At work we usually rasterize to 300dpi, but your application may call for more or less.
If your image gets added to the PDF far larger on the page than you expected, specify at least one of the dimensions so TCPDF knows how much of the page you're intending the image to use.
I want to use Webp and get my images much small, at last for serving them to chrome browsers. I've download many types of conversion tools, including the official one. I tried to convert PNG with Alpha transparency and get awful results. See image below..
According to what I see on many websites, it shold handle transparency incredibly well. I wanted to know if you know why I get these kind of results and what I need to do or what tool I need to produce high quality webp transparent images that will replace my png ones.
Second, I wanted to know the comparability. Should I server those images only for chrome uses? - OF course the most important issue is the image quality outpu.
Thanks
You are probably using an older version of WebP library/binary, which didn't have alpha support. So the images you see have alpha channel stripped.
Try again with the latest release v0.2.0:
http://code.google.com/p/webp/downloads/list