Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Hi there

    Very, very limited experience in web design.

    I want to make a website that has a fullbackground image. It seems to be pretty popular these days with photographers and designers, and maybe others are catching on too. I'm very impressed with these big single images taking up the screen, or if not all the screen, at least taking up 100% of the screen in the horizontal perspective.
    For example:
    http://ringvemedia.com/
    http://www.bessiemay.com/

    I have a couple of questions about this.
    1) Can these types of sites still lend themselves to effective SEO techniques? I mean, does this background image at all hinder the SEO process?
    2) I have found a stockphoto that I would like to use for such a website. there is a 800 x 600 px version at 72 dpi.
    That's going to be too small for the kind of thing I want to do since most resulotions are bigger than 800px. So if I pay a little more, I can get the next size image is 1600 x 1200 px at 300 dpi. My question is. Is it true that the dpi of this photo isn't relevant and I shouold only be looking at the pixels for my website? I heard somewhere that the dpi value is only relevant when you're going to print....
    3) I'm going to have a look now in the tutorial section to see if this kind of design is there. Otherwise, does anyone know of a good place I could go to learn more about the design process for such a website?

    regards
    David.

  2.  

  3. #2
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    Hello David,

    A few months back I came across this same desire and found that you can reach this goal by simply utilizing and adding Jquery to your site. Here is what I found http://bavotasan.com/demos/fullbg/ that might be useful. It shouldn't interfere with your SEO techniques and will work on any and all monitor sizes. Just follow download the file and follow the instructions and you will all set up. Hope this helps.

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    300 dpi ( resolution ), images don't display at 300 dpi in a browser. Browers only render at 72 dpi.

    If you have a 300 dpi image, run it through an image optimizer... Reduce the dpi to 72 and image quality to about 70% ( most people can't tell the difference )... If you go below 70% pixelation is noticeable ... But doing this will drop the file size from > 1 m to < 100k... Meaning the background image might display in a reasonable time.

    Images used for backgrounds have zero negative effect on SEO, but they tend to have more negative effect on user experince and response if the images themselves are not processed properly.

    And.... You won't see the difference while designin the pages... Because the images are typically in your pc's memory when you are testing, so they always seem to load fast.

    The only way to test load times... Push it to a server... Clear your browser cache... Then call the page. And remember, everyone's Internet connection is not the same... Load speeds on DSL are going to be different than those on cable connections or those on mobile devices.

  5. #4
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Thanks for the responses both of you. One thing I have never really understood. I know that dpi stands for dots per inch, but I really don't know what that means. What are we saying exactly when we say that screens only display at 72 dots per inch? Are we saying that if I measure an inch across the screen, there will be 72 pixels within that inch? Are dots pixels?

    David.

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    no... DPI is a measurement used only for "print quality"...

    print an image from the "actual" image using an image program at 300DPI, the printer will take quite a while to actullay print the image.

    then print the same image while being displayed in a browser, it will only be printed at the 72dpi level, not as crisp, some colors muted.. etc...will print much quicker.

    the image can be displayed on the screen at the same "size".. but visually, there are differences.

    Yes, you can put a 300DPI image on a web site, but you won't gain any image quality benefit, but the increased size of the file, will make that image load much slower.

    people very often don't understand the differences between "print" and "screen" resolutions, color separations, etc.

  7. #6
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Ok, I think it's coming to me. So the more dots per inch in the photo, the more pixels we need to represent the dots, hence that's why the 300dpi photos a such large files. But, monitors only display at 72 dpi so it's a waste of data using a 300 dpi image.
    Well my question now is, what if the available 72dpi photo is only 800 pixels across, but I want it to stretch all the way across, say a 1040pixel screen? Do I have to enlarge the photo or will css3 do some magic? This question is in the context of full background images.

    Thanks
    Dave

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Close

    No... Monitors can display higher resolution images... But "browers" use an "engine" that renders text, graphics, etc... The browser is limited to 72 dpi

    In you case, I would use the higher resolution image... But process it down to 72 dpi ( as my original answer suggest )... Photoshop and fireworks have the ability to "export" the image... And DPI and "image quality" are 2 options ... Without adjusting the physical height and width of the original images.

    When I'm handling large size images ( file size ), I turn down the "image quality", as you can drop the file size considerably, most people can't tell the difference between 100% image quality and 80% ...

    If you try and take an image that IS 72 Dpi ... And increase the physical height and width... You will more than likely distort the image or worse yet, pixelate it.

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    BTW... DPI is one of those cross industry bastardized terms... Between the graphics industry... Printing industry and the monitor manufacturers... They all use it... But it means different things to each industry.

    Typically when printing anything DPI is very important, most print shops want a minimum of 300dpi.. As that is what their printing equipment performs best with... But looking at a standard monitor... Most people can't distinguish between 200 DPI AND 600 Dpi in the screen... But printed on paper... Side by side... Big difference.

  10. #9
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    DPI only pertains to print material like WZ has stated. I learned this lesson a few years back now, when I designed a flyer with the dimension of 4"x9" and thought I was done. The design looked fantastic in PS but when it printed out it was blurry and I couldn't understand why. This is because I designed it at 4"x9" but at the Photoshop default resolution of 72dpi. Come to find out I needed to design it at 300-350dpi for it to print out sharp and crisp which I ended up doing. By doing that the 4"x9" canvas turned into a much larger canvas that once it you go to print it shrinks down to the appropriate 4x9 and prints out crisp.

    Another example is a business card. You don't design a tiny card like what you get as a finished product you actually design it larger and then when it prints down it looks sharp and crisp. Every printed item is designed at a larger scale and prints at the proper size.

  11. #10
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Quote Originally Posted by Webzarus, post: 251665, member: 27723
    Close

    No... Monitors can display higher resolution images... But "browers" use an "engine" that renders text, graphics, etc... The browser is limited to 72 dpi

    In you case, I would use the higher resolution image... But process it down to 72 dpi ( as my original answer suggest )... Photoshop and fireworks have the ability to "export" the image... And DPI and "image quality" are 2 options ... Without adjusting the physical height and width of the original images.

    Ok, monitors can display higher resolution images. It's this word "resolution" that is confusing me.
    Is "resulotion" dpi, or pixels? Becuase when they talk about monitor resolution they talk about pixels don't they? Yet for print images we can't have pixels because pixels on paper, thus we have dpi.
    But do those dots per inch convert into pixels when we go digital? For instance, if we have an image that would print out 1" x 1" when printed. I'm thinking it would be 300 dots x 300 dots?? Now if that image was on my computer would that take 300 pixels x 300 pixels? And if it was on my computer in my browser what would the difference be? Is the browser sampling the image and only taking some of the pixels, and so does the image become smaller in the browser. All very confusing, but I really want to have more understanding in this area.

    regards
    David.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:02 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com