I am trying to create a background image on a webpage, which is similar to the 404 page used on tumbler...
http://testing404image.tumblr.com/
Here we can see a PNG which is 1623*1064 pixels, yet appears reasonably smooth gradient wise.
The direct link for the image is
http://testing404image.tumblr.com/images/status_bg.png?2
When I try to create a similar PNG (different colors, but same size) in Photoshop CS4 for Mac, the resulting file ends up at > 400k, whereas tumblers is 90k
Ive tried playing with all Photoshop options, including reducing number of colors to 55, but I cannot get the image below ~240k.
Ive also tried various optimising tools such as ImageOptim (http://imageoptim.com/) but to no avail.
Are there any properties of this PNG which result in a such a low file size?
I tried using JPG, thinking its better suited to gradient images, but even a 100% quality JPG resulted in noticeable aliasing, which an identical content/size PNG didnt have.
Thanks for any advice
Hi there changed the colours with
Image > Adjustments > Hue/Saturation - In Photoshop CS4
and this is the result:
as you can see it's almost the same size (75k).
Try playing around under the
Image > Adjustments
to get the color you are looking for and save as png with NONE for interlace.
Photoshop is not very good with PNG: I simply opened and saved it with the humble xnView (maximum compression), and got 74K. You can also convert it to paletted-image, and do some extra little tuning - PNGoptim gives me a final size of 64.548. I would't expect anything much better than that, the image is just too big.
BTW, be aware that using a gradient that is so big and so smooth that it a digital image (with 8 bits per pixel) cannot represent it without some banding. That image is really oversampled (you could resample it at 25% or less and display it scaled, and the result would be basically the same)
The actual reason is the source image your looking to have a lower gradient quality than the one you are making.
Just uncheck the Dither option (from the top toolbar in Photoshop) when filling the gradient color. the quality and smoothness of the gradient is decreased and therefore you get a very smaller file sized PNG output.
Related
I am currently making a mobile match-3 like game in unity. I have made all the graphics for the gems(the objects with which you make the matches) in Inkscape at 256x256 and exported them(PNG Files) with 90 dpi(also tried with 360 but nothing changed). My problem is that when I run the game in the editor the graphics seem to be "pixelated" and blurry. In my sprite settings I've set Pixels per Unit to 256, checked Generate Mip Maps, I am using Bilinear Filter Mode and the aniso level is 0. I have also set the max size to 256 and compression to high quality(My Main Camera's size is 10 but I tried to change that and nothing changed as far as the quality of the sprites). What can I do to "perfectly" display my sprites? Do I have to export them in some other way from Inkscape or do I have to change some Unity's settings?
Thank you.
NOTE: My sprites are not "pixel art"!
Edit(Added photos of the purple gem as file and how it is shown in editor):
Because scaling
You're display resolution on the images isn't a 256x256 region where those images are displayed, which means that they must be scaled in some manner in order to display in the desired region. Camera rendering is notoriously bad at scaling. As your images aren't Vector (and Unity doesn't support vector graphic formats anyway), scaling will always result in a loss of detail. Detail like hard edges.
Your options are:
smaller images where you have complete control over how the image is scaled down
bilinear filtering (which is fundamentally blurry)
mipmaps (which are automatically scaled down versions of your image in powers of two)
If the later two aren't giving satisfactory results, your only option is the first.
I'm trying to implement a simple LUT color grade in a metal shader. It works with a color LUT, but when the LUT is grayscale, problems crop up. First, loading the grayscale image causes an "image decoding failed" error, which is fixed with this bug workaround.
By recharacterizing the image as a texture in the asset bundle, it loads successfully, but there's banding on the output image. Sure enough, capturing a GPU frame shows that banding has been introduced in the texture:
This banding doesn't appear when doing a Quick Look in the asset bundle, or on the source PNG. Inspecting the texture's pixel format shows that it's been encoded as ASTC_4x4_sRGB, which Apple documentation states is a compressed format for low-dynamic range content. It seems as though this compression may be responsible for degrading the LUT texture. Normally when working with LUTs, I take care to avoid any compression, but I can't find a way to disable compression or force a pixel format in MTKTextureLoader.
I've also tried various MTKTextureLoader options, including enabling/disabling sRGB, mipmaps, etc.
Any ideas on how to fix the banding?
It's important to understand that when using MTKTextureLoader with texture assets in an asset catalog, most runtime texture loader options are ignored. This may not be documented, but it is currently the case.
You may be able to avoid this automatic compression (which is well-intentioned but both clumsy and too aggressive) by selecting your asset in the Xcode asset catalog editor and setting its Pixel Format explicitly to something like "8 Bit Normalized - RGBA", which maps to .rgba8Unorm at runtime.
I'm very new to AEM and I'm trying to reduce the image size by using named transform image servlet in AEM 6.3. After reducing the image size using resize property, the image quality goes down terribly.
I've also tried using attributes sharpen and quality however I'm not able to understand their proper usage even after going through the adobe docs.
This is the original image resolution
1600 x 530
This is the image configuration that I've tried so far:
bounded-resize:width=1423&height=471&upscale=true (using this only reduces the image quality a lot)
quality:quality=82 (this changed nothing)
sharpen:op_usm=3.5,20(this distorted the image completely, sort of oil paint effect)
Above configuration maintains the aspect ration but not the quality.
Need to know what wrong I've done in this and how do I REDUCE THE IMAGE SIZE WHILE MAINTAINING THE ASPECT RATIO AND IMAGE QUALITY.
You should check the order of Image Transformers in your transformer configuration. The documentation states:
Order matters when defining your image transformation rules. For example, a resize then crop can yield significantly different results than a crop then resize.
I am not a 100% sure which makes more sense: Resize and Crop or Crop and Resize. But that would be easy to validate:
Create two transformer configurations. Both should just contain the resize and crop setting but in a different order. Call both of them (with the right URL) and then compare the resulting images.
how do I REDUCE THE IMAGE SIZE WHILE MAINTAINING THE ASPECT RATIO AND
IMAGE QUALITY.
As a best practice, to achieve a high image quality and small file size, start with the following combination of parameters:
fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0
This combination of settings products excellent results under most circumstances.
For further reading and learning, Refer to this
I created some presentation with a lot of small images.
The problem is - that those images were originally whole screenshots (1920x1080 px), which I used Impress' image cropping tool to take only small relevant parts of the screenshot.
If you ask why is it a problem -> the answer is that instead of containing ~30 very little image crops, my presentation contains ~30 1920x1080 sized images, and just shows them according to the current crop settings.
It causes the saving process to take ~10 seconds, the output file is very large and everything works slowly because of the complex rendering process.
Is there any way to discard the cropped parts of the images?
The cropping tool is not good for making such large changes. From https://wiki.openoffice.org/wiki/Documentation/OOo3_User_Guides/Writer_Guide/Cropping_resizing_rotating (and this is true in Impress as well):
If you crop an image in Writer, the picture itself is not changed. If
you export the document to HTML, the original image is exported, not
the cropped image.
Instead, use separate image software to do the cropping before putting the images into Impress. I typically use IrfanView.
For a discussion see https://forum.openoffice.org/en/forum/viewtopic.php?t=3665.
I am working on images in iPhone. There are lots of jpeg images which range from 35kb to 50kb. I may need to transfer this over internet which comes around 6 mb. I tried to change a 35kb jpeg image to png. The actual size got increase jpeg was 56.1kb and png is 576 kb. I used mspaint to change the format. jpeg to png should actually decrease the size of the image right ? If no is that ideal to have jpeg files on iphone or only png like typical mobile applications have ?
JPEG and PNG are very different file formats; any given image that is smaller in one may not be smaller in another. And furthermore, their quality is not directly comparable.
For example, photographic content is very well represented in JPEG. The subdivision-of-blocks composed with pattern recognition makes for a format that does a very good job of discarding visual information in a way that human eyes do not easily notice. Of course, a highly-compressed JPEG may throw away too much information and show the blocks and instantly break the illusion of photographic reality, but used carefully, JPEG is fantastic for photos of the 'real world'.
And computer-generated content is very well represented in PNG. The lossless encoding is great for showing the straight lines of standard computer-generated displays, and naively-created gradients are replicated exactly with PNG. Had JPEG been used for either straight lines or naive gradients, the shortcomings would stand out instantly. Also, because PNG can be palette-based, it can very efficiently store images with only a few dozen colors.
So, pick the file format based on its use: JPEG for photos of reality or for very good approximations of reality, and PNG for computer-generated content.
PNG files are usually smaller if their contents are graphical and contain a lot of evenly colored shapes. For photos or scans jpeg files are way smaller, since they use a much more sophisticated, yet lossy, algorithm for compression.
For your iPhone project you should use whatever is smaller, in your case jpeg.