What size would be good for Hero image in pixels length and weight for both laptop and desktop? Eventually, it will be a gif or some file that enables some movement. Any thoughts on how a coder can work with the file so that it loads faster? Is there a way for a coder to specify that the image be static sometimes. I might want the banner image to be static on mobile phones as the load time needs to be quick so the movement be visible on the desktop version, is there a code to do this or how? Desktop images are more rectangular and the mobile device square images, this needs to be considered. Say desktop is designed say at 1688 px wide or at 1366 px wide, or 1920 px wide – some say that the larger size is necessary due to large monitor –which is common, best? What would be a good length- I don’t want it to have such a great length, so that it is hard to see what is below the banner or require a lot of scrolling., perhaps it is good to still something showing just below the banner. What would be the ratio for the hero image that would work? Your input will be so helpful- thanks
What size would be good for Hero image in pixels length and weight for both laptop and desktop?
This would completely depend on the screen resolution of your website. Also, if it responsive layout, you’ll want to have more than one image.
Eventually, it will be a gif or some file that enables some movement.
I strongly advise against making your hero image a gif. Gif files are very large. You’ll likely want to use a looping video background for this.
Any thoughts on how a coder can work with the file so that it loads faster?
Compress the image before you upload it. You can do this through software or by looking up “image compression” online.
Is there a way for a coder to specify that the image be static sometimes. I might want the banner image to be static on mobile phones as the load time needs to be quick so the movement be visible on the desktop version, is there a code to do this or how?
Yes, you’re going to want to look into making your website responsive through the use of CSS (cascading style sheets). This will allow certain elements to load/not load based on screen size, internet speed, or browser type. To learn more, click here.
Desktop images are more rectangular and the mobile device square images, this needs to be considered. Say desktop is designed to say at 1688 px wide or at 1366 px wide, or 1920 px wide – some say that the larger size is necessary due to large monitor –which is common, best?
Two things can happen when you use a responsive design. The first and most typical is that the wide image is scaled proportionately. This would mean your wide image would be shrunk in height while keeping the full wide of a mobile device. It would make it difficult to read if the image had text. The second way would be that the image could kind of “zoom” which would crop off the sizes that were too big to fit on the screen of a smaller device. Using CSS, you could make different images load based on the screen resolution of the viewer.
What would be a good length- I don’t want it to have such a great length, so that it is hard to see what is below the banner or require a lot of scrolling., perhaps it is good to still something showing just below the banner. What would be the ratio for the hero image that would work?
No matter what ratio you chose, the image will show up differently on mobile devices. Most desktop computers are designed to show horizontal images, while phones are better showing vertical images. Here is a current roundup of screen resolutions for popular devices.
On a final note, I would suggest reading more about CSS and possibly looking to a mobile-responsive template for your website, where most of the coding for image resizing has already been done. It would be easier to tweak a bit of CSS rather than try to code your site to all of these sizes.