I'm trying to design a poster using HTML, currently CSS allows me to get a huge canvas (90cmx200cm), but I can't get a document to send for printing.
Chromium does not allow using custom paper size and Firefox let me use the required size (on non-standard inches) but fails miserably to render a high quality PDF (Even 20px text that looks good when browsing w/o zoom).
I was thinking that I should be able to get a lower level interaction with the renderer to get this done.
The output format is irrelevant as long as it's portable enough.
Is there a way to achieve this?
There are a few things you need to know. Firstly print quality is related to dots-per-inch. Best software and printer in the world isn't going to make a 100 x 100 pixels photo print quality.
http://www.vsellis.com/understanding-dpi-resolution-and-print-vs-web-images/
Images on web pages are rasterized images, and typically quite low resolution (compressed formats such as JPEG and PNG to reduce bandwidth use). You might try using high-resolution images and scaling them with CSS (I have not idea how this will print though).
Make sure all of your text is actually text (don't use images).
To improve quality ensure images are high resolution. If possible you could explore using SVG, which is a loss-less format for diagrams and line drawings. I believe this should be preserved if you print to PDF. There are also third party libraries that convert SVG to PDF.
Related
I just started to learn svg. One thing perplexes me is I find some site use svg/path to draw a text logo. Like this one:http://www.desiringgod.org/
The logo is pretty simple itself, however, the SVG it is using contain a horrendous <path> tag where there are lots of numbers.
I understand that with SVG we can scale the logo, but I don't see any difference if this logo is based on a .png file. So what really is the benefit?
Secondly, I don' think something like
<path d="M115.326252,8.93098333 L115.326252,16.3798167 L113.923083,16.3798167 L113.923083,14.96265 L113.878305,14.96265 C113.092947,16.0569833 111.560896,16.5939833 109.858654,16.5939833 C106.367752,16.5939833 103.855367,14.0609833 103.855367,8.63131667 C103.855367,3.20098333 106.367752,0.667483333 109.858654,0.667483333 C112.454152,0.667483333 114.454146,1.91331667 115.390858,5.21765 L113.771894,5.53931667 C113.007521,3.07148333 111.7296,2.12731667 109.943088,2.1273166 ....</path>
is written by human being. This must be generated by something, isn't it?
The benefits of using SVG logos over PNG logos are the following:
Scale to any size, perfect for responsive websites.
Look sharp on retina displays.
Don't lose clarity, except for very tiny sizes (same with PNG).
With PNG files you would most likely need to generate multiple resolution versions of the same image and hope that the original image is large enough to support the future display resolutions (8K for example).
And yes, the path is not written by a human being. It's a standard part of an SVG file. You could also do stuff like export SVG files as HTML5 canvas code with an ink2canvas extension in Inkscape.
Advantages of SVG:
Resolution Independence
Super-Accessible DOM Node-Based API
No Unnecessary HTTP Requests
Easy Interactive Scripting
Read more details on: Why Aren’t You Using SVG?
In here, I will describe some differences between using SVG and PNG from an application perspective:
SVG files are lighter than PNG files when deployed to your
application.
PNG is more efficient as far as UI responsiveness since the file is
already within your application, and there is no scaling needed, but it's heavier than your SVG file.
PNG gives a better focus to photographs or detailed images than SVG.
I personally use SVG for icons and logos and PNG for photographs or detailed images.
SVG offers a way to do full resolution graphical elements, no matter
what size screen, what zoom level, or what resolution your user's
device has.
So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG.
SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf).
The other benefit of SVG is,
When you use images in an html document with the tag, you are defining a file that the user's browser will request. This request will take up bandwidth and require more precious time to download. If your image is instead a set of dom nodes, it cuts that extra HTTP request out, making your website faster and more user friendly.
An SVG XML document of any complexity looks relatively archaic and complicated, and seemingly isn't nearly as easy as just using an image.
I've an original image which is shown here. This is a HD image which is saved as jpg format. jpg is a lossy format which compresses the image when loaded on websites. So I saved the image as .png and tried to view it in my website, but the image was blurred. I even increased dpi of the image in paint.net, but the image was still blurred in my website.
Here is a screen shot of my website:
I want HD image to be shown in website without any blur. How can I do it?
Start with a higher resolution original image
I assume you are working from the similar looking template image, and the smartphone's screen has been added in after? The original image you linked to is only 600x212 pixels which is a very small size to work from (smaller than many mobiles, iphones and tablets). You need to start with a much larger and higher resolution image, and shrink it down as needed. Starting with a smaller image and increase the resolution or dpi cannot increase the quality since no extra details are added - often this just makes images worse.
This image is the same background but slightly larger at 850x300. Any editing like adding the app's image should be done at this larger resolution (it can easily be shrunk later but this will keep the quality as high as possible). Placeit.net sells the 1920x1440 version of the image for only $8 which should be large enough and scale down well.
JPG vs PNG
JPG is designed for photos and doesn't lose much, PNGs can be too large which affects load times, which are very important for mobile users. A high resolution JPG is the best approach examples and explanation. Every separate edit made to a JPG reduces the quality a little, so starting with the largest resolution image and doing a single edit is best. The resizing can be left to the web browser and responsive CSS.
Responsive CSS
This allows you to use the same HTML for both desktops and different sized mobile devices, with minimum changes which are controlled by a separate CSS file. Bootstrap and foundarion are the most population. Effectively you keep the key images at their largest size, then add media queries to the CSS to check size of the mobile device or desktop and adjust sizes accordingly. Images can also have their size specified in relative units, eg percentages. This css-only resizing is fast and efficient.
Google's image optimization guide covers lossy vs lossless, tools for fine tuning, scaling images and more. This points out that lossy/raster image formats are fine for very complex images like photos since human eyesight cannot perceive every detail anyway. What is 'lost' from the image is not normally noticable to the human eye - presuming of course you start with a high quality image.
Other options: progressive jpg and base64
Progressive JPGs appear to load faster than JPGs because they initially load in a way that looks like a lower quality image and then increases in quality, see example. Base64 is mostly used for small images like icons and 'above the fold' images that need to load quickly, although they can be demanding on memory. The image is stored using a very long alphanumeric string embedded in your CSS or webpage code rather than as a separate file. More details here
Frist you must ensure you original picture is clear enough and have high dpi
Second you must notes that nowadays the smartphone screen definition is much higher than common PC, so your picture must have enough definition.
Third, your cellphone browser mustn't have cloud speeding. Some cellphone like Opera may lead to image compression.
At last, I recommend you use high-quality jpg format image. You must keep a balance between size and definition.
I would come straight to the point:
PNG image or JPEG if forced to resize over its current form will produce lower quality output. Best way is to use 1600px wide and whatever length image you have and use image optimization softwares such as OptiPNG, PNGQuant or XnView and compress the output image to gain substantial ammount of compression.
Something about dpi
It won't affect too much for desktop browsers, and meanwhile if yu have an image with initial dpi of 72, there will be no gains to put image over 72 dpi after it.
The solution i use
Most of the time, we work on illustrator for graphics, so we build SVG from them. SVG is scalable till the end of screens, no loss of quality at all. As far as PNG and JPEG are concerned it is much better to use larger dimension image and compress it will tools. There is one great online tool for this stuff Kraken
One beautiful Trick
In photoshop, gimp: try sharpen your image. Sharpening will increase edge contrast and you can hack around from bad surce image too.
As far as base64 is concerned, it is bad idea to put an HD image of around 110 KB's in code, every time user open's your site will get your 110KB wasted, let them be stored in cache through either css: .class{background:url('image'); position:cover;}.
The only way to get better results is by minimizing http request but that is too much of headache. As only method right now is too make a image sprites.
If you want an HD image then you should download an HD image and edit it in Photoshop where you can solve all your requirements bcoz it's the way it goes in industries.
I have a large image I want to use for a food menu for my website. I don't want to attempt to replicate it using unless that's my only option. Currently the image is a 3.9MB.png file that I made in Illustrator. I would like to keep the quality of the image and make it universal on all platforms (tablet, laptop, phone).
I do suggest that u can convert it to jpg file type.
3.9mb is too large for web page, especially for tablet. However, after convert into jpg type, the quality is not impacted as much as you think. Why not try jpg first, as jpg is perfect for web image.
Sorry I do not have nice format in response, as I answer in my mobile phone.
Try jpg and good luck.
Optimize the png using any online tool like https://tinypng.com/.
Open the image again and this time use ** file -> save for web option **
choose Jpeg and quality level to high or very high
the image file size will be reducing without affecting its clarity.
I work for a company that's going through a website redesign, and the designers have sent me a PSD file with mockups of the static pages. This is a typical parallax scrolling type deal that seems to be all the rage right now, and there are some large images in the mockup that will end up on the site.
I've chopped out the relevant graphics from the PSD and saved them with JPG where I don't need transparency, however I'm forced to use PNG when I do and some of these images are pushing 500kb in size resulting in the page size totaling about 3 megabytes, and I'm not even done! This is also being saved with Photoshop's "Save for Web" feature.
Considering over half our traffic comes from mobile devices, this is a big problem. What are some good techniques to cut down on the size of these images?
Your first step should be to go back to the designers, tell them the design is too heavyweight and work with them to find a way to load fewer, lighter images.
Tools like PNGGauntlet and ImageOptim can help reduce the size of PNGs (and JPGs). They tend to get a better (smaller) result than just Save for Web alone.
Lazy loading images so they only get downloaded when they scroll into view is another technique to look into. Where possible, use built-in CSS tools such as gradients, shadows, and the like. Maybe a vector format like SVG can be used for some of the images?
And, as Kobus Myburgh hinted, you can use CSS media queries to load smaller background images on smaller screens. If they're all background images, you might be able to get away with stretching smaller ones (using CSS background-size) on larger screens. Foreground images are trickier, but something like picturefill or a srcset polyfill might do the trick.
I believe what you're looking for is "responsive images". Read more here for techniques to solve:
https://github.com/scottjehl/picturefill
This is but one example of responsive images. There are many out there. Try Googling the term.
Try some lossless compression techniques .
Reference :
Lossless compression of images
I have few question in this regard
When you create an internet page, does the program automatically create 75pdi?
Could we create 300DPI page could this be able communicate on internet ?
What is maximum DPI resolution you can get on a Web page?
Unless the entire web page is just an image file, web pages don't specify a resolution like that. HTML defines the layout and contents of the page, the video and printer drivers determine the resolution it is displayed or printed in.
Meaningless question, see #1.
See #2.
To answer your questions (I'm presuming you're talking about images on a web page, rather than the web page itself, which is created in HTML, etc.)
You should create the image at 72dpi. Most programs with 'Save for web' functionality should convert the image to 72dpi, but you may need to do this yourself.
You could put a 300dpi image on the web and it should display correctly in pretty much all browsers (and should print at the correspondingly higher resolution), but this is a bad idea as it'll be much slower to load/render, will consume bandwidth, etc. As such, I'd really recommend sticking to 72dpi. If you want a high resolution version of an image, link to the raw image file or create a (resolution independent PDF or SVG, etc.)
As above, there's no maximum (although the web site's visitors machines will eventually grind to a halt attempting to decode an 'n' DPI image).
Web displays graphics at 72dpi. If you make an image that is 300dpi, it's going to look much larger on the screen than was intended.
DPI, be it 72 or 300, is only relevant when going to an output device like a printer, talking about DPI for web graphics is meaningless. On the web, all images are shown 1::1. A pixel of data in the image is a pixel of data on the screen.
You can use any DPI you want for a web image. It makes no difference in how it will be displayed.
BUT - if you are working towards the web you can no longer measure things in inches, centimeters of picas. You need to start working with all dimensions in pixels. If you are viewing your graphics in Photoshop, make sure your view is set to 100%. Then you'll be seeing the same thing that will be displayed in the browser.
Everyones browser is different, so a conservative estimate for a static page design is that your page content should be about 900 pixels or so wide. (People are used to scrolling down, so your page height can be whatever you want).