Optimization of images

Hi I'm trying to get 8 frames down to 40kb. I have been allowed 100kb for some sites and that was a struggle but 40kb is impossible. How do I optimize images so that my file size is really low without comprimising on image quality. I am using Flash, of course. Theres are about 12 images in total. Need them all. I have been opening them in Photoshop and using the 'save for web & devices' function and saving as 'Gif', or 'jpg' or 'png'.
Have watched some Lynda tutorials for Flash CS5 as well as read up but can't seem to get over this major hurdle.
Someone please help.
Need to keep to FLASH as too late in the day to change programs now. It's for work with a deadline.

What I do is, save for web as PNGs at correct width and height and adjust photo quality in Flash export settings till you reach <= 40k after publish. Importing them as uncompredssed PNGs keeps you from double compressing and loss of quality.
12 images will be impossible to get under 40k unless they are very small in dimensions. You might consider politely loading them.

Similar Messages

How to optimize my images?

I want to optimize the images in my blog posts since it is loading very slowly. Due to this my blogs loading speed is very high. I have no idea to optimize the images in photoshop. You can see my images loading very slowly here http://lovecanto.com/how-to-kiss-a-girl-first-time/

Use "Save for Web" options (Alt+Shift+Ctrl+S on Win or Alt+Shift+Cmd+S on Mac). The most basic one is "Quality", where you can choose for example "Very High" or "High" level. Or just enter percentage value manually, 75% works just fine in most of the occasions.

How do you optimize an image?

this seems easy and it should be, but for some reason i am having an issue. For my class we are suppose to optimize our images,
this should be a simple thing, however, when i click on my image in fireworks and go into the optimize panel and change it, it doesn't
change the image i have selected, but the entire document instead. so how do i make fireworks optimize the image i have selected, instead of the
whole document? (we can't use any other program either, just fireworks, so no PS or anything else)

You do your design work and save it to a native Fireworks .png file. This file format is an enhanced version of a standard .png file and contains the additional data for the vector objects, code exports, and other information that is specific to FW. Other programs that read .png files can read FW .pngs, but they will ignore the extra informations.
When you want to produce output for the Web, you need to select an image type and optimize it, based on the image content. Your optimize settings will be saved when you save the FW document, but the document maintains its original data and does not change. It is the output file that gets optimized.
To produce an image for the Web, you use export, instead of save. Personally, I like using the File>Image Preview... menu. From there, I can choose my output file type and the parameters for the file. There's also File>Export Wizard...
If you decide you want to export to one of the .png formats, you need to be careful to export to a different file name from your working FW document, or you can overwrite your master file with a flattened file, losing all your work. I read a suggestion here to name FW documents as .fw.png as a reminder, but you still need to watch what you're doing.
For file formats...
JPEG stands for Joint Photographic Experts Group and this format is optimized for photographs or other images where the variation in color between adjacent pixels is low. When you optimize .jpg images, you have controls for compression/quality and also for adding sharpness.
GIF is a good format when you have line art with few colors. This format uses a palette of 256 or fewer colors, one of which can be fully transparent. This format also can support animations.
PNGs (bitmap) come in three versions. PNG24 is a full-color image with no transparency; the 24 bits are 8bits each of red, green, and blue. PNG32 is a full color image with full transparency; 8 bits each of red, green, blue, and alpha. PNG8 is a limited palette similar to the GIF, but you can have semitransparent colors.
There appears to be a long-standing bug in Fireworks where, if you choose GIF or PNG8, Fireworks may not give you all the colors in your image. You can manually add colors using the eyedropper.
Hope that helps!

Optimize JPG image size reduction by reduced compression quality vs. reduced pixels?

I have many images of slides scanned at high res (4800 DPI, maximum pixels 5214x3592). Although I will be saving these as lossless TIFs, I also wish to make JPGs from them that I wish to be just less than 5 MB in file size. Aside from cropping, I know I can achieve such a reduction of JPG file size by a combination of saving to lower quality JPG compression or reducing image size. My question is, what is theoretically or practically better, achieving this mostly by reducing image total pixels or by reducing JPG compression quality. Thank you

Thank you Doug. The comments on extensive uniform blue sky vs. marked variation in color seem well taken, I'll keep this method of choosing in mind. My goal is to create a JPG family photo archive of the highest quality images that I can make for future use by non-technical descendants (thus it will supplement the TIF archive that holds the best quality versions of the same images but that may not be usable to novices). As I cannot anticipate exactly how the JPGs will be used, I just want them to be the best possible, while still being of a size that can be uploaded to, say, Costco (5 MB size limit) for making enlargements.
In general, I am often left curious as to how exactly Photoshop carries out its algorithms and how different factors influence the outcome. So often, one read "just try different techniques and see what looks the best". But I am always left wondering, what is the theory behind this and has it been systematically studied and worked out and published. In so many disciplines, such as medicine, the methods of optimization has been evaluated, systematized, and fully described. I have not yet explored what may be found in technical journals, but I'm sure much of this good stuff must be available somewhere. It would be nice to have a "How Things Work" that actually explains what Photoshop is doing under the hood.
Thanks again.

Optimize/Flatten Image, Preserve Vectors

Does anyone know of a tool that will let me "optimize" my illustrator artwork? More or less, I would like to only keep vectors that are truly visible (ie not hiding behind another opaque layer, hidden with a clipping mask). I can approximate this effect by rasterizing my image and then performing a live trace on it, but i think it could be done much more effectively than this.
Look forward to suggestions.

Acrobat. I fail to see your point, though. Segmenting paths will introduce additional vertices which will just the same add to the size of the file and require rasterization for viewing. This may have absolutely no effect on improving performance and handling.
Mylenium

What's the easiest way to resize/optimize an image size with the iPhone SDK?

hi.......every one.
I developed one APP in XCode4.6.3 ,it's working perfectly in ipad.
After update my xocde 4.6.3 to 5.0 it is not working, it is crashes.
How to Set an iamge for both ,ipad & ipad retina

Hi Srikanth,
if chitram.png is your image file for 1024 resolution iPad, then [email protected] will become image for retina iPad.
Please have double resolution image ready for that.

Any help appreciated - - on barefoot ski image optimization

Any help appreciated.
Working with Photoshop 7.0 trying to color correct and optimize an image of my son barefooting to prepare for giant vinyl print to create a stand up cut-out on a foam board.
I will attach 2 downsized images for comparison.
As you can see one image has nice smile but no sunlight and other image has great sunlight but no smile.
I need to optimize for CMYK printing the smiling image. I know a bit about levels, but don't know what to change for midtones, highlights, etc. to try and correct this smiling image as best possible.
Unfortunately I did not set up the Canon EOS Xsi camera to save RAW images at 17 megs and the boat owner is not wanting to go out again for another photo session. Original image is 4.5 megs jpg which I crop image, adjust histogram by "sliding in the sides", convert to CMYK, sharpen unmask at 98%, increase brightness with middle slider in histogram, expand size up to 72 inches tall by 54 inches wide and also set to 150 pixels per inch (may try 300), save as LZW TIFF.
After that image is like 400 megs, then import into illustrator CS and tile out just the face of a 72 inch X 54 inch and it's amazing pretty clear for 100:1 file size increase (13 X 9 inch sheet).
I have access to CS4 on Mac only - - don't know if CS4 Mac file will have any big advantages over my 7.0 in Windows . . .

Hmmmm, wonder if anybody ever created a plug in for photoshop that allowed you to add more lighting to an image, as in light coming from behind the photographer - - like sunlight effects ?

Image Optimization

I'm currently working on an application which requires a
couple hundred png images to be displayed at once on the screen.
I'm looking for ways to optimize the image storage so that it has
the least effect on the user's system. The images must be
resizable.
I'm using the Image class right now, and was thinking of
switching over to the Bitmap class. Although I wouldn't gain the
benefit of pixel-copying, I'm hoping that Bitmap will have a
smaller footprint, and will give slightly better performance.
Is there a better way to do this? Should I be using graphics
to draw BitmapData of the image directly onto a minimal component?
If so, are there any guides for resizing the BitmapData for
drawing?
Thanks,
Nate

"skider" <[email protected]> wrote in
message
news:glagl9$nvd$[email protected]..
> I'm currently working on an application which requires a
couple hundred
> png
> images to be displayed at once on the screen. I'm
looking for ways to
> optimize
> the image storage so that it has the least effect on the
user's system.
> The
> images must be resizable.
>
> I'm using the Image class right now, and was thinking of
switching over to
> the
> Bitmap class. Although I wouldn't gain the benefit of
pixel-copying, I'm
> hoping
> that Bitmap will have a smaller footprint, and will give
slightly better
> performance.
>
> Is there a better way to do this? Should I be using
graphics to draw
> BitmapData of the image directly onto a minimal
component? If so, are
> there any
> guides for resizing the BitmapData for drawing?
I use a Matrix to do the resizing, but I'm doing something
different to what
you're doing.
You might find this useful:
http://tinyurl.com/superimage

Does Muse optimize the original file because my images in a slideshow resize after I have used the image more than once.

iif I import a photo into my website and make it a small size then when I create a slideshow and add that photo from my computer it comes in too small every time. It's as though Muze is optimizing the original photo and that is very frustrating. I have to open that photo in Photoshop and save it again to fix it. Very annoying. Will this be fixed?

Muse does not touch the original image, but it does maintain an optimized copy of the original. You can verify by locking the original image file to prevent Muse from touching it.
Muse performs the optimization at export/publish time based on the largest instance of the image in the project. In this case, when you re-import the image, Muse is incorrectly assuming you want the new image at the same size as the first instance that you resized smaller. We'll look at fixing this behavior in the next release, but in the mean time there is a workaround.
Instead of opening the image in Photoshop and re-saving, which changes the modification date of the image and signals Muse to re-import the image, try double-clicking until the image is selected. The selection handles will be smaller and solid if you have the image selected. The handles will be larger and hollow if a container is selected. Then resize the image to the dimensions you want. Initially, the image will be pixelated because Muse is still using the previously optimized copy. However, if you choose File->Preview Page in Browser, the image will be re-optimized for the new dimensions and you should see a higher resolution version in both the browser and on your page within Muse.
You can more easily verify the optimization behavior as follows:
1. Place an image at 25% of its original size.
2. Select File->Preview Page in Browser, which will optimize the image at the 25% size.
3. Duplicate the placed image and resize the duplicate to be twice as big (i.e. 50% of the original). Initially, this duplicate will be blurry after the resize.
4. Select File->Preview Page in Browser, which will re-optimize the image and redraw at the higher resolution.

Sorting images on iPhone 4 - Why to optimize

Disclaimer: Tried to find a solution using forum search - no luck.
Scenario - too 500 pictures with my iPhone in the last couple weeks.
Want to sort them into few albums.
Downloaded on my PC, sorted into few sub-directories, started sync in iTunes.
iTunes is syncing and takes a lot of time to optimize each image.
Why optmize if these pics were taken on this iPhone?
How to turn this strange feature off?
Thank you

The iPhone takes photos as so many megapixels depending on the model of iPhone you have. The iPhone screen does not have as many pixels. iTunes will optimize the images for the screen your iPhone has, thus saving you space on the iPhone by only downloading smaller files.

How do you control hiDPI image optimization in Muse CC 2014?

Hi,
I'm using the new hi-DPI feature in Muse CC 2014 that supports image assets for hi resolution screens. The website I'm building is a portfolio site and need to make sure that images look good on both 72 dpi and hi-res screens. I'm finding that Muse is over optimizing @2x images when exporting for preview—especially for the assets used for 72dpi screens. When I export the site to preview in browser, I'm assuming that is the image quality that can be expected when publishing the site. Can I just optimize the images using Photoshop and replace them on the FTP host site after publishing or is there a better method? Is it possible to preview the manually optimized images before publishing?
Thanks for any suggestions.

Okay, I'm answering my own question since I figured out at least one solution. Probably pretty basic stuff for anyone that's familiar with Muse and publishing, but this is my first Muse site.
From Muse, export the html files to your local drive.
View the site in your browser and check for image quality.
Replace files in the "images" folder that are not good quality with images that you've optimized manually, making sure you use the exact same file names.
Refresh your browser to view new images.
I'm testing on a 72 dpi desktop and a hi-res display laptop. It doesn't look like the files I'm using are too large. Pages should still load quickly.
Once your satisfied with the new images upload to FTP host.
I think this works fairly well, but if anyone has a better method, please post. I also am interested in using business catalyst to track traffic on the site. I would imagine you can simply replace image files directly on the FTP server if you publish using Catalyst.

Aperture - Image Optimization

Hi,
Is there anyway that I can set Aperture to optimize an image for the web when I export it so I don't have to use photoshop for it?
What I have been doing is exporting them and then I optimize them for the web with photoshop.
Thank you for your help!

Do you need adjustment that are only in PS?
I find that I hardly ever use PS any longer. I do all of my processing in A3 and then publish directly to the web from A3.
Allan

Optimize images

How do I optimize several images simultaneously in Photoshop CS5?

Can you explain a little more what you mean by "optimize"?
Photoshop allows you to open and edit multiple documents at once.
Are you talking about Save for Web and Devices functionality, specifically?
-Noel

Is there a way to use a single bitmapdata for multiple images with GPU mode?

With GPU mode is there a way to bring in a single 1024 X 1024 png containing all my sprites and then slice it up into multiple display objects all refering to the original BitmapData?
I have an app that runs in GPU mode - but I want to optimize the image management.
I am making three sets of images in the orders of 2048, 1024 and 512 px.
The app is a book app and each page has around 4 to 5 bitmaps. I would like to bring in one single image and slice it up - but just refer to the original bitMapData in the memory.
Is there a way to do this - e.g. using a masking technique?
I think it is possible using textures in direct mode - but that is not an ideal solution for me - as the app is already in the appstore - and I would have to entirely refactor it for stage3D. Also I use very large bitmaps which have some masking animations applied to them dynamically: http://youtu.be/Nm0T1jLCTz8?t=42s
Currently, I use jpgs and a jpeg mask file for each image which I composite to get the alpha - then I scale them.
PNGs may be better for GPU - (no compositing) but they make for a huge app file.
Now I am converting it to use diffent sized assets depending on the device, then scaling them if need, and then compositing them for apha. What I was hoping was to find a technique that could reduce the number of bitmapdata objects used and reduce the operations in general.
Any thoughts on optimizing would be appreciated. I can add my code here if it helps.

Tell Apple:
http://www.apple.com/feedback/iphone.html
We're all users here, just like you.

JQuery Cycle 2 Image Slideshow (Works (cycles) in Explorer, but not in Safari or Chrome??

I am novice designer. I copied code for Cycle2 into my head (declaration or initializer?) and body (image source) of HTML document. The slider cycles through pictures in Explorer, but not in Safari or Crome. Any help, suggestions, alternatives would be appreciated. Thank you.
I have tried
Spry Content Slideshow- trouble being responsive when resized.
FlexSlider2.2- trouble with image height/viewport sizing to big (kinda had workaround), but had trouble with getting HTML text and image together on one slide.
WOWSlider- could not get rid of the gutter/margins surrounding the slider.
Cycle2-won't work in all browsers (for me)
Here is my code (on otherwise empty HTML and CSS pages) for Cycle 2
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 document with Cycle2</title>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
<title>Untitled Document</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">


<script src="css/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
<div id="top">This is the content for Layout Div Tag "top"</div>
<div id="header">This is the content for Layout Div Tag "header"</div>
<div id="navigation">This is the content for Layout Div Tag "navigation"</div>
<div id="slider"><h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="700"
>

<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">

</div></div>
<div id="content1">This is the content for Layout Div Tag "content1"</div>
</div>
</body>
</html>

Resize/re-scale & optimize all images for the web in your graphics editor before you insert them into your web pages. Saves bandwidth and reduces page load.
Cycle2 is a responsive slideshow. If you want all images to remain 400px and not responsive to layout, you'll need to modify the CSS code a little.
Details on using Previous & Next links are in the documentation.
http://jquery.malsup.com/cycle2/demo/prevnext.php
Nancy O.

Optimization of images

Similar Messages

Maybe you are looking for