What size my image of background layer should be for the web?

I do a logo design for someone I know and he wants that he placed ontop of a background texture steel. I source on an image of good quality, but despite my diligence in trying to understand how the resolution and the size of the image, I can't seem to grasp what I should do with it. I saw countless videos, but it must be a problem with the ol' brain ' in the head I.

It is likely (at least for now) just for the web. My goal is just get it right so that it looks crisp and clear on the screen.

The image I have is 1024 x 1384 pixel, 72 dpi. Yes 14.2 inches wide by 19.2 inches high.

I have to change this at all? I'll be crop the image, but I'm worried that I will do it's too small and so it should be expanded, and I could meet some blurring.

Should I expand? I heard that this isn't the most ideal thing.

72 dpi is higher than the resolution must be for images of the screen, but is there an advantage to hit? Why couldn't just do 300 dpi for the heck of it?

Do I need to pay attention to the thumbs, or is - this just good guide for when you print something?

I'm honestly just trying to get my head around all of this, so that in the future, I can't spend as much time to know what I have to do. Everything I read and any help is greatly appreciated.

I believe that we have the impression that the image was for the entire background. Being its a banner among the dimensions should be much smaller and therefore can be a picture of lower resolution due to this fact.

With respect to the other dimension, this will depend on your design. For example it will fill the width or height of the screen?

With respect to models, you send a single image to a web browser and the browser itself repeats this image. This is why it is desirable. Your image can be 10 x 10 pixels pixels in the right circumstances. For any detail real chances are she would most likely be around 512 x 512. More this image is the faster it will load, it is that she may have more details. Its up to you to find this balance.

Tags: Photoshop

Similar Questions

  • should what size of file I use on jpg imported for them to properly size with Premiere Pro. When I import them into different sizes, they are large or small

    should what size of file I use on jpg imported for them to properly size with Premiere Pro. When I import them into different sizes, they are large or small

    In the preferences, select scale to frame size and then any media imported after the modification will be automatically resized to fit your sequence.

    Thank you

    The f

  • 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

  • What is the best way to keep the high resolution when recording "for the web".

    the files that I save to the web so I can get them in jpg (or gif) are coming very pixelated.  That's when I print the image.

    What is the best way to save for the web, an image and keep the good resolution.

    using a business card template.  template Avery will allow me to attach images I want to project.  to do this...  I 'get file computer' and it deletes the image in but real little... then you are supposed to expand on your work as you want.  Well, when I enlarge this image file, it gets pixelated bad.  I think it's the way that I am saving it.  I do not adjust anything when I save.  Maybe I should.  This is where I need advice.

    That's what avery model notes on the images, I am allowed to use - when downloading the image, the maximum allowed size is 4 MB.  You can download the JPG and PNG RGB or CMYK images.  so when you recommend things, can you please take this into account

    Thanks for oyur times.

    Aida,.

    When you register with the default template using save for web, it's usually a setting very low.

    While in the registration window, you can set the size in pixels of the image you want with the quality and the resolution too.

    Refer to video tv.adobe.com save for web or Adobe Help file for detailed instructions.

    Florian

  • 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.
  • size of files when saving for the web

    'Save for web' sometimes export icon to very small size with size huge file (500Ko), when I take the same image and re - record using "Save for web", I get the small file (1 or 2 KB)

    Why does this happen?

    This happens because Photoshop is save the metadata in your PSD and JPG files. You can see that from Photoshop in file Info under the file menu, and then on the tab of raw data you will be able to see usually several lines of metadata information, sometimes thousands, and if you did a lot of manipulations on the file that can add literally MBs to the size of the file. Save for the Web and export as you can delete metadata. Personally, I find it a nuisance more than a useful feature tends to remove metadata from Lightroom, there is a plugin that allows you to select what you want to keep and what to throw away.

    Hope that helps

    Terri

  • What are the recommended settings for the export of photos for the web?

    I am a photographer, if the images would be used for my blog... and still need of decent looks.
    They are also the images that I approach clients, again, they need for decent, but would be the right size for the web.
    I played a bit, and when we maintain quality"to 100%, but the setting at 72 dpi, the image remains the same size at 300 dpi.
    So I got the quality up to 50%, but even slight vignetting seemed absolutely horrible. (Highly visible sections of different colors.)
    So now I'm stuck.
    72 dpi and 300 dpi made no difference in size (cannot explain this one.)
    100% quality seemed fine but was too big for the web.
    50% quality was mediocre at best.
    Any suggestions? What is the standard practice?
    Thanks in advance.

    I would use a quality of 70-80 and also resize the image under 'Image size' for example, you pick a long edge of (for example) 1200 pixels.

    The ppi (dpi not) makes absolutely no difference, it's completely out of words and useless in this situation, as you found it. Just ignore it.

  • 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

  • What is the disadvantage of savings WITHOUT color profile for the web?

    I have discussed this issue in another thread and a clear argument against saving jpg files * without * a color profile must be performed.

    I'm very annoyed with how much more red and saturated, all my jpg files appear in IE (which does not read the sRGB embedded profile) compared to FF (which is the case).

    I tried to save the image even with the inclusion of unchecked color profile, and of course, IE and FF are showing the same image.

    It seems to me that including color profiles with jpg are just an invitation for different browsers interpret the image differently.

    Why not just save them all, WITHOUT color profiles?

    The downside to this, what exactly?

    mjyeager wrote:

    Emil, please do not confuse what follows for stubbornness...

    No worries, I never had such thoughts

    mjyeager wrote:

    ... IE does not read color profiles. The fact of FF. ERGO, in situations where a color profile is involved, the JPG will be different in each browser.

    True, without color managed programs and management the colors may not display an image in the same way. Except in the situation where the color profile describing the color of the image or the color values of an image without a color profile, by an extraordinary chance match the display capabilities of color of the device used by the program managed without colors.

    One of the problems that the addresses of color management is that all monitors will display the same color differently. Color management will make colors appear the same or as close as possible.

    A color managed program will send the RGB values of the color of the video card corrected to compensate for the differences between how your monitor displays color values and how they are perceived.

    For example, to help my Monitor wide gamut, when I create an image in Photoshop, with a red color pure R = 255, G = 0 and B = 0 and then do a screen capture, I can check how Photoshop sends these values to the video card. The result is R = 222, G = 65, B = 0 when I'm simulating an ideal sRGB display. So I can see how my colors appear on the screens of ideal sRGB. However, in reality, it is very likely to have a monitor displaying space sRGB color ideal without a color management, so to complete the color management chain, the other monitors that display my image must also have the appropriate color management to compensate for the differences in screen and display correctly RGB numbers representing the color that I see on my screen.

    mjyeager wrote:

    ... However, if the JPG has no color profile, image shows exactly the same way in both browsers...

    Who will most likely be a bad smell, which means not repoducing the expected color which is always the case with the browsers managed without colors.

    mjyeager wrote:

    ... Now, let's say this image - which looks the same in both browsers - is too hot. I can load it in Photoshop, change its hue and re-save is more what I'm looking for. The resulting image will then out - in the two browsers identically - the way I want to...

    Yes, the image will be the same in both browsers on your and any other monitor but the colors that you create (edit) will examine the way which only see you them on your monitor.

    mjyeager wrote:

    ... Now, what I think you are trying to do, is that I have no control on what are the conditions of viewing on the OTHER end (i.e., visitors to the site). They could range wide monitors, cheaper monitors, running MAC or PC, etc...

    I don't remember talking about this earlier, but yes, it's true.

    mjyeager wrote:

    ... It's true. I have no control over that. However, how including the color profile sRGB with the JPG would give me more control over these things I would not include? Unless you had to tell me that browsers arbitrarily apply a random color profile when in the absence of one, I am simply not understand how including the color with the JPG profile performs one another act that ensure that the picture is completely different in FF it does in Internet Explorer.

    You who are absolutely wrong. Color management is not to have any control over how other devices are setup, calibrated, etc.. As I said earlier make sure you communicate the colors scheduled correctly or as close as possible, as long as you and the destination use the proper color management. This means that the embedded profile FF will display correctly the planned colors while IE will not. If you do not include a color profile with your image both FF and IE will not display correctly the planned colors but they will be equal in that.

    mjyeager wrote:

    ... I understand the need for color profiles to print. In fact, my printer insists on the details when it comes to color profiles.

    But for the web? I'm still not understand where the downside is to omit the color profile. It's not like the browsers get CONFUSED when it is not included. Or that the colors will start randomly from refreshing one page to another.

    I am really trying to understand what you are saying here, but still haven't.

    In addition to what Marian said:

    If you create the colors using an sRGB display ideal (given the color management on your system works properly, it can be simulated by color of Photoshop on your range management widescreen when you assign the profile sRGB color to the image) and then on any ideal sRGB display, it will look the same you see on your screen regardless if it's with or without embedded sRGB color profile. However, in reality, it is unlikely to have a monitor, sRGB, display of the ideal space of sRGB color without color management. Now what does this mean in practice? Assume that users interested in, using the IE managed without colors on a PC with the Windows default color management. In other words, color management programs are told by the system monitor displays the ideal sRGB space, which is very likely to be the truth. Then users with this configuration with sRGB monitors will not see a difference between IE and FF when viewing your image with or without sRGB profile, the colors are not very likely to be the same that you see on the screen, but with the difference that is more likely to be accepted depending on how close to the ideal color space sRGB these monitors are. If some of these users with this configuration have wide range monitors, then the image will always be the same with or without sRGB profile, but with a very unacceptable difference of how you see it on your space to sRGB sumulated - strongly supersaturated.

    For users that have the color correctly managed systems, when the image is saved with a sRGB profile, it appears color managed programs such as FF the same or as close as possible to the way in which you can see on your monitor. Programs run without colors the case remains the same as that described above.

    A little history on how standard sRGB was created. It is a standard, including more things, but above all defining an abstract color space. It was created sometime after that the market was already flooded with computer monitors, and the creation of ideal sRGB color space was based on an average PC monitor display capabilities over time. After that the manufacturers used this standard sRGB as a target to create monitors.

    UN-color of programs run on PC have been created and tested using sRGB monitors so that they can't be considered reliable for showing intended to display colors if the images they use have been created using an sRGB they will be in the stadium of this range of sRGB.

  • What is the best export for the web?

    What is considered the best export from Adobe Illustrator CC 2015 for the web these days? I know that PNG has the color a bit better than JPEG files. How about SVG?

    What is your recommendation?

    Thank you

    For modern websites of today, vectors are now better saved in SVG. As long as you use the last CC 2015, use file > export to create the SVG (which is newer than the file > save under). It will yield a smaller SVG files.

    Better, photos are saved in JPEG format.

    PNG are not "keep color" better. The JPEG and PNG24 support millions of colors, but a JPEG will be able to compress photographic details better, if you end up with a file of faster loading.

    For HTML Email SVG is not appropriate, so I use PNG or GIF instead (whichever is smaller) to the line drawings in general I want to save it as SVG.

  • After update to the last version of the space bar no longer give me hand tool / to navigate around my image, everyone knows this? Even for the button on my wacom pen...

    After update to the last version of the space bar no longer give me hand tool / to navigate around my image, everyone knows this? Even for the button on my wacom pen...

    ... computer update restarted... everything seems to work again.

  • 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);
    }
    
  • What size and resolution for the web

    Don't know what size and resolution I should I save my photos to FB.  Any suggestions?  AND I can do LR or what I have to go to the PS

    Thank you

    Alisa

    The resolution setting has no effect on the image. No matter what the resolution is fixed to, the pixel dimensions will remain the same. When I post photos on Facebook, I usually export copies with size defined for the long edge of 1000 pixels. Maybe it's a little too big. But you can set the resolution to 72, 96, 300, 600, etc., and it will affect the size or quality of the image.

    And, Yes, you can use Lightroom to export copies to publish on Facebook. In fact, if you set up your publication options, you can post to Facebook directly from Lightroom and not even had to worry about the size.

  • Background layer unlocks and becomes the normal "no flat" layer after using the crop tool in PS CC 2015.1 (a different behavior for older versions of PS)

    Hi all

    I found that it is more difficult to explain than I thought

    I don't like the new behavior in the latest version of Photoshop (CC 2015.1) regarding the way in which the background layers automatically unlock and convert to regular layers after using the crop tool. It's completely different to how things worked in previous versions, where a background layer remained in locked state flattened after using the crop tool.

    I get a LOT of images and this change has added an extra step to each image that I harvest, because I flatten the layers after cropping before saving the image. I looked through the preferences but cannot find a way to change this new behavior. Am I missing something?

    Thanks in advance for your help

    See if checking Delete the cropped Pixels in the tool options makes a difference.

Maybe you are looking for