I have made a bunch of charts and tables which I have saved in png format for presentation as stimuli in a web-based experiment created with HTML / CSS / Javascript. How can I get them to look sharp when displayed?
Here's a sample of what they look like now when displayed in the experiment:
As you can see, the lines are jagged and sometimes even thin to vanishing, and the text has similar problems. I guess this is a consequence of the png images' "natural" sizes (about 3500x2500 pix) being larger than their display sizes (about 200px high), but I feel there should be some way to fix this at display time without manually resizing all the images.
Here's some history: these were all made in Excel, then copied to Powerpoint and thence saved as images. Originally I directly saved from Powerpoint, which defaulted to .jpg format and came out fuzzy. Then I tried saving to .emf and used IrfanView to resave as .png. The resulting pngs are extremely sharp when viewed in their natural (large) size through whatever image viewer, but when I embed them in html at a much smaller size, they look pretty bad as shown above.
Do you still have the excel file? If so you can:
Export your charts as pdf files in excel;
Then import the pdf's into a vector program such as Inkscape;
Save as svg and then reference the svg files like you would do with an image
tag(you can also embed directly)
When importing as a pdf they will be vector graphics so you can edit some points further if needed.
It's hard for a line on the screen to look good with a less that 1 pixel thickness.
So let's say you have elements 3 pixels thick on your image. After resizing to 250 X 250, they would be 0.3 pixels thick -> not good.
That what creates the undesirable effects you described at line edges and corners.
To address that problems I see three potential solutions:
Make an other copy of the images with lower resolutions from the original source (like screenshot of the Excel charts, or any other features that allows you to get a low resolution bitmap)
If you have the numerical data displayed on the charts and time to learn a cool technology, you can use a charting library. This way you would get the prettier rendering, because it would be vector drawings. Example: HighCharts
Last and far worse solution: work on the images with an image editor and the appropriate skills to increase the thickness size of all sharp elements, like lines, dots, arrows, etc...
Related
I have the following images/slides on the home page of my website;
Home page: https://www.atlasestateagents.co.uk/
Images:
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
Having used some online SEO tools I can see they are considerably adding to the page load time which apparently can have a negative affect on SEO performance.
The images have to be large in size as the site uses the Bootstrap framework and scales up/down depending on screen size.
Is there anything I can do to reduce the file size and/or load time?
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
Sprites and Preloaders
A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.
Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.
In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.
Using CSS Instead of Images
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.
Suggesting some good reads on image optimization and reducing load time if using images.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
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'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.
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 am exporting my web images from PSD by 'Save For Web' option along with using its Quality and Format controls as per the standards but when I check my image size they are heavy than the expectation. I see the image sizes on other web. Their GIF images are too small. i.e a bullet arrow GIF image (12px X 48px) is near around 90 bytes but when I create the same image in PSD and export as GIF my size goes upto 1 KB. I just wanted to know that is their any other way to export or create images for web to gain lower size?
You can check how many colors are you using.
If you create a GIF with less colors you get a smaller GIF.
The size also depends on how many colors are in the image, maybe the 90 bytes gif is pure black and white and yours have more colors.
When you Save For Web in Photoshop, there are a few variables you can play to gain lower size, that you already use. I tried to explain some for other users who find this question,in case you already know how them works:
Lossy: Lossy compression lets you compress more bytes out. Higher value produces low image quality and less weight.
Colors: More number of colors used in the image causes higher size image, as aleixventa says in his answer.
Web Snap: That's the option to convert the color of the image to web safe colors. More web safe colors results in a smaller image.
Combobox "No Dither": Dithering mixes pixels of the gradients to simulate the missing colors. You could retrieve more specific info about this feature here. BTW, less percentaje of difussion dittering results in higher image.
With all these variables in mind, you can see the total weight while playing with them: