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:
Related
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 am loading some images and I want to go from PNG to JPG to have a smaller file size. However as JPG there is no transparency information so the background of the image shows up as white.
How can I make this white background be transparent once I load my images?
Thanks in advance
I am assuming that you want to change the white pixels to transparent pixels at runtime. First I'll just say that the BEST answer , is to just use the PNG format. My opinion is that doing something like this at runtime is not a good solution. If you have that many images that the file size matters, then the runtime processing brings along it's own negative of a long pause while processing the images.
I personally would explore what I could do to decrease the size of the PNG files, and would likely NEVER use a solution like this.
However, if you choose to go this route, what you need to do is this :
Convert the image to a BitmapData with an alpha channel.
Loop through the BitmapData and make those pixels transparent.
or
Use the threshold() method of BitmapData.
As someone mentioned in the comments for your question, using white as the background color is not a good idea as ALL white pixels will be made transparent, not just the background ones.
So choosing a color that is not in the palette of any of these images is what you want to use as a background color
As a commenter noted, the threshold() method of BitmapData would probably work best.
JPG (Technically, JPEG File Interchange Format) files, as understood by common browsers and graphics applications, do not support storing an alpha channel with the image like PNG does. Depending on your application, you might want to store a separate black-and-white "image" file which is the transparency mask for the JPG, and use the pair. There are extensions to the format that can be used in custom software, but they won't be understood elsewhere.
But first, make sure that JPG is really what you want to use. JPG is only appropriate for "photographic" images, which don't typically have transparency masks (though there are certainly exceptions). If the image is more Icon/Drawing-like, then it is likely that JPG won't be much smaller than the PNG anyway, and have ugly aliasing artifacts, so just optimizing the PNG will give you better results.
You may want to consider embedding the png's in a Flash library, then export as swf. You can then use Flash to compress your png using the lossy JPEG algorithm, but it will still keep the alpha channel. This could result in much smaller file sizes but with the benefit of keeping the 8-bit alpha channel (each pixel has 256 transparency levels).
By masking out a specific color, you'll only get a 1-bit alpha mask (a pixel is either fully visible or completely hidden.) You can also run into problems like when the color in the image corresponds with the matte color, which deletes pixels from the actual image you want to display.
The other problem with using a matte color in a JPEG image is that the JPEG compression will leave artifacts, especially around the edges of the object and the matte color. This makes it hard to properly mask out a specific color.
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...
I've been ask to implement a site that is using a very large background image. Like 1600 X 900. It's 700K. I don't know how to make this smaller and still save it's quality. It's a black and white photo, I was saving it as a GIF. Any advice.
use photoshop to save it as a jpeg at 60% quality. if you don't know how to save for web, when you want to save, hold ctl+alt+shift and the S button.
Photoshop will show you a preview of the quality and the file size if you use 'save for web and other devices'
Unfortunately there are limits to how small a file can be before it starts to degrade. GIFs are usually more appropriate for smaller and fewer-color images like logos and buttons.
Because GIFs use indexed color, each pixel has a color byte associated with it which means that each pixel adds file size. In a JPG the file size is dependent on many factors, its usually the best option for non-geometirc images.
Even if JPEG always has more colors than GIFs, you could convert it to Indexed colors and back to RGB, just to have a smaller number of colors in your JPEG. This will make it somewhat smaller.
Also of course raise the compression level.... 69% seems to work fine. Sometimes, you could go so low as 49% or so... try blurring the image - and you won't see the pixels as clearly.
I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both).
Example
Let's say we have a gradient background that repeats in X direction. Gradient height is 400px. We have several possibilities. We can create as small image as possible (1 pixel width and 400 pixels high) or we can create a larger image with 400 pixels height.
Observation
Since gradient is 400 pixels high we probably won't choose GIF format, because it can only store 256 adaptive colours. Maybe that's enaough if our gradient is subtle, since it doesn't have that many, but otherwise we'll probably rather store image as a 24-bit PNG image to preserve complete gradient detail.
Dilemma
Should we create an image of 1×400 px size that will be repeated n times horizontally or should we create an image of 100×400 px size to speed up rendering in the browser and have a larger image file size.
So. Image size vs. rendering speed? Which one wins? Anyone cares to test this? With regards to browser rendering speed and possible small image redraw flickering...
The rendering speed is the bottleneck here, since bigger tiles can be put into the browser's cache.
I've actually tried this for the major browsers, and at least some of them rendered noticeably slow on very small tiles.
So if increasing the bitmap size does not result in ridiculously big file sizes, I would definately go with that. Test it yourself and see. (Remember to include IE6, as still many people are stuck with it).
You might be able to strike a good balance between bitmap size and file size, but in general I'd try 50x400, 100x400, 200x400 and even 400x400 pixels.
I found out that there may be a huge difference in the rendering performance of the browser, if you have a background-image with width of 1px and repeating it. It's better to have a background-image with slightly larger dimensions. So a image with a width of 100px performs much better in the browser. This especially comes into play when you use a repeated background-image in a draggable layer on your website. The drag-performance is pretty bad with an often-repeated background-image.
I'd like to point out that for the cost of sending down an extra few rows (1-2 only example here) .8k - 1.6kb (if you can get away with 8-bit) more like 2.4kb - 4.0kb for 24bit
2 pixel columns more means the required iterations required to blit the background in is cut down to 1/3 for up to 1.6kb (8-bit) or 4kb (24bit)
even 1 extra column halves the blitting required down to half the element width.
If the background's done in less than a second for a 56.6k modem I reckon it's lean enough.
If small dimensions of an image have a negative impact on rendering, I'm sure any decent browser would blit the image internally a few times before tiling.
That said, I tend not to use 1 pixel image dimensions, so I can see the image clearly without resizing it. PNG compression is good enough to handle this at very little cost to file size, in most situations.
I'd put money on the bottleneck being the image download rather than the rendering engine doing the tiling, so go for the 1 pixel wide option.
Also the 24-bit PNG is redundant since you're still only getting 8 bits per channel (red, green and blue).
I generally prefer to go in between, 1pixel wide will probably make your gradient seem a bit unclear but you can do something like 5pixel width which gives enough room to the gradient to maintain consistency and clarity across the page.. but I would suggest you can add more patterns and images to a single image and then use background positioning(css sprites) to position them because download a single image of say 50kb would take less time comapared to 5 40kb images since the browser makes fewer requests to the server...
I have not benchmarked this but I'd bet that on most modern computers the rendering won't be an issue whereas you always want to save on on the image download time. I often go for the 1px type of graphics.