benjaminthomasnoble / noble-living-co

Noble Living Co's Website

Noble Living Co

NobleLivingCo.com

Introduction

This website is the home and store containing all things related to Noble Living Co., a business which is dedicated to prdoucing all natural products that benefit women's skin without the use of harmful chemcials. We also offer online ballet conditioning classes for women and girls.

noble-living-co's Issues

Optimize images

Here's our next challenge: optimize images.

We've chatted already about filenames and how we should keep things simple; all lowercase, no spaces, no special characters. So that will be task number one.

Further, the images aren't optimized meaning they're quite large for a Web page.

On the Web the aim of the game is to reduce the payload of every request as much as you can. It's a balancing game though because in some cases (like images) you can reduce the payload by shrinking the filesize either by reducing the dimensions of the image or compressing the image. Both are great options that should be done in such a way that maximizes the balance of maximum quality at minimum file size.

We could take a sledgehammer to the problem and just reduce every image to a 100x100 square at max compression and that would "get the job done" but the images would look absolutely terrible.

So the aim of the game is to take into consideration each image and size its dimensions to minimize filesize in its context and then last we can compress all of the images once they've been sized correctly.

I'm going to use the following as an example to start:

<img src="images/stock/girl-laughing-field.png" alt="girl-smiling-in-field">

The first thing I want to note is the alt attribute — it's populated which satisfies most HTML validators, we can aim to use plain, descriptive language here that describes what's in the image. girl-smiling-in-field is technically correct, but a screen reader would read it with those hyphens in there, so in this case something like Girl smiling in a field at sunset would work a bit better.

The other thing to consider is that width and height attributes are missing. CSS takes care of this (will cover that in a minute) but it's always good to put those dimensions on imgs because the browser then knows what size box to make for that image when it eventually loads. When those attributes are missing, the browser has to wait until the image is downloaded and then it checks the dimensions and then creates the box for it, which can result in a repaint in the browser which causes the entire document to 'shift' as the new box is put in place. You'll not notice things like that when you're developing locally because everything is running so fast, but I'm sure you've seen that 'jitter' as you browse around the Web, right?

Something to keep in mind though is that dimensions defined in CSS will essentially override those HTML dimensions, which is exactly what we want, and it's why we're seeing that your CSS is sizing the image appropriately:

#first-section img {
  width: 480px;
  height: 722px;
}

That CSS is sizing the image, but if we check out the file itself we see that it's actually huge, it's 1195x3000 but we're only displaying it at 480x722. The image is also a whopping 9MB which is absolutely humongous.

One thing to keep in mind as you're sizing images though is that there are many different densities to screens. HiDPI (retina) screens can display sharper images, so we don't want to blindly reduce image sizes to exactly as they render in the browser. A good rule of thumb is to size photos is to make them 1.5x the size you're going to display them, so in this case our first step would be to reduce that image to 720x1083 which will reduce the file size significantly. Further, we can compress the image using https://tinypng.com/ — we can cover file formats at another time but this will be a good first run.

So, the tasks for this Issue will be to audit all images and ensure that:

• All <img> tags have width and height attributes matching the display size we want the image
• All corresponding CSS rules match those dimensions for each image
• All image files are resized to 1.5x their display size and compressed using TinyPNG

Remove <br> tags in favor of HTML and/or CSS solutions

There are 9 <br>s that don't need to be there — a <br> tag "means" a line break, but in these cases they're being used for white space.

https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L107
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L118-L119
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L135
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L231
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L249
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L273
https://github.com/Benjaminthomasnoble/Noble-Living-Co/blob/main/index.html#L297-L298

The challenge will be to omit all <br>s and update the markup and/or CSS to replicate the same visual end result of that white space.