1 person found this helpful
As a general rule, you want to keep your images as small as possible - this becomes a bit of a balance when you are attempting to accomplish something a bit more dynamic as you are, but even your method shows the image edges on a larger monitor (when I opened the browser window, i was able to expand beyond the image...)
With that said, there are also ways to optimize a large image, which will also help immensely. First, a .png format is generally a much larger file size - because it allows an extra "alpha" channel (which gives the leeway to have transparent areas of the file to "show through" to other things beneath it.) In your case, there is nothing beneath it - no need to be a .png format. A .jpg format will also make it smaller, but even better is to "Save for web and devices" from photoshop - and here you will be able to find the balance between the quality and file size.
I've attached a quick test I did - your .png file was almost 2.5mb (2500kb), my attached .jpg is approx 100kb (1/25 the file size), the the pixel dimensions are the same, with very little noticeable quality loss...
I recommend experimenting, and reading up on an photoshop technotes to optimize your images better for web...
Hope that helps!
Thanks, Jesse. I always think of PNG as a smaller file size, but you're right. When I resized and optimized the JPG it was much smaller. I appreciate your helpful and thorough answer.