Optimizing for web

I used the "save for web and devices" function to change the dimensions of a pic to optimize it for a web page, and now it looks a little funny. The pic is on this page:
http://www.jonniedredge.com/bio.html
It looks decent, but there's a certain grainy quality, especially in the shading on the t-shirt. Is this normal? The original pic didn't have this problem.
Thanks.

You saved your photograph as a GIF, which only allows up to 256 colours max, which can cause that grainy look. Most of the time, photographs should be saved as JPG. GIF is best (better than JPG) for things like logos or website menu graphics...images that don't contain very many colours.

Similar Messages

SaveAs and maintain "optimized for web view" via javascript???

I am trying to do a SaveAs via javascript, but I need to maintain the linearized (optimized for web view) state of the PDF.
I would get this via the SaveAs menu item, but I need to do it silently and rename the file (replace _H.pdf with .pdf).
Is there anything that I can read that will help me do this? I have looked through the API reference, AcrobatUsers.com, web search, etc.
Or, if it cannot be done, stop me now.
Here is what I am doing currently wtih help from this forum.
XXX_DoSaveLoRes = app.trustedFunction(function()
app.beginPriv();
this.saveAs(this.path.replace(/\_H.pdf$/i,"") + ".pdf");
app.endPriv();
Thanks,

I don't think it can be done.

Acrobat Flattening Form Fields and Optimizing for Web

I'm trying to optimize a PDF for the web and flatten all the form fields. I also want to remove the purple dialogue box at the top when optimizing on the web. Has anyone else experienced this problem? I've toiled around with it for some time and can't seem to figure it out. In the older version, I would simply save it as a file optimized for the web, which would then flatten all the form fields and remove the purple box at the top. Any help would be appreciated.

Your question really belongs in one of the Acrobat forums. I flatten form fields (use the pre-flight tool) and then save for the web.

Optimizing for web image selection

Hi
Recently upgraded to CS4. All was going well until I decided to save a graphic as a gif for the web. I selected the graphic and then went to save as optimized - and there was not just the graphic but the entire artboard as a transparent background. What should have been 40 by 150 pixels was in fact the entire a4 page!
I can't see how to get back to just the selected area - hope someone can help...
Thank you

it is a new feature that is important for uses you will find in the future.
In the image size tab off to the right you will see a checked item clip to artboard simply uncheck it.
In the future you be really glad they included this feature now.

I need help understanding export options and optimizing for web

I have been using FCP X for a short while now and have a pretty good grasp on the editing capabilities. What I'm having a horrible time figuring out is the export/share options. The videos I create are typically approximately 1 minute in length and get posted to a web site (we have our own CMS and video player so I'm not using YouTube or Vimeo or anything like that). In order to post them I need them to be MP4s and then I have to create .webm and .ogv files. The source material I work with is generally great, high quality stuff, so I end up with very large output files from the initial FCP share master file options.
When I use MPEG Streamclip to make my MP4s I end up with files that are still quite large and I can't seem to ever get the file size manageable without losing tons of quality. I do not have Compressor, though if that will solve my problem I will put in for the expense of it. What I'm trying to understand is what sorts of settings I should be trying out to get my file sizes to be manageable without completely compromising my quality. And I know this can be done, because the company I work for pays for a great quantity of video work each year (from an outside production firm) and the clips provided are beautiful in quality and small in file size -- for example, I recently worked on a video and got it into the 40MB range before quality went to crap, working off the same material the production company we do work with had theirs down into the teens and looking beautiful!
To throw an even greater wrench in the works, I am working off a mac. But when my boss, on a pc, saves the mp4s I create (raw files -- not what is posted to the web) locally on his machine and views them from there the sound is always off a tad and the people in the videos look like they're lip synching.
Any advice on either of these is MUCH appreciated. I've been trying to figure this out properly for months, and only today decided to stop seeing if someone else had the same question and just post my own.
Bronwyn

Thank you Karsten, this was helpful I have utilized the Quality slider and the frame size options before though with limited results. I've never messed with the Limit Date Rate option as I don't know what I'm doing with it, I see you put 5Mbps. Is that a typical setting that I could use?
Using stream info, here's info on my original source file:
Stream: Charles_0023_2.mov
Duration: 0:00:51
Data Size: 96.51 MB
Bit Rate: 15.77 Mbps
Video Tracks:
H.264, 1920 × 1080, 29.97 fps, 15.64 Mbps
Audio Tracks:
MPEG-4 Audio stereo, 48 kHz, 127 kbps
Stream Files:
Charles_0023_2.mov (96.51 MB)
As a comparison, here's the info on a similar clip that the company we sometimes use created:
Stream: Charles_0019_4.mp4
Duration: 0:00:49
Data Size: 4.66 MB
Bit Rate: 0.80 Mbps
Video Tracks:
JVT/AVC Coding, 710 × 400, 29.97 fps, 635 kbps
Audio Tracks:
MPEG-4 Audio stereo, 48 kHz, 162 kbps
Stream Files:
Charles_0019_4.mp4 (4.66 MB)
I'm fine with bringing the frame size down some and modifying the limit data rate, but sometimes I feel like I'm forcing my video into something it's not and the quality suffers -- this is where my understanding of video work breaks down LOL. Any suggestions of how I can get my .mov into something like the the .mp4 above?
Also have you had any experience with mp4s not playing back properly on pcs?
Again, thank you!
Bronwyn

Save For Web & Devices not available

I have a flattened psd file that I want to save as a jpg, optimized for web. But this option is greyed out. Is there something else I need to do to be able to save a psd in this mode?

Thanks! That was it. I am a bit rusty with PS.

Saving a pdf doc optimized for the web

i am trying to find out if there is a way to set the subject and keyword fields before saving as a pdf.
What i am trying to achieve is that the pdf is optimized for the web, so search engines can read the pdf document for keywords etc.
Thank you

Inspector > Document > Info
Peter

Export for Web using optimized for "download" or "streaming"?

Hi,
Exporting for Web have some setting there,i'll choosing the .mov - H264 - and medium low quality - 15 Frame Rate - Checked Frame Reordering, others Automatic and the Audio will be 32.000hz and Mono.
Now,what about the optimizing? Download or Streaming?
What about Self-Contained Movie? do i need it?

optimizing for download or streaming depends on what sort of site you're sharing it on. Will it be streamed or a download file?
It must be self-contained, unless you are going to be streaming it, and hosting it from the machine that the original media is on. Even then I'm not sure that would work reliably.

Turn off "Optimizing for fast web viewing"?

I downloaded a .doc file from the internet with Firefox and saved it to hard drive. Then I had it converted to a .pdf format online via zamzar.com. Then I opened it with Adobe Reader XI and saved it to hard drive, but it changes size in that process. There's a popup near lower right of screen saying "Optimizing for Fast Web Viewing" (see graphic below) which I never saw before. This is very disconcerting and upsets all notions of file identity based on size. I don't want it to change the size automatically. How do I turn that off?
(Windows XP Home SP3, Adobe Reader XI)

Back up and restore using iTunes.

"save optimized as" window in save for web shows desktop but not correct folder

In "where", it shows desktop, with the icon of a folder, and not the name of the folder the picture is in, as is usual, if I cick on the pop down menu,{of the where field) at the bottom i am showing recent places in gray, and then the name of a folder which is on the desktop, but not the one the picture is in. I want to keep the picture in the same folder.
I have been saving for web no problem recently. i quit PS and shut the computer, nothing
PS cs3 10 0 1
in the save as window I have no problem

There's another "drop down" in the save window. To the right of the file name (Save As: field), if you click that arrow, it will allow you to browse to ANY folder or location on the HD to save.

Saving for Web Devices is not optimizing images properly

Hello!
Please help, when i use save for web devices, it does not make the file size of the final output smaller.
As shown in the picture above, when i save for web devices the size is 33.85k but when i press save it will be 281kb as a final output.
please let me know how to solve this issue because i wanna make the file size smaller. By the way, i am using CS5.5 only.
Thanks!
Cheers,
Paolo

Oh awesome! thank you for this! i owe you one

Vocabulary for web design and beyond

Anyone tackling web design will encounter dozens of unfamiliar terms. I have compiled together this glossary to help them. I may update and expand in the future. Until then, feel free to use or pass along.
Some of these terms don’t relate strictly to web design, but also to computer graphics and computer programming generally, as I’ve found that such terms are also important to reading and understanding any tutorials or other materials on web design.
Asynchronous (1) General use. Not synchronous; not occurring or existing at the same time or having the same period or phase. (2) Digital communication. Pertaining to a transmission technique that does not require a common clock between the communicating devices; timing signals are instead derived from special characters in the data stream.
Bitmap image Image that uses geometrical primitives such as points, lines, curves, and shapes, which are all based on mathematical equations. In a bitmap image, each pixel on a display screen is assigned at least one bit to indicate whether the pixel should reflect the background color, the foreground color, or some other color. each pixel in the bitmap might have 16, 24, or 48 bits of information associated with it. The more bits, the greater the resolution of the bitmap – and the larger the file. Compare Vector image.
C (programming language) General-purpose computer programming language developed in 1972 by Dennis Ritchie at the Bell Telephone Laboratories for use with the Unix operating system. It was designed for implementing system software and is also widely used for developing portable application software. C has greatly influenced many other popular programming languages, most notably C++, which began as an extension to C.
C++ Statically typed, free-form, multi-paradigm, compiled, general-purpose programming language. It was developed by Bjarne Stroustrup starting in 1979 at Bell Labs as an enhancement to the C language and originally named C with Classes. It was renamed C++ in 1983.
Cache Component that transparently stores data so that future requests for that data can be served faster. The data that is stored within a cache might be values that have been computed earlier or duplicates of original values that are stored elsewhere. If requested data is contained in the cache (cache hit), this request can be served by simply reading the cache, which is comparatively faster. Otherwise (cache miss), the data has to be recomputed or fetched from its original storage location, which is comparatively slower.
Cascading Style Sheet (CSS) Style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
ColdFusion Programming language based on standard HTML that is used to write dynamic webpages. It allows for the creation of pages that differ depending on user input, database lookups, time of day, or other criteria. ColdFusion pages consist of standard HTML tags together with CFML (ColdFusion Markup Language) tags such as <CFQUERY>, <CFIF> and <CFLOOP>. ColdFusion was introduced by Allaire in 1996, acquired by Macromedia in a merger in April 2001, and acquired by Adobe in December 2005.
Compound selector Can be used to combine two or more style rules to create a style definition that displays only when one style is contained within another. Compound styles are useful when you want to do something like use the Heading 1 tag multiple times to format headlines in different ways on the same web page. For example, you could create one style for headlines that appear in the main story area of a page and then create another style for headlines that appear in the sidebar on the page and still use the Heading 1 tag to format both. Compound styles are created by combining ID, class, or tag styles and look like this: #sidebar h1.
Contextual selector A type of Style Sheet Selector that
CRE Loaded Open source online store management and shopping cart system for e-commerce from Chain Reaction eCommerce. It is based on osCommerce, runs on any LAMP (Linux, Apache, MySQL, PHP) web server, and is supported by an active international community of users and developers. For a monthly subscription ($10/mo. as of 2011), CRE Loaded allows small and medium-sized merchants to accept credit card payments in a web site that mirrors their own online stores.
CSS See Cascading Style Sheet.
Dynamic HTML (DHTML) Umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model. DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise “static” HTML page content, after the page has been fully loaded and during the viewing process.
ECMA International International membership-based non-profit standards organization for information and communication systems.
ECMAScript Scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.
Extensible HyperText Markup Language (XHTML) Family of XML markup languages that mirror or extend versions of the widely used HTML, the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.
Extensible Markup Language Set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards. Its design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format with strong support via Unicode for the languages of the world. Known by its acronym XML.
HTML See HyperText Markup Language.
Hypermedia Graphics, audio, video, plain text and hyperlinks that intertwine to create a generally non-linear medium of information. This contrasts with the broader term multimedia, which may be used to describe non-interactive linear presentations as well as hypermedia. The World Wide Web is a classic example of hypermedia, whereas a non-interactive cinema presentation is an example of standard multimedia due to the absence of hyperlinks.
Hypertext Text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence.
Hypertext Markup Language (HTML) Predominant markup language and basic building-block of webpages. It is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). Known by its acronym HTML.
Hypertext preprocessor (PHP) Widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. It brings life to websites by communicating with external data sources, such as databases, news feeds, and XML documents. PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document. PHP 3 was launched in 1998; PHP 4 was released in 2000; and PHP 5 was released in 2005.
Java Programming language released in 1995 as a core component of Sun Microsystems' Java platform. The language derives much of its syntax from C and C++ but has a simpler object model and fewer low-level facilities. Java applications are typically compiled to bytecode (class file) that can run on any Java Virtual Machine (JVM) regardless of computer architecture. Java is a general-purpose, concurrent, class-based, object-oriented language that is specifically designed to have as few implementation dependencies as possible. It is intended to let application developers "write once, run anywhere". Java is currently one of the most popular programming languages in use, and is widely used from application software to web applications.[
JavaScript Implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment. It can be characterized as a prototype-based object-oriented scripting language that is dynamic, weakly typed and has first-class functions.
JPEG Commonly used method of Lossy compression for digital photography that was named after the Joint Photographic Experts Group, which created the standard. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.
Linux Family of Unix-like computer operating systems using the Linux kernel (central OS component). Linux can be installed on a wide variety of computer hardware, ranging from mobile phones, tablet computers and video game consoles, to mainframes and supercomputers. The development of Linux is one of the most prominent examples of free and open source software collaboration; typically all the underlying source code can be used, freely modified, and redistributed, both commercially and non-commercially, by anyone under licenses such as the GNU General Public License.
Lossy compression Data encoding method which discards (loses) some of the data, in order to achieve its goal, with the result that decompressing the data yields content that is different from the original, though similar enough to be useful in some way. Lossy compression is most commonly used to compress multimedia data (audio, video, still images), especially in applications such as streaming media and internet telephony. By contrast, lossless compression is required for text and data files, such as bank records, text articles, etc.
MySQL Relational database management system that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements. Acronym for “My Structured Query Language.”
Open source Describes practices in production and development that promote access to the end product's source materials. Before the term open source became widely adopted, developers and producers used a variety of phrases to describe the concept; open source gained hold with the rise of the Internet, and the attendant need for massive retooling of the computing source code.
osCommerce Open source Commerce. It allows store owners to setup, run, and maintain their online stores with minimum effort and with no costs involved. Combines open source solutions to provide a free and open development platform, which includes the PHP web scripting language, the Apache web server, and the MySQL database server. With no restrictions or special requirements, osCommerce can be installed on any PHP3 or PHP4 enabled web server, on any environment that PHP and MySQL supports, which includes Linux, Solaris, BSD, and Microsoft Windows environments.
PHP See Hypertext preprocessor.
Rasterization The process of converting a Vector image into a Bitmap image.
Rasterize See Rasterization.
Shopping cart software Software used in e-commerce to assist people making purchases online. The software allows online shopping customers to accumulate a list of items for purchase. Upon checkout, the software typically calculates a total for the order, including shipping and handling (i.e. postage and packing) charges and the associated taxes.
Style sheet selector One of the two parts of a CSS rule (the other being the properties, or declaration block) that declares which of the markup elements a style applies to. Selectors may apply to all elements of a specific type, or only those elements that match a certain attribute (e.g., how they are placed relative to each other in the markup code, or on how they are nested within the document object model). There are many types of style sheet selectors: element selectors, which select by element name; class selectors, which select by class name; contextual selectors, which select by context based on parent elements (what the element is nested within or what precedes it in the document), etc..
Supercomputer Computer that is at the frontline of current processing capacity, particularly speed of calculation. Supercomputers are typically one-of-a-kind custom designs produced by companies such as Cray, IBM and Hewlett-Packard, who had purchased many of the 1980s companies to gain their experience. Since October 2010, the Tianhe-1A supercomputer, located in China, has been the fastest in the world.
Tag Non-hierarchical keyword or term assigned to a piece of information (such as an Internet bookmark, digital image, or computer file). This kind of metadata helps describe an item and allows it to be found again by browsing or searching. Tags are generally chosen informally and personally by the item's creator or by its viewer, depending on the system. HTML tags include paragraph, heading 1, heading 2, etc.
Unix Computer operating system originally developed in 1969 by a group of AT&T employees at Bell Labs. The Unix operating system was first developed in assembly, which is machine-dependent and a low-level programming language. Ken Thompson created the B language in 1969 and Unix was written in the B language, a high-level programming language. The first Unix system written in C was released in November 1973.
Vector image Image made up of numerous individual, scalable objects. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. Objects may consist of lines, curves, and shapes with editable attributes such as color, fill, and outline. Changing the attributes of a vector object does not effect the object itself. Compare Bitmap image.
Vector processor Central processing unit (CPU) that implements an instruction set containing instructions that operate on one-dimensional arrays of data called vectors. This is in contrast to a scalar processor, whose instructions operate on single data items. Also known as array processor.
Web analytics Measurement, collection, analysis and reporting of internet data, including the number of visitors and page views, for understanding and optimizing web usage. It can be used as a tool for measuring website traffic and for business and market research. Web analytics applications can also help companies measure the results of traditional print advertising campaigns. It helps one to estimate how the traffic to the website changed after the launch of a new advertising campaign.
Web design Design of the way that content is delivered to an end-user through the World Wide Web, using a web browser or other web-enabled software.
Web development Refers to the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). This can include Web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social network services.
World Wide Web Consortium Main international standards organization for the World Wide Web. It is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. Known by its acronym W3C.
XHTML See Extensible HyperText Markup Language.
XML See Extensible Markup Language.
Zend Engine Open source scripting engine (a Virtual Machine) commonly known for the important role it plays in the web automation language PHP.

Thanks for posting this!
I would only mention that your definition is incomplete for this -
Contextual selector A type of Style Sheet Selector that
and that it's most often referred to now as a Descendent selector, not a contextual selector. It's basically the same as the Compound selector that you have already defined....

CS5 bug rendering anti-aliased text in 'Save for web'

Seems like there's a bit of a bug when using 'Save for web and devices' with thin weights of type in CS5 for Mac. Although thin type looks fine while working in Illustrator, as soon as you enter the 'Save for web' dialogue, it gets badly mangled. Looks like this issue has been present at least since CS4. It does not happen in Photoshop. It looks particularly bad for light text on a dark background.
Some people may say "sure, Illustrator is not really meant for intensive bitmap work". However, with features like 'pixel preview' and 'snap to pixel', Illustrator has (generally) become a very viable tool for web design, and personally I much prefer it to Photoshop. It is also clear that Adobe intends it to be usable in this manner. So the anti-aliasing render bug is definitely a problem. Just surprised they didn't address it when CS5 was born.
I put up some example images on http://www.thesheep.co.uk/2011/06/24/illustrator-save-for-web-anti-aliasing-problems/ to illustrate the problem.
Does anyone have any clever work-arounds for this? It's a bit annoying to have to move stuff over to PS before exporting, but maybe that's what I have to do. Hopefully Adobe will address this soon.

Hi,
I am experiencing this same problem of pixelated gifs when I use the "save for web" dialog from Illustrator, but this solution has not worked for me. I have tried the trick of using type-optimized anti-aliasing, but it doesn't change the output at all. I've done this from within the "Image size" tab as well as through Effect>Rasterize>Options)Anti-aliasing: Type Optimized. My image is a logo made entirely from text, although for some of it I used "outline path", so I'm not sure if it still qualifies as text...I'm a newbie at this stuff, so the technical details are still quite opaque to me.
Does anyone know of a solution to this that does not require me to add Photoshop to my workflow?
I'm using Illustrator in CS5, version 15.0.2.
Thanks in advance
Jonathan

Help please with output settings in Save For Web Photoshop CS4

I am new to CS4 Photoshop so have been watching tutorials on Lynda.com. According to that tutorial I should have the ability to save a photo as an image in the Output Settings dialog box. The only options my panel gives me are:
HTML
Slices
Background
Saving Files
I don't have the option for Images Only or for HTML & Images. Are these two hidden somewhere?
I have been experimenting with Save For Web, but when I click on Save I get a panel that lists all the images saved in a folder named "Photos" but I cannot find in that folder any of the images that I optimized and saved for the web. Where are they to be found? Images that show up in Bridge are not my optimized images either.I would be grateful for some assistance with this.

Those settings, HTML, Slices, etc, are the Output Settings you don't normally need to change aonything in there.
Leave it at default and you will just save a version of the image stripped of unnecessary data and reduced to the degree you specified next to the file format choice.
When you press Save in the SfW interface it calls up a Windows OS Save dialog box showing the last used location.
The destination can be changed in the normal way. The Images you already saved will be in the the location that was in that dialog when you saved them.
There is a lot more information in the help pages on this topic! (Hint.)

Rendering glitch in Save For Web?

Hello,
When I "save for web" with some particular files, I get a rendering glitch in the image that takes the form of small, colorless horizontal lines.
Example 1
Example 2
Where do these come from? What can I do about it?

I have this exact issue.
Happens in "Save for web" and in "export". I managed to keep CS4 still installed and took the exact same file and "exported" it and "saved for web", and no issue at all in CS4. This is def. an issue that has popped back up in CS5 then.
On my attached image there is no gradients or special effects, just clipping masks.
I've tried the new options they have in save for web, "Art Optimized" and "Type Optimized". The issue does not happen in "Type Optimized" but the quality in type optimized is lower and it renders the exact same as the vector file appears(so colors bleeding out a pixel behind some objects etc.) The issue does happen in "art optimized".
Issues happens when saving in png and jpg format, with or without transparency.
I've attached an example, notice the lines in her face. (same as initial attached image)
So is this a "wait for an update" sort of scenario? or is this a "use a different program to save for web" scenario?

Optimizing for web

Similar Messages

Maybe you are looking for