#1
  1. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Jan 2018
    Posts
    42
    Rep Power
    1

    Optimal image size for full screen header


    What are the best dimensions / size / format / quality for a full-screen background image in terms of SEO?
    Last edited by Hikin Mike; May 23rd, 2018 at 03:22 AM. Reason: removed link
  2. #2
  3. Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Nov 2017
    Location
    Colorado
    Posts
    105
    Rep Power
    10
    Here are the points you need to consider:



    • File size: the number of bytes the file takes up on your computer. This is the factor that can slow your website way down. A 15MB (megabyte) photo is huge. A 125KB (kilobyte) photo is much more reasonable. If your file size is really big, it’s an indicator that either your image dimensions are too large or the resolution is too high.


    • Image size: The actual dimensions of your image, in pixels. You probably think of traditional printed photos as 46, 57, or 810. But on the web, the height and width are measured in pixels. So for example, a typical image on a website or blog might be 795300 pixels.


    • Resolution: Left over from the world of print, resolution is the quality or density of an image, measured in dots per inch (dpi). A professional printer might require images to be at least 300dpi. But most computer monitors display 72dpi or 92dpi, so anything higher than that is overkill and makes your image unnecessarily large. When a design program has the option to “save for web”, it means saving it at a low, web-friendly resolution.
  4. #3
  5. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Mar 2018
    Posts
    50
    Rep Power
    0
    well you can reduce your size with the help of Photoshop and paint software
  6. #4
  7. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Jan 2018
    Posts
    42
    Rep Power
    1
    Ok but for a full-screen background image how many pixels?
  8. #5
  9. No Profile Picture
    Moderator
    SEO Chat Hero (2000 - 2499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    2,299
    Rep Power
    3076
    Originally Posted by leonida
    Ok but for a full-screen background image how many pixels?
    Ok, how about you think about your users, what devices are they using. When you know what devices you are designing for then you can see what is the best resolution. So, imagine this scenario

    You got 3 users on your site, one on a 32in destop, another on a tablet and yet another on a phone.

    You got this great picture, do one of two things..

    a trim the image down in paint if you got no other tool, but most likely you cant find a tool on the net. You can usually cut the fat out of an image and get the image down below 200k. Then use css to size the image for each resolution. Responsive sites sometimes have the feature built in like with Divi in WP. In any event just resize the image on demand.
    What are the exact figures you are looking for, well that differs. Trimming down a photo that is 3 meg, and is a great image to 200k will probably destroy the quality, so for a website that is based on photography this would not be my first choice.

    B Create 3 separate images one specifically designed for each resolution. You still only send one image, but you have three files, and you did the work 3 times, final product looks great.

    Then you can search for image resolutions recommended for each device.
  10. #6
  11. No Profile Picture
    Moderator
    SEO Chat Hero (2000 - 2499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    2,299
    Rep Power
    3076
    Here, this may help you as well..

    https://www.fileformat.info/tip/web/imagesize.htm

    Google, it really does work !

  12. #7
  13. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Jan 2018
    Posts
    42
    Rep Power
    1
    Thanks! What is the best program to use to optimize a photo weight?
  14. #8
  15. No Profile Picture
    Contributing User

    Join Date
    Mar 2018
    Posts
    36
    Rep Power
    0
    I agree with above image point
  16. #9
  17. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    May 2018
    Posts
    47
    Rep Power
    4
    make it as big as possible then use responsive coding to lower the size depending on people's screen size. Keep an eye on the ratios fo sizes you are aiming for - that's what you should be most concerned with rather than absolute size.
  18. #10
  19. Just a Photographer
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    May 2011
    Location
    Atwater, CA
    Posts
    1,118
    Rep Power
    2452
    Originally Posted by leonida
    Thanks! What is the best program to use to optimize a photo weight?
    There is no best program. I use Photoshop to edit my photos, but I'm a photographer and Photoshop isn't free. You can use Gimp to edit them if you need to...it's free. Since I use WordPress I use the 'EWWW Image Optimizer' plugin as well.
    - Mike

    Jack of all trades, master of none.
  20. #11
  21. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Jan 2018
    Posts
    42
    Rep Power
    1
    Originally Posted by seoauthority
    make it as big as possible then use responsive coding to lower the size depending on people's screen size. Keep an eye on the ratios fo sizes you are aiming for - that's what you should be most concerned with rather than absolute size.
    What about the use of Adaptive Image for worpress plug-in?
    Last edited by leonida; May 28th, 2018 at 04:36 AM.

Similar Threads

  1. image thumbnail full size vs thumb suffix style - does it matter?
    By Jalron in forum New User SEO Questions and Answers
    Replies: 2
    Last Post: Aug 16th, 2014, 07:21 PM
  2. Advantage of Text Header vs. Image Header
    By Lucian in forum Google Optimization
    Replies: 8
    Last Post: Oct 26th, 2011, 03:26 AM
  3. Image as a header?
    By crxvfr in forum Google Optimization
    Replies: 3
    Last Post: Jun 8th, 2006, 01:32 PM
  4. Screen size issues?
    By cityneil in forum Search Engine Optimization
    Replies: 6
    Last Post: Mar 4th, 2005, 02:29 AM
  5. <H> Header Tags - size has changed ?
    By sunbreaks in forum Web Design, Coding and Programming
    Replies: 4
    Last Post: Jun 18th, 2004, 09:39 AM

IMN logo majestic logo threadwatch logo seochat tools logo