As Wrzlprmft has already pointed out, over 50% of your SVG file's size is taken up by an embedded PNG bitmap image used to create a fairly subtle shading effect on the controller. Just getting rid of that image, and replacing it with a simple radial gradient, is enough to shrink the SVG down to about 10kb.
Your SVG contains an embedded pixel graphic for the shade in the bottom right of the controller. This is responsible for about ⅔ of the file size. If you remove it, your SVG file is en par with your JPEG. You can probably achieve an adequately similar effect with a gradient.
Other techniques of reducing SVG file size include:
Remove all Metadata and ...
This probably doesn't answer your question. Some possible alternatives...
Have you considered CSS instead:
background: linear-gradient(45deg, #3d667c, #1d283e);
Or perhaps you could use the SVG base64 technique (generator tool here):
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><...
MozJPEG is a modernized JPEG encoder, probably the best one you can find. I've made a basic web interface for it.
Guetzli specializes in producing high-quality files with nearly imperceptible distortions. It's very, very slow though.
JPEGmini is pretty good at recompressing JPEGs to the lowest still-good quality.
Adept and imgmin try to automatically adjust ...
JPEG is not a lossless compression
JPEG Compression is considered a lossy compression even when set at 100% quality you loss some quality. That's why for simple graphics such as UI interfaces and backgrounds is generally better to use a lossless format such as PNG.
200kb isn't that big in 2014/2015
While it would be idea to decrease the size of the ...
You could use Vector Magic, which is a pretty awesome service that converts images to clean vector art.
I tested it with your image and the result is much better than the original JPG version and half of it's size.
When applying anti-aliasing in the Save for Web & Devices panel the entire export gets the same anti-aliasing method but you can apply the anti-alisaing on an object level.
Select an object and go to Effect > Rasterize.... Choose your desired ppi, it is better to always choose Use Document Raster Effects Resolution because then it will be easy to ...
Ten years ago, this would have been a great question. But in 2011, unless you are sure that a high percentage of site visitors will be on dial-up or similar low-bandwidth connections, the effort put into selective compression doesn't produce enough value to be worth it. The differences in quality and file size are so minimal, and broadband connections so ...
Fewer colors + 100% dither + no Transparency Dither = greater size.
Adding a transparency dither or reducing the color dithering to less than 100% will most likely reduce the file size.
When you reduce the color table and have a high dither setting, you ask Photoshop to dither with fewer colors. This actually creates more color data to maintain from frame ...
At the risk of being frowned upon for not answering your question, I would say this: don't worry about file size. Instead, worry about load time. They're certainly directly correlated, but the difference is that load time is universally applicable. A 2MB file might load instantly on a powerful hosting site such as imgur but not on an inexpensive shared ...
Probably the initial step is more planning than Photoshop's.
1) Do I need an image file? Or can I use something else
A css gradient.
2) Do I need that file dimensions? or can I use
A lower dimension upscaled.
Mask the low resolution with something? a pattern over it, a blur, darken it.
Is the image really worth it to have it ...
Save as a JPEG and select PROGRESSIVE in the save options. You can also select a number of 'scans' to adjust how low the resolution starts off and therefore how gradually the JPEG will get from low resolution to full resolution.
It's worth noting that this is a very old school method and was only really relevant in the days of slow internet connections. ...
Before delivering your final website design, you really should optimise the images with tools that are more focused towards and dedicated to optimising images. Photoshop does okay, but I've seen many people comment that other tools do a better job.
From what I hear, ImageMagick is pretty good for this purpose. However, as a command-line-noob I need to spend ...
Adobe's Photoshop supports something like 300,000 pixel canvas's. It has a "Save for Web" feature that allows you to save a PNG24 file (which supports your alpha transparency). It too has all the functions you are looking for.
A tiny version of an icon must be created for the specific size. Even in the print world, we often do two versions of a company logo (which is, when you think about it, an icon with another name): one for "normal" use and one for small applications such as a business card, but it's even worse when your work is constrained to a grid of great big blocky pixels....
You can convert it to a compressed SVG (SVGZ) and put the image.svgz on your web page:
mv image.svg.gz image.svgz
Or, in Adobe Illustrator, simply save as "SVG compressed", which will write an image.svgz file.
For your test image it's still larger than the JPG, though:
image.jpg: 7268 bytes
image.svg: 22385 bytes
image.svgz: 14614 bytes
Not in any specific order.
Kaleidoscope - $70 ( Mac )
PixCompare - $4 ( Mac )
Pixel Diff - $2 ( Mac )
ImageDiff - $2 ( Mac )
Araxis Merge - $150 give or take ( Mac and Windows )
Image Comparer - $35 ( Windows )
Image Diff Tool - Free ( Mac, Windows, Linux )
Beyond Compare - $30 (Mac, Windows, Linux)
Resemble.js Free ( Web application )
I was thinking that ...
All pngs are 'good' and 'sharp' as they are losslessly compressed, unlike jpgs. It's just a matter of experimenting with settings that keep an amount of colour that you're happy with while keeping file sizes as low as possible.
In Photoshop, the 'Save for web' exporter allows you to view 3 different optimised versions of the output as well as the original. ...
In your case I would have maybe used GREP styles shown on the image below.
Here ~h stands for End Nested Style Here character which serves as a style divider (visible in special characters mode as a backslash). If you feel more comfortable with any other character feel free to replace all the ~h-s with anything you like from the drop-down menu.
In GIMP, my tool of choice for this purpose is Filters → Blur → Selective Gaussian Blur:
With some tweaking of the parameters, it can give results very similar to what Lipis produced with Vector Magic. The basic rules are:
If any edges look blurred, decrease the max. delta. (Look for edges with low constrast, such as the blue text on blue in ...
Graphic size optimization is both an art and a science. Different kinds of images respond differently to different compression schemes and output formats. For photorealistic images jpeg is usually the best output format. Jpegs can have various amounts of compression applied, and some images can withstand much jpeg compression without obvious degradation ...
Here are a few simple things you can do while in Illustrator to keep file size low:
Merging as many shapes together as possible.
Expanding paths if you must use a path instead of a shape.
Reducing decimals places to 1. This is found in the advanced options in Illustrator when saving the image as an SVG.
Don't preserve AI editing capabilities either.
I second everything in HandsomePhil's answer and would add:
Ungroup items if you won't need to reference the groups when working with your SVG. This will eliminate extra <g> tags.
Limit the number of colors.
Fit the artboard to artwork bounds (Object > Artboards > Fit to Artwork Bounds in CS5).
If I understand your question, you've got an animation with (lets say) 5 frames. Frames 1 & 5, 2 & 4 are identical. So you'd like Photoshop to play the gif like so: 1,2,3,2,1.
Unfortunately that's impossible with an animated gif. Gifs are built to allow the data to stream, displaying the next frame in sequence as the data is loaded. The first frame ...
The only color space to use for image prep for mobile devices is RGB. (You can use others temporarily for retouching purposes, but your final output will always be RGB, so best work in that space all the time.)
sRGB is the safest, since you don't know the capabilities of specific devices at design-time.
Save for Web is your best option inside Photoshop. 8-...
In your question, you write:
"Tools like PNGOUT blithely strip out color profiles (the iCCP chunk), which arguably makes the tools lossy because it changes the appearance of non-sRGB images in nearly all modern browsers."
While pre-converting the images to sRGB is indeed one solution to this problem, another is to tell PNGOUT to keep the color profile ...
I finally solved it.
I'd used the ICC profiles available on the ICC's website, which was strangely enough a mistake, since they introduce the errors I mentioned in the question.
GraphicsMagick (slightly lossy)
GraphicsMagick does this in a very slightly lossy method (brighter colors are reduced by one, like from #cccccc to #cbcbcb). However, this doesn't ...
reduce the image size (fewer pixels = smaller file)
reduce the frames in the animation
reduce the color pallet further
posterize the images (larger flatter areas of color compress better for GIFs)
Use software that can add additional compression techniques (IIRC, Fireworks is good for this)