I've imported many clips from photoshop into flash and animated them. they are still editable by photoshop though.
Now i realized that the clips are much larger size than i require on runtime. Which leads to my first question :-
Does their original size effect the performance, if i am scaling them half on the rumtime?
And, if it does is there anyway i can shorten the size originally, given that i've already animated them?
Right clicking the image to edit it with photoshop, that does not work because we cant change size there.
It probably does affect performance, but how noticable it is depends on their size and on how many of them are being scaled at the same time. What you do with them during runtime could also affect this.
You can change the size in Photoshop, but it means you will have to enlarge the image again in Flash, since any transformations like scaling will remain after resizing the image in Photoshop.
Related
I can't figure out why some images get blurry at different browser sizes. Take a look at this sample site:
The menu buttons at the top and the other buttons all shrink a bit when hovered over. Change the browser size a few times and see that some of them are blurry. Some actually get sharper when hovered over, some get blurrier.
I can't figure out how to solve this. They are all compressed the same way, all around the same resolution. Is there a specific size that they need to be to look better when scaled?
You are serving your image files way too large, causing the browser to spend time rescaling them to the size specified in the image tag. This causes the two-pass rendering that you are seeing.
For example, icon_profile2.png has the dimensions 2055x1712.
Resize your images to the desired size in your favorite image editor and use the scaled-down version on the website.
I have a client who insists on "crisp" images on his Web pages. One image he gave me was 2592 pixels wide, but the page is only 940 pixels wide. No problem, I just resize the images using Photoshop but there is a noticeable drop in quality, lots of jagged edges. I expect a loss of quality when resizing to one-third the size, but I thought I could do better. So what I did is take the original image and have the browser (Chrome) resize it to 940 pixels wide. Yes, I understand this is the absolute worst thing to do but I was just experimenting. It turns out the browser does a much better job of resizing than Photoshop -- I don't get the jagged edges and the picture looks fairly close to the original in quality.
So what's the deal here? Why is Photoshop not as good as resizing as Chrome (IE8 and Firefox do just as good a job too)? I've tried tweaking Photoshop's resampling options but have seen no real difference.
There are a couple of different things to take into account when scaling images in photoshop:
1.) File type+compression
You're going to want to make sure that if you use a filetype with lossy compression (i.e. JPEG) that you set the quality >8, or you will see a noticeable drop on quality.
2.) Resample method
Photoshop provides a few different resampling methods which effect how pixels are combined when scaling down. Below are links to some images that illustrate where you can modify this when scaling.
Image->Image Size...
http://cl.ly/3W3M0b3W3H0G1Y452L15
There is a drop-down on the bottom of this window:
http://cl.ly/0o463J2J0e2L1u0C1U26
Likely what you're experiencing is that your image is resampling using "Nearest Neighbor" or Bilinear".
Give it a go.
You can try using a browser-based script such as TimThumb: http://code.google.com/p/timthumb/
You really do need to resize the image instead of shrinking a huge image just to display. This script will create copies of your image in different sizes and if I remember correctly, it even supports some sort of caching.
Ive had it resize pretty large images for me to very small thumbnails and it always looked sharp.
Photoshop and web browsers handle resizing differently. I don't use Photoshop, so I can't help you with that..
However, if you want that the picture looks like resized by a web browser, then resize it with a web browser! Take a screenshot and cut the resized picture, creating another one which you can really use on the site.
I would like to know which image format inside PDF's is rendered fastest. I tested mupdf code and I figured out that image decoding takes an important part in rendering time. So I would like to know if there are image formats that would not impact very much on cpu load.
I dont think this is really a question of what is best simply within PDFs, however:
As a general rule, I have always found that pre-rendering the image's size to the actual size you wish to present on screen is the best way to get both size and rendering speed to what you want them to be. Simply dragging an image into a document doesnt bring the pixel count (thus size) down as most document types simply put a display size tag around the full image. This causes the display program to have to real-time resize the image for display. The less the display program has to real-time resize the image the faster it will display.
As for file types:
Bitmaps are generally considered the fastest to display as they (for the most part) are copy and paste the color for each pixel onto the screen pixel. They are generally considered the biggest file. Depending on your images, if they aren't noisy (have a lot of solid runs of the same color) then they can be RLE encoded. I have seen many RLE encoded images that are indeed even smaller than JPEG images, but it is very situational.
JPEGs tend to be the smallest for transfer and also generally display decently quick. As an opinion they are also the lowest quality images (look close, if you started with a perfectly clean image, JPEG compression will add noise to it unless using lossless compression)
PNGs tend to be my favorite. They can be lossless compressed, can be fairly small if using flattened PNGs (i.e. NOT ADOBE FIREWORKS PNGs) and do produce crisp images that render fairly quickly.
So to sum up: I would probably recommend flattened PNGs that have been pre-sized and saved to the size you wish to display on screen.
I am trying to put an image at a website,
the image has a transparent background and i want it to be in very good quality.
I saved it in .PNG format and in high quality but the problem is that it is really heavy and takes lots of time to load.
how can i show the picture in the same size and quality, with transparent background but with smaller file size to load quickly?
i'm talking about the image in the center of this website, with two cordless drils:
http://www.tigertools.co.il
ImageAlpha (pngquant) can substantially reduce size of transparent PNGs.
Whether it reduces quality depends on the image. Usually loss is not noticeable.
Dithering to 256 color (optimized palette) and saving as PNG seems to bring down file size to 96KB. This is using IrfanView.
However, not all dithering software handles the semi-opaque pixels near the object boundary correctly.
With regard to the quality loss, it's better to do a double-blind test to get unbiased subjective opinion. Keep in mind that the reduced website loading time will make users happier, which may compensate the hypothetical slight loss in quality.
hope this question is ok on stackoverflow. I want to use a photo as the background for the homepage of a website. The photo will be take up the entire page. However i don't know what resolution i should make the photo. I was thinking 1920 x 1200px so that people with 24 inch screen don't see the 'ends' of the photo. However is that big enough? I'm worried about the site looking ok on screens larger than 24 inches.
Also anyone know how i should optimize the photo so it loads as fast as possible? Thanks.
Overall, this seems to be a question of trade-offs. The better the resolution, the slower the page load for a do-nothing page. Is it worth the slow-down to have the better resolution and avoid pixellation?
Also, I think you're asking the wrong question, since a 24-inch screen can be in multiple resolutions.
I would approach this in the following manner:
what is the largest resolution you MUST have your photo look "good" on? Then make your photo that resolution. If 24" is your target, look at what resolutions this size monitor "typically" supports and target that.
What number of colors you want? (or perhaps b&w / grayscale). If you reduce the number of colors (preferably to "web-safe" colors), you can load faster with the same resolution.
A program like Photoshop (or Gimp) will probably give you the most power in tuning these parameters.
Do you care if only a portion of the photo displays when your viewer has a smaller window?
I know this isn't a cut and dried answer, but these things seldom are (IMHO).
For a solution that will work on most modern browsers, you will need to place the image in a div with a z-index less than the rest of your page (see: Stretch and scale CSS background)
As far as creating a 1920x1200 photo that will compress to a small size, I would recommend trying a smaller size (e.g. 960x600) and see if it looks okay on your 24-inch screen. There are many programs that will let you specify file size for your compression (e.g. FastStone Resizer) so you can experiment and see what is acceptable. In general, photos with less detail and/or color-depth will compress better.
Another problem you are going to run into is aspect ratio. Even assuming that your web-site is always opened in a full screen browser and not a window, sometimes that screen is going to be 16:9 ratio and sometimes 4:3. You could try to create an photo that has a nice 4:3 ratio "sweet-spot" in the center and adjust your div using some Javascript based on the current window aspect-ratio.