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"><...
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 ...
I. Normally, a drawing program will send the data to a printer as you expected in this case. The printer will not care about the blue rectangle below the triangle.
II. A printer does not have "access to the layers" because the drawing program sends only the result the user is expecting, regardless of if you have a ton of layers below.
The program ...
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 ...
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 ...
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
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.
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 ...
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).
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.
SVGOMG! is an Awesome Web-App for SVG Optimisation
According to the creator of the app, SVGOMG is SVGO's "Missing GUI".
Running it on the image provided brings it down to just 3.42kb, and just 1.4kb after being gzipped.
From my experience, if you take the 'Saving for Web' routine from Photoshop, this will optimize the image for web. Despite this, you'll still see optimization alerts when testing page speed, but just look at the kb of optimization you will achieve. In most cases it is around 1~5kb. I agree with Scott that you shouldn't get obsessed with page speed.
If you ...
You learn practical skills by doing them. There's lots of hard evidence that procedural skills learnt from doing are different and deeper than theoretical knowledge from reading.
These then expand your creative possibilities through pushing these new skills, experimenting with them, and creating things with them.
So, if it's an area you're new to, do it, ...
I've recently found a tool at https://petercollingridge.appspot.com/svg-editor (source code) that helps optimize SVG files. It has good results in this case, bringing the file size down to 3.7kB, which is just over half the size of the JPG, with a little manual adjustment:
Using this tool to optimize SVG files requires significantly less time than golfing ...
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 ...
Lately I've been using ImageOptim and ImageAlpha with very good results.
ImageOptim is very good at optimizing and compressing GIF/JPEG/PNG and I'm using ImageAlpha to convert most of my images to PNG with good results: most of the times I get PNG files (full color) that are smaller than GIFs (50-60%), with very little quality loss. It even has an option ...
This is not something that can be solved. SVG is just the wrong format for this. Use bitmaps or something else. Although you better not use paths just use rectangle elements, but still SVG is super verbose.
You should use a OpenGL shader instead
Got some free time and decided to skim through the GIF Specification. For a layman (i.e. me) it's pretty dense. That said, I think I've found what makes the optimization possible.
For context, under the general description section it states:
The Graphics Interchange Format is defined in terms of blocks and sub-blocks which contain relevant parameters and ...
I optimise images for web almost everyday.
Optimisation should always be the last step. Why?
Photoshop adds metadata when exporting files even if you optimise the source file. So you have to process the final file again.
whenever you resize an image you're essentially creating a new file. The color table might change, the pixel color at a specific ...
The way the applications work is that they try, and succeed to most extent, to make a what you see is what you get environment. So anthing you put on top knocks out the thing below (I am ignoring transparency for purposes of this discussion just because its confusing but it knocks thing out too). So your yellow triangle neatly cut out the blue bakground.
1.) In PhotoShop, Save For Web and save as a 24-bit transparent PNG.
2.) Use a third party to compress the image. I like https://tinypng.com/
3.) Your image was compressed down to your target 60kb with lossy compression preserving full alpha transparency. No white edges, no image quality loss.
What I've done after reading this was create any text into outlines.
Box select "logo Text" Right click and say "Create Outlines" or Edit > Object > create outlines.
This will allow any
Export optimized for Art.
However I was using this for a logo that will be printed, and not just web use. However I imagine it will be much of the same.