Optmizing big image for the web

Dear Friends,
In the 1st place I apologise if this is not the most apropriate forum to post my question but its web / image related, hence my doubt.
I have this big image file that I need to publish on the web but even before optimizing the picture I should scale it down by over 60%. Right now 'save for the web' won't even take it...If I use the 'image size' menu to simply resize it (to 900 x 300px) the quality of the image becomes very poor so I wonder, is it better to scale it down first using the 'edit/transform/scale' option?
Also, if you will be so patient: on a webpage with no other images what would be the approx.maximum size acceptable for it to still load quickly?
I'm sorry if it sounds like I haven't done my homework - and honestly I've tried - but I can't find conclusive answers and the perfect pictures on the web (like I see often) remain an undisclosed mistery for me.
Thanks a lot
JV

jvmonteiro wrote:
I have this big image file that I need to publish on the web but even before optimizing the picture I should scale it down by over 60%. Right now 'save for the web' won't even take it...If I use the 'image size' menu to simply resize it (to 900 x 300px) the quality of the image becomes very poor.
Like Zeno said use Bicubic Sharper.
Also keep in mind that when you make an image smaller you are throwing away data so of coarse it not going to be as detailed as the original. actually I would bet you can open your image in SFW. You are just getting a warning that its a big image. Just open it anyway then you can adjust the size and quality of the image to your liking.

Similar Messages

Why does photoshop elements 12 freeze when trying to save an image for the web?

Everytime I try to save an animated GIF image for the web the whole application freezes and I have to force quit. The file sizes are small. Can someone help me with this issue?

Try:
- Reset the iOS device. Nothing will be lost
Reset iOS device: Hold down the On/Off button and the Home button at the same time for at
least ten seconds, until the Apple logo appears.
- Restore from backup. See:
iOS: How to back up
- Restore to factory settings/new iOS device.
If still problem, make an appointment at the Genius Bar of an Apple store since it appears you have a hardware problem.
Apple Retail Store - Genius Bar

Exporting Clipped images for the Web... CONFUSED! ? Help ..? AI CS3

Hi folks,
I don't use Illustrator as much as I'd like, since my workflow is mostly on
the web, but I'm finding it nearly impossible to export images I receive
from print designers for web use. Many of these images are EPS or AI.
They are clipped images, which is great, BUT when I try to Save for the Web,
the error comes back that they are too large for the web and may crash AI.
OR if I export to PNG or PSD, the files lose their transparency and I have
to extract them manually from the white backgrounds, which defeats the whole
purpose. I have tried opening in Fireworks and Photoshop with the same
result. I've changed the originals from CMYK to RGB, but it doesn't help.
Plus the images export with a huge crop area instead of just the image
itself.
I'd really like to be able to use AI, but I'm finding this situation
unworkable. I am sure I'm missing something simple , but I'd appreciate any
help greatly!
Thanks
Jeff
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.com

Thanks for your help Jean et al.
I only use Illustrator occasionally and when I have to. Not because I don't
like the idea, but I'm almost completely web oriented and I find its layout
is not as instinctive and smooth as Fireworks, and I use Photoshop for
original layered images. The problem comes when I get a file from a printer
who uses Quark and knows nothing about web prep and exporting for other
uses. He couldn't export a layered file for some reason even though he had
the backgrounds layered for print work.
You are right, I've opened the tiff and eps docs from the printer before and
played with them in AI, and saved them to ai native formats. I *thought* the
eps files were created in ai by the printer, because they had the clipping
paths and artboards. Obviously they were not. They had just opened with the
default 14400 artboard which is why I thought they had been "set." So when I
set the new 30x30 custom, I started seeing these files with a new
artboard...
So, in sum, I first tried to use these files in Photoshop, but they open
as flat files and the clipping paths are lost. Only by experimenting with
ai, did I find the files had clipping paths. I guess what threw me was that
ai could extract clipping paths from eps that Photoshop could not.
Jeff
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.com

Resizing an image for the web

Have been using an old version of Photoshop but am now using Photoshop Elements 8 and I need to 'resize' images so I can save them for website but can't seem to do so. The old system was so easy - you just clicked 'resize image' and altered the pixel width or height and it just did it! Can anyone help me please

It should work the same in photoshop elements 8.
Make sure in the image size dialog you have Resample Image checked along with Constrain Proportions.
Photoshop elements 8 also has a File>Save for Web option where you resize the image and see the estimated size at the same time.

Transparent GIFs for the web

Hope someone can help with this.
I'm basically trying to optimize a transparent image for the
web. I have a straight PNG vesion here, which is what I'm trying to
do, but it's around 96k - so a bit high.
It looks like :
example
one
I tried exporting it as an 8 bit PNG, which got the file size
down, and looks OK in Safari, but looks hopeless in IE (6) :
example
2
So I tried exporting as a transparent GIF, but it only looks
like these :
example
3
example
4
Any tips on how I can optimize it a bit better for the web,
and retain it's original appearance?
Cheers.

As I have asked several times on the DW forum, how did you
export the PNG
image?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iain71" <[email protected]> wrote in
message
news:fan87d$n8r$[email protected]..
> Hope someone can help with this.
>
> I'm basically trying to optimize a transparent image for
the web. I have a
> straight PNG vesion here, which is what I'm trying to
do, but it's around
> 96k -
> so a bit high.
>
> It looks like :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp.shtml
>
> I tried exporting it as an 8 bit PNG, which got the file
size down, and
> looks
> OK in Safari, but looks hopeless in IE (6) :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepage.shtml
>
> So I tried exporting as a transparent GIF, but it only
looks like these :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp3.shtml
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp4.shtml
>
> Any tips on how I can optimize it a bit better for the
web, and retain
> it's
> original appearance?
>
> Cheers.
>

Resize for the web

I believe there is a way to re size a batch of images for the web in PSEv4. In the editor you can re size for the web, about 700x500 pixels at 72 resolution, but I can not find out how to do it by group rather than individually.
Mickey

From Editor, you can use Process Multiple Files facility, but this won't actually do a Save for Web [i.e. doesn't strip off metadata etc.].
From Organizer, File/Export doesn't help either, as it doesn't strip metadata.
You can cheat from Organizer by creating an HTML gallery and "harvesting" the images it creates, as these seem to have been saved in an optimum way.
But, of course, someone will know another way ...

I've just bought a Macbook Pro 15" and I'm trying to use Photoshop, but the resolution its displaying the images at for 100% are too small. I have to design for the web, so need to be intricate with detail, but I'm finding it adjusts the resolution of the

I've just bought a Macbook Pro 15" and I'm trying to use Photoshop, but the resolution its displaying the images at for 100% are too small. I have to design for the web, so need to be intricate with detail, but I'm finding it adjusts the resolution of the image right down. (I mean you can see the image clearly, but it's too small to edit). When I look at Safari and see a web page at 100% it's clear, but the same page displayed in Photoshop CC appears 50% of the size (even though it says it's 100%) If I move the application window to another screen it adjusts it correctly – leaving all the pallettes, menus and tools correctly sized as they are on the retina display Is there some way to adjust the way Photoshop CC displays images so it is more consistent with what you actually see? There doesn't seem to be any answer on the Adobe forum, so hopefully someone here can shed some light. MacBook Pro with Retina display, 15", OS X Yosemite (10.10.2), Photoshop CC 2014

I tested both ways. With "open in low resolution" ckecked the size of the images is cool, but it is low-resolution including Photoshop appearance.
If "open in low resolution" is unckecked the appearance is good but the very small size.
See the image below. It has 650 x 732 px, 72 dpi. The font of the text "Neste aniversário ..." is with 18pt.

When I upload my images to the web they are not as vibrant. I am using the Save for the Web feature.

When I upload my images to the wed they are not as vibrant. I am using the Save for the web feature and my sRGB is checked. I dont know what else to do. HELP!

We really need to see what you're seeing.
Can you post links to before and after?

How stop PS6 from removing the DPI value from an image when using "save for the web"?

How stop PS6 from removing the DPI-value from an image when using "save for the web"?
Example:
- Open a tif image, that contains a dpi value (resolution).
- Use the splice tool in PS6.
- Export the slices with "Save for web", as gif-files.
Then the dpi value is removed, the gif files has no dpi value (it's empty).
How can we stop PS6 from removing the dpi value when using "save for web"?
OR:
When using the slice tool, how can we save the sliced pieces without PS removing the dpi value?

you can make your art go a little bit over the bounds. or you can make sure your artboart and art edges align to pixels

HT5182 How can I convert Raw images from iphoto to jpg for the web?

I have some pictures in Raw mode stored in my Iphoto that I need to convert in JPG for the web and to print in business cards, I have been going around e-mailing the pictures to myself in large or medium size and then saving them again to my iphoto. Is there a way to do this from iphoto directly?

iMac (24-inch Early 2009), iOS 6
Are your pictures on your iMac or on an IOS device?
On your iMac use "File > Export " set the jpeg quality and size you want:
Regards
Léonie
Sorry, Ralph, I see, we have been cross posting

How to export a transparent image background for the web

Hi Everyone
I have made a mock up webpage in adobe fireworks 5. I am now in the process of using the slice tool to cut up the seperate parts and export them to dreamwever.
My question is this: how do i slice the images in such a way that the background is transparent .
Also, when exporting the image that i have just made trasparent, what do i need to do to expot it as a transparent background.
warm regards
Andreea

When you're ready to transfer your Fireworks layout to DW select FILE > Image Preview. In Options select Format PNG8 and beneath the color grid change the No Transparency dropdown to Alpha Transparency.
Click the Export button, name your file, choose the destination location, and in the dropdowns select Export > HTML and Images, HTML > Export HTML File, Slices > Export Slices, Pages > All Pages. (Also some choices may be handy for you in the Options button including Background Image for the exported file.)
PNG can be used, just as JPG, TIFF, PICT, BMP and GIF, all of which are in your Options > Format dropdown list.
Generally JPG is better for files that have gradients, GIF for simple images and text, but they don't do transparency so the larger PNG file is necessary for that.

HD720p for the web

I tried and tried to compresse from my HD720p out from FCP to 720p for the web. I get awfull results. pixalised images and bigger files. are their presets for the web, or any place where I can find the good settings to get files that look as good as the apple HD galerie. It's suppose to be easy with apple but this time it's not.

here are one of the settings I used,
I did try with more quality but got
not so good results with verry big files
If you go to http://www.jiyano.com and click on the star on
the top left you will see what I mean. I put a before and after picture.
Name: hd test 160206
Description: H.264 for high-bandwidth streaming
File Extension: mov
Estimated file size: unknown
Audio Encoder
AAC, Stereo (L R), 48.000 kHz
Video Encoder
Format: QT
Width: 1280
Height: 720
Pixel aspect ratio: default
Crop: None
Frame rate: 29.97
Frame Controls: Off
Codec Type: H.264
Multi-pass: On, frame reorder: On
Pixel depth: 24
Spatial quality: 73
Min. Spatial quality: 25
Key frame interval: 24
Temporal quality: 50
Min. temporal quality: 25
Hinted for QuickTime
streaming server

Capture an image using the web camera from a web application

Hi All,
Could anyone please share the steps what have to be followed for capture an image using the web camera from a web application.
I have a similar requirement like this,
1) Detect the Webcam on the users machine from the web application.(To be more clear when the user clicks on 'Add Photo' tool from the web application)
2) When the user confirms to save, save the Image in users machine at some temporary location with some unique file name.
3) Upload the Image to the server from the temporary location.
Please share the details like, what can be used and how it can be used etc...
Thanks,
Suman

1) Detect the Webcam on the users machine from the web application.(To be more clear when the user clicks on 'Add Photo' tool from the web application)There's not really any good way to do this with JMF. You'd have to somehow create a JMF web-start application that will install the native JMF binaries, and then kick off the capture device scanning code from the application, and then scan through the list of devices found to get the MediaLocator of the web cam.
2) When the user confirms to save, save the Image in users machine at some temporary location with some unique file name.You'd probably be displaying a "preview" window and then you'd just want to capture the image. There are a handful of ways you could capture the image, but it really depends on your situation.
3) Upload the Image to the server from the temporary location.You can find out how to do this on google.
All things told, this application is probably more suited to be a FMJ (Freedom for Media in Java) application than a JMF application. JMF relies on native code to capture from the web cams, whereas FMJ does not.
Alternately, you might want to look into Adobe Flex for this particular application.

How do I slice an image for a web banner and upload it to my website?

Hi there! I am trying to slice an image into a web banner to upload it as the headed to my website layout. I have previously done this before, but a few months ago my computer crashed and I lost everything. I have a new computer now (Macbook Pro running 10.9.3) and downloaded a free trial of CS6. I vaguely remember what I am doing but am apparently way out of practice.
I have tried at least a dozen different times to slice the banner and add the links, but for one, it keeps showing up with gaps in the image when I try and preview it on my computer. I cannot figure out why. Secondly, when I try to save it for the web as HTML and images, it is not working. It keeps saying something about needing to replace targets, etc. I am honestly lost and when I had originally made my website two years ago I don't remember it being nearly this difficult. I have some moderate HTML/CSS web design skills but I'm not sure if I am having a brainfart or what.
Secondly, I cannot get the files to upload properly to my web server. I use FatCow as my host if this makes any difference. I've been watching tutorials on Youtube and trying to refresh my memory but I am so lost.
Thanks!

Can you save images via Tools > Page Info > Media ?
The usual way to save an image is via the right-click context menu > Save Image as.<br />
If you have a Mac without a right mouse button then see:
* http://kb.mozillazine.org/ui.click_hold_context_menus

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

Optmizing big image for the web

Similar Messages

Maybe you are looking for