Guide to Properly Size Your Hero Images and Optimize Them for Site Speed

Lauralee Flores — Thu, 24 May 2018 13:42:58 +0000

If you're like me you've run into this too many times to count.

Your web page needs a new image for the hero section or top part of your page. You want this image to be large enough for any size screen but not so large that it will significantly slow down the load time on your page. You don't want it too tall either.

You've done this a bunch of times but each time you open up your design tool to create your hero image, you can never remember what size that hero image should be.

You know the first thing is to get the dimensions of the image right.

Hero Background Dimensions

If your image is going to be header/hero background image you'll want to maintain a 16:9 aspect ratio. I make my header images 1600 x 500px.

Full Page Background Image Size

If you're creating a full page background image you'll want to maintain a 4:3 aspect ratio and I make these images 1600 x 1000px or sometimes 1920 x 1200px. I usually do both sizes and then compress them. If the larger image compresses well and isn't too large I go with the larger image.

Mobile Image Size

Depending on how things respond and look on mobile I will sometimes switch out the hero image on mobile (using a media query) to use the correct aspect ratio for smaller screens. I typically make these mobile images 800 x 1200px.

You can swap out hero images like this:

.hero-image {
  background: url('my-hero-image.jpg') no-repeat center top;
  background-size: cover;
}
@media (max-width: 768px) {
  background: url('my-mobile-hero-image.jpg') no-repeat center top;
}

This would show your background image until the screen size is down to 768px wide. And then anything smaller than 768px wide view port the hero image will instead show the mobile image.

Download Sketch File

In order to save yourself time and energy from having to search for this next time you have to create your next header, just download this sketch template. The template has an artboard for each a header image, a full page image and a mobile image.

Save it someplace you will know to look for it the next time you will need to create an image for your website. So that next time you need to create a new image you only have to open up this sketch file and you're off.

Image Optimization

Once you know the height and width of your image you want to shift your focus on keeping the size of the image small enough.

Sometimes a jpg is smaller and sometimes a png is smaller. Typically, for this type of image the jpg is going to be smaller. But, if you're unsure export both the jpg and the png. Use which ever one is smaller naturally for the next step.

Now you'll want to compress your image to make it the smallest possible size without making it pixelated. As a general rule try to reduce the size of your image to be at around or smaller than 400 kb.

Image Compression Tools

If you haven't done this a thousand times already you should do this for every single image you put up on your website. Every time you do this you are in essense speeding up the load time of your web pages.

If you don't have a tool you can use Tiny PNG. I personally prefer to have the tool on my computer to use anywhere and anytime without the need for an internet connection. That's why I use PNG Compressor (macOS app) for all my images that are png. I use Compressor (macOS app) if the image is a jpg.

Summary

Download this sketch template of each of the header images you will likely use for each page. Once you've downloaded the image export it and compress it so that it's the smallest size it can be without being pixelated (hopefully less than 400kb). And remember only put images on your website that have been compressed.

How to Vertically Align Anything with CSS

Lauralee Flores — Wed, 25 Apr 2018 02:20:31 +0000

Whether you’re an established web developer or new to creating websites you may have thought you knew how to vertically align… for a minute. But don’t worry, it happens to us all.

Here’s my three favorite ways to vertically align stuff in css.

Transform

If you’ve been doing web development for a while you’re no doubt familiar with this approach. Before flexbox or css grid this was the only sure way to vertically align in css. Don’t let that fool you though, I still use it today.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

If you find when using this approach that elements become blurry because they’re placed on a half pixel, try this:

 .parent {
    position: relative;
 }
 .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: perspective(1px) translate(-50%, -50%);
 }

Flexbox

To center an object using flexbox you just need two centering properties:

.element {
     display: flex;
     justify-content: center;
     align-items: center;
 }

CSS Grid

This is such an easy way to center something. This will center the immediate child of this element. If, there are five children inside this element and each of the children have two children. It will center only the five children (not the two nested inside).

.element {
   display: grid;
   place-items: center;
   height: 100vh; // or however tall you want your box to be
 }

Aligning just one line of text?

If you are simply trying to vertically align text inside some element it is much easier. All you need to do is give the text the same line-height as the container it’s in.

For example, if the text is inside a button and the button is 32px tall. Just give the text a line-height of 32px and it will be vertically centered.

.button {
    height: 32px;
 } 
 .text {
   line-height: 32px;
 }

I hope this helps you as you center things in CSS. Which method did you end up going with? Let me know.

DEV Community: Lauralee Flores