Preparing images for the web

Similar Questions

• I need to create combinations of text and images for the web. How to do this in elements or do I need Photoshop for this feature?

  I need to create combinations of text and images for the web. How to do this in elements or do I need Photoshop for this feature?  Please advise!

  slynn5236 wrote:

  I need to create combinations of text and images for the web. How to do this in elements or do I need Photoshop for this feature?  Please advise!

  You can do in PSE.

  1. Do the math to see how much space you'll need on your canvas to the image and text.
  2. Navigate to the file queue > new.blank. Enter the width & height, background color, resolution 72 px / in. It is your canvas, and in the layers palette will be the background layer.
  3. Copy and paste the image. It turns on a separate layer
  4. Activate the tool move, position the image and resize if necessary
  5. Activate the text tool, and then type your text. It will be on a separate so layer
  6. Position the text.
  7. Flatten layers and go to file > save for web. I'm usually on the long side about 800 px. Don't forget to check "constrain proportions". Adjust the quality slider to suit. You will probably want the type of JPEG file for web work.

• What happened to the image field when you create a field of type of image for the Web application?

  What happened to the image field when you create a field of type of image for the Web application?

  The answer is that the point of the IMAGE has been changed to the MEDIA.

  Sorry, Ian, what research for this discussion, I got no results. All good and thanks for the carillon. Hope everything goes well.

  Mouma

• Good way to export images for the web (in terms of colors)?

  It is possible has asked a thousand times, but I can't understand it. I tried to searc solutiuon for, but I'm still a Virgin.

  I have a portrait of a colleague, I need to put on our Web site, but when I export, png is over-red unlike what I see in Photoshop.

  What I've learned, the images on the web must be created with the color profile "sRGB". I have created a new photo in Photoshop with this profile and linked the portrait as a smartlayer. Everything seems perfect. Now, I chose "Export As... "and now, the image is extremely red .

  Do I did wrong?

  I use the latest version of Photoshop (2015.1.2).

  Thank you!

  Export on the profile feature bands, causing the image to display oversaturated.

  Use save for web, instead and do not forget to check convert to sRGB and embed the profile.

  And use the jpg for photos, png is intended for images of solid color and will also produce large format jpg files.

• Is it necessary to 'save images for the web' before importing in Muse?

  Could someone give me some advice: resolution of the image please? I'm sure Adobe Tutorials said that Muse automatically resizes the images when they are imported, but on the training course Lynda.com Muse James Fritz recommend saving to the web before you import. Is this really necessary?

  I'll end up using hundreds of images, for the most part quite high level of 2 and 15 MB jpegs and it would save a lot of time if I could count on Muse to resize. But I guess the more images you use, it is more important to properly size...? !

  Also, Muse crashed tonight, and when I have opened my site he told me that all the 500 - odd links had an active lack - no doubt they all have come loose somehow during the crash. This is not really a big problem because I using just any old images in the design of the site and insert the most appropriate when it is presented. But of course, it's a little disturbing to think that all real links could be broken in the future. Is it possible to recover, rather than everyone restore manually? (And once you have downloaded from the site, you still have to have the assets and the original links? What happens if a computer fails or is stolen, for example?)

  Either way, I sought an answer to the problem of resolution on this site and thought I'd found on the Muse Jam Session: round trip and optimization of content. But this is the only video on the events page that does not have a link Watch Now! If someone could add an or point me in the right direction please it would be greatly appreciated.

  
  

  Hello

  Sorry for the late reply. Muse will be re-rasterize and optimize images you resize, crop, rotate or add effects. Otherwise they are passed through and the original image will be used. If you use very large images, but need not necessarily very good quality, I would recommend to optimize these images in something like Photoshop using "save for Web". Also, more pictures the slower your sites Web load, of course.

  You remember what you were doing before Muse crashed? Where the images that you had linked moved? You can re-edit them by double-clicking on an asset in the active panel and choose repeat the link. If all the images are in the same folder, Muse should attempt to recreate a link to all the pictures he can find.

  Having missing links in the file .muse will have no effect on your export, as they are integrated into the .muse himself file. After downloading, all necessary assets will be on your host.

  There is a video called "Optimize your images" at http://tv.adobe.com/show/muse-feature-tour/ that can help you.

  Thank you

  Colby

• Need an easy way to resize the image for the web program

  I used to use Picture manager to easily resize a large picture (1-2 MB) to use on the web (50-100 KB) program. Now upgraded to Windows 8 (Why oh why, it is so user unfriendly) and photo gallery only resizes the images to about 500 KB. How can I easily resize images effectively.

  I used to use Picture manager to easily resize a large picture (1-2 MB) to use on the web (50-100 KB) program. Now upgraded to Windows 8 (Why oh why, it is so user unfriendly) and photo gallery only resizes the images to about 500 KB. How can I easily resize images effectively.

  ======================================
  Perhaps the resizer freeware at the following image
  be worth a try.

  (FWIW... it's always a good idea to create a system)
  Restore point before installing software or updates)

  Prish Image Resizer
  http://www.photo-freeware.NET/Prish-image-resizer.php
  (Operating system: Windows XP / Vista / 7 / 8)
  (the name of the 32-bit file is: 32bit_PrishResizer_2519.msi)
  (for 64 - bit file name is: 64bit_PrishResizer_2519.msi)

  (Note... the download links for 32-bit and 64-bit are reversed)

• Photo stacking? and also save an image for the web?

  Hello-

  (1) when I use PS to superimpose a photo, I load the files to stack under Scripts = can I highlight all the layers- and Auto blend

  After I do and the process is complete - how delete all files I have loaded section layer on the right side of the display box / I can do one at a time and delete them all except the last file that the trash is gray.

  As a work around, I have been closing the PS and re opening and it erases the files off-Surely there is a better way?

  (2) when I have an image ready to save - is it possible for the PS as in save for web, which will reduce the size of the image, then save it small for me to use? I have not found the fly and I was wondering if this feature is included in the PS-

  Thank you

  Rosa

  If you have any other useful layers, you want to keep, you can use Layer - Flatten Image. This will take you to a single layer

  For your second question, use file - export - export as or file - export - save for Web (legacy)

  Dave

• File extensions do not created when saving images for the web, using the slice, Photoshop CS4-slice tool

  Working with slices in Photoshop

  When I save slices through "Except for web devices", in PS, the resulting images are file extensions but appear to be image files.  I can open in Windows Gallery Viewer and see them however, they have no icon other than a blank page icon, not the usual png or jpg types.

  To solve this problem I added manually .png and .jpg those pristine images through their file names. It seems to work very well for the resolution of jpg files.  In addition, when registering via 'Save for web devices' slices I chose manually imput to the second field and following: PNG or jpg.  This results in the names of files with .jpg but not .png [both png12 and png24]

  When you save slices:

  1. choose the file type

  2 save

  3. internal record Panel: choose:

  (a) image only

  (b) Selected slices [or user slices - as seem to have similar results]

  (c) in the settings: other:

  (i) disable: copy the background image and create the image folder

  (II) for the file nameing use: slice of name and in the second field, add the file extension: jpg or png.

  PNG FILES

  I seem to have problems to import any .png file, created from slices via 'Save for web devices' method, in PS and Fireworks.  However, I do not seem to be able to import them into Illustrator and Indd.

  I want to do is to be able to create slices PNG and JPG files and follow the method "Save via web devices" without having to become an expert in all the options in the Save Panel.  And then be able to import it into Fireworks or in PS.

  Is there something in the preferences that needs to address, or there at - it a bug of sumfink?

  To solve the problem of file extention:

  1. When you save file slots in the Panel 'Save for web devices' and 'Save' Panel appears. Then, you click on 'other' in the settings and do appear the file naming options panel.  Make sure you keep ".ext" in the substantive area of naming options.

  Yes, that's the error.  Now file for .png extensions are created and therefore work OK in Fireworks and Psalm

• Best practices for exporting images for the web

  You have a video that shows how to save a group of photos for a website. I don't know what resolution/photo size to use. My concern is to have a decent image to the search on the site, but not so high a resolution that she could be 'borrowed' and then expanded.

  Thank you.

  Select the pictures in the library, and then click Export.

  Try the settings in the screenshot below, if you are not satisfied with the result, you can always export again and overwrite the originals.

  Quality 60 is usually a good compromise between quality and file size.

  Using sRGB as space color is essential.

  

• Using CF to save Images for the Web site on Local hard drive

  I would create a code to automatically download and save on my hard drive, once their names are returned from a query of database of jpeg images. Is it possible to do using CFMX 7?
  
  For example, here are the steps that I needed to have done:
  
  1. go to the specific url for example. http://website.com
  2 query a database to get a list of the names of image such as image1.jpg, image2.jpg, image3.jpg
  3 copy the images from the site (since I know the root of the directory where the images are stored) on a local hard drive.
  
  I don't have ftp access on the site, just a list of names of the image. Users will have windows xp as the operating system. Because there will be more than 100 images, I don't want to have users asked to record the images every time.
  

  In fact, I was able to create a work-around. I created a page that dynamically displays all the images that are returned in the query. These images were then automatically placed in the Cache of IE were I managed to consume them. Thanks for the other option, if!

• How to optimize images for the web

  please me what the best way to add photos to my very small site to reduce the size with qality best advice

  Title of the message was edited by: Brett N

  Use the editor and from the menu click on:

  File > save for Web

  Choose jpeg or GIF to PNG format for photos or graphics files.

  Set your dimensions and size of file based on the quality, then click on save and upload to your site.

• Best way to prepare images ProPhoto RGB for the Web?

  My working to Edit my RAW files color space is ProPhoto RGB. My master files are saved as ProPhoto RGB 16 bit layered PSD files. I am aware of the many ways to prepare my images for the Web, but it is better to properly view my work on a web site?

  
  

  «Save for Web...» "of Photoshop is easy, but it's also good work like resize manually,"Convert to Profile"(sRGB), then" save under... ". "an 8-bit JPEG? I noticed "Save for Web...» "its color space designated as"Untagged RGB", while the manual method is"sRGB"will create a file w. Any difference? Thank you.
  

  Were you not satisfied by the answers you got this question on Luminous Landscape forum? I will repost mine here:

  ---

  You should always incorporate the profile. With the notable exception of Internet Explorer (which seems to be a lost cause), most browsers now manage well of color management. At least Safari and Firefox both do.

  Save for Web in Photoshop always band profile with default settings, you will need to check the "embed color profile". This setting sticks. Personally, I think it's well past time to change this default, but that's it.

  While you're there, check "Convert to sRGB" and set to "use the embedded profile. This shows you the image with full color management (using the monitor profile to display). Here still SFW uses an obsolete default from the old days, when browsers were not color management.

  If you use a range wide screen a few special considerations come in and in Firefox, a manual adjustment has be activated (color management mode 1) *.

  Regarding resizing, I have no particular opinion. SFW seems to do well. But you should do a final sharpening after resizing, that needs to be done in Photoshop anyway, so he can probably handle resizing too. Construction while some actions and you are ready.

  Firefox users should enable this setting in all cases, regardless of monitor they use. What it does is assign sRGB to any untagged material. This allows full color management chain, instead of just go directly to the screen unmanaged. IOW, even color management on hardware untagged, so long as it is created in sRGB with sRGB numbers.

• How do I clear images of PowerPoint for the web?

  I'm supposed to create images for the web on their part gives me graphics in PowerPoint For now, I stick to PowerPoint in Photoshop and save it as a .png of 300 dpi, but they are not very clear, so I have to make it large enough to be readable. Does anyone know what I could do to make them better? I'm new to Photoshop and teach myself, so there are probably better ways to do what I do not know. I've linked below for an example of blur that I get in the charts when I use the above method.

  http://www.MAPI.NET/brazils-manufacturing-growth-puzzle

  PPI is not serious on the web. Browsers think in absolute pixels and take 72 dpi or use the DPI screens as defined in the settings of your operating system. Also to export slides as images using a simple file--> save as, and choose an image as PNG format or create screenshots, not copy & paste. Of course none of this will mean anything, if you resave the than smaller ones. No one can discern anything at these sizes lowercase, regardless of the wiith or without interpoalted pixels "mushing upward.

  Mylenium

• Save two-dimensional image od for the web

  Hello

  I made the script (with your help ) to export images for the web with dimensions 300 x 300 px. Now, I want my script to resize more than files that I get two files one 300 x 300 and another 66 x 66 px. I'll post my script and you ask hel find me the bug

  And another question. My script exports the file name + jpg, but it also keeps orginal extension if I get IE. FileName.psd.jpg

  can you help me solve this in my script... else is very well...

  Thank you

  Voah

  Edit:

  At the time of meen I managed to solve the problem, so here's the new script

  But I still have one thing I want to do. I have to manually do folder "300 x 300 and '66 x 66' or my script stops." How coud I do this script make sure files? (inputFolder/300 x 300 / and inputFolder/66 x 66 /)

  Save current preferences dialog

  var startDisplayDialogs = app.displayDialogs;

  Save preferences of current unit

  var originalRulerUnits = preferences.rulerUnits;

  preferences.rulerUnits = Units.PIXELS;

  var inputFolder is Folder.selectDialog ("select input file");.

  var outputFolder is Folder.selectDialog ("select output folder");.

  ProcessImages();

  function ProcessImages() {}

  var filesOpened = 0;

  If (inputFolder == null | outputFolder == null)

  {

  If (inputFolder == null) {}

  Alert ("no source folder selected");

  }

  If (outputFolder == null) {}

  Alert ("no output folder selected");

  //      }

  }

  else {}

  List of files of the var = inputFolder.getFiles ();

  for (var i = 0; i < fileList.length; i ++) {}

  If (instanceof file in the list of files [i] & &! fileList [i] .hidden) {}

  Open (fileList [i]);

  ResizeImage();

  filesOpened ++;

  }

  // }

  }

  Return filesOpened;

  }

  function ExportPng (filePrefix, fileSuffix) {}

  Try

  {

  var app.activeDocument = docRef;

  var Nomdoc = app.activeDocument.name.slice (0, -4);

  saveOptions var = new ExportOptionsSaveForWeb();

  saveOptions.quality = 70;

  saveOptions.format = SaveDocumentType.JPEG;

  saveOptions.optimized = true;

  docRef.exportDocument(File(app.activeDocument.path+'/300x300//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);

  }

  catch (e)

  {

  Alert ("error when you try to save the image.") \r\r"+ e);

  return;

  }

  };

  funkcija export 2

  function ExportPng2 (filePrefix, fileSuffix) {}

  Try

  {

  var app.activeDocument = docRef;

  var Nomdoc = app.activeDocument.name.slice (0, -4);

  saveOptions var = new ExportOptionsSaveForWeb();

  saveOptions.quality = 70;

  saveOptions.format = SaveDocumentType.JPEG;

  saveOptions.optimized = true;

  docRef.exportDocument(File(app.activeDocument.path+'/66x66//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);

  }

  catch (e)

  {

  Alert ("error when you try to save the image.") \r\r"+ e);

  return;

  }

  };

  ResizeImage() function

  {

  If (app.documents.length > 0) {}

  var app.activeDocument = docRef;

  var n = docRef.pathItems.length;

  If ((n>0) & & (docRef.pathItems [0] .name! = "Work path")) {}

  docRef.pathItems [0] .makeSelection ();

  docRef.selection.invert ();

  docRef.selection.clear ();

  docRef.selection.deselect ();

  }

  };

  function fitImage() {}

  var app.activeDocument = docRef;

  docRef.trim)

  var docWidth = docRef.width.as ("px");

  var docHeight = docRef.height.as ("px");

  If (docWidth / docHeight > 4.8)

  {

  docRef.rotateCanvas (315)

  docRef.trim)

  }

  ElseIf (docHeight / docWidth > 4.8)

  {

  docRef.rotateCanvas (45)

  docRef.trim)

  }

  If (docWidth < docHeight)

  {

  docRef.resizeImage (undefined, UnitValue(270,"px"), 72, ResampleMethod.BICUBIC)

  }

  ElseIf (docWidth > docHeight)

  {

  docRef.resizeImage (UnitValue (270, "px"), undefined, 72, ResampleMethod.BICUBIC)

  }

  Else if (docWidth == docHeight)

  {

  docRef.resizeImage (UnitValue(270,"px"), UnitValue(270,"px"), 72, ResampleMethod.BICUBIC)

  }

  docWidth = docRef.width.as ("px");

  docHeight = docRef.height.as ("px");

  If (docWidth < docHeight)

  {

  docRef.resizeCanvas (UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);

  }

  ElseIf (docWidth > docHeight)

  {

  docRef.resizeCanvas (UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);

  }

  Else if (docWidth == docHeight)

  {

  docRef.resizeCanvas (UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);

  }

  };

  var app.activeDocument = docRef;

  var docRef.activeHistoryState = savedState;

  fitImage();

  app.displayDialogs = DialogModes.NO;

  ExportPng (file ('.jpg ',' '))

  docRef.resizeImage (UnitValue(66,"px"), UnitValue(66,"px"), 72, ResampleMethod.BICUBIC);

  ExportPng2 (file ('.jpg ',' '))

  docRef.close (SaveOptions.DONOTSAVECHANGES);

  docRef = null;

  }

  Reset the application preferences

  app.displayDialogs = startDisplayDialogs;

  preferences.rulerUnits = originalRulerUnits;

  Does that help?

  main();
  function main(){
  var originalRulerUnits = preferences.rulerUnits;
  preferences.rulerUnits = Units.PIXELS;
  var inputFolder = Folder.selectDialog("Select the input folder");
  if(inputFolder == null) return;
  var fileList = inputFolder.getFiles(/\.(jpg|tif|psd|png)$/i);
  var outputFolder1 = Folder(inputFolder + "/300x300");
  if(!outputFolder1.exists) outputFolder1.create();
  var outputFolder2 = Folder(inputFolder + "/66x66");
  if(!outputFolder2.exists) outputFolder2.create();
  for (var a in fileList){
  open(fileList[a]);
  var Name = decodeURI(activeDocument.name).replace(/\.[^\.]+$/, '');
  app.activeDocument.trim(TrimType.TRANSPARENT);
  FitImage(300,300);
  var saveFile = File(outputFolder1 + "/" + Name + ".jpg");
  SaveForWeb(saveFile,70);
  FitImage(66,66);
  var saveFile = File(outputFolder2 + "/" + Name + ".jpg");
  SaveForWeb(saveFile,70);
  app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
  }
  preferences.rulerUnits = originalRulerUnits;
  }
  function FitImage( inWidth, inHeight ) {
   var desc = new ActionDescriptor();
   var unitPixels = charIDToTypeID( '#Pxl' );
   desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
   desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
   var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
   executeAction( runtimeEventID, desc, DialogModes.NO );
  }
  function SaveForWeb(saveFile,jpegQuality) {
  var sfwOptions = new ExportOptionsSaveForWeb();
     sfwOptions.format = SaveDocumentType.JPEG;
     sfwOptions.includeProfile = false;
     sfwOptions.interlaced = 0;
     sfwOptions.optimized = true;
     sfwOptions.quality = jpegQuality;
  activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);
  }
  

• Save the image for devices/web - random streaks

  I have no idea why, but sometimes, when I save images for the web it leaves random trails in some areas. It has nothing to do with the transparency/gradients because I used the normal fillings and she always does. It's probably something stupid, but I can't seem to understand.

  

  Document DPI vs save for web vs overview. Make sure you always work in 72 DPI and you will have less problems to get predictable results. Also use the align attribute to the pixel grid options to avoid the semi-transparent gaps and edges, if any...

  Mylenium