웹 성능에 대한 초보자 가이드: 이미지 최적화

The past year I've really made an effort to dig into site speed and optimizing sites based on audits from Google Page Speed Insights because of the now-released Core Web Vitals. Even if this didn't affect ranking, it's good practice to minimize as much data being loaded as possible and to provide the user with as smooth an experience as you can.

Before researching newer methods, the predominant strategy was to minimize the entire page size, which is almost no longer relevant as a metric. Total page size doesn't tell you what the user is experiencing as they browse, and putting a necessary gallery on a page shouldn't doom your rankings. Granted, a very large page size may indicate images need compression, but not always. Now the strategy is concerned with loading items only when the user needs them, versus years before where the consensus was to reduce the total number of items loaded on the page overall.

I've outlined the steps I've taken to optimize images on sites based on recommendations from web experts and from personal experience. These are relatively easy to implement and are a good starting point for site optimization.

This has been relevant for years now, but don't load a giant 1000x800 image for a 100x100 thumbnail. Sometimes I load a site and it's very obvious that a small thumbnail image above the fold is loading the full-sized image because it takes 2-3 seconds to download. That large image is loading extra bytes that serve no advantage to users because they will not be able to see the full details.

Getting the sizing perfect can be difficult if you're using a CMS and the same image is used in different situations, but you want to use the smallest image needed when possible. I use two free tools in combination for bulk image editing:

I had been waiting for this attribute for years, and now you can safely use it in all the major browsers. If the attribute is not compatible in the browser, then it just doesn't do anything:

<img src="sample.jpg" loading="lazy" alt="Sample" />

This tells the browser not to load the image until it is in the user's viewport, meaning if you have a gallery that is well below the fold, you won't have to worry about those images clogging up the LCP (largest contentful paint). Keep one thing in mind however:

Do not use the loading="lazy" attribute for images that are definitely ABOVE the fold

If the image needs to be visible immediately to the user, do not use this attribute, as this may negatively impact LCP or CLS (cumulative layout shift).

Both these attributes surprisingly have a long, complex history. When I built web sites as a kid, CSS was not standard yet, and you would have to set a width and height on image attributes. Then when I returned to web development as an adult, these attributes were discarded because they interfered especially with art direction, where the aspect ratio of an image changed going from desktop to mobile.

<img src="logo.jpg" alt="" loading="lazy" width="200" height="300">

And here we are now, with the recommendation to set both these attributes back again to reduce CLS (cumulative layout shift) because the browser considers these values a ratio, rather than exact pixels. If the page is loading and the width and height are not set, then the browser has no idea what dimensions your image is, and the layout will shift considerably once the image finishes loading, which is disruptive to the user.

If you have images that change aspect ratios depending on the screen size, then you will have to use either the image srcset attribute or the <picture> element in order to serve different images based on the screen size. I would also make sure that the CSS rules don't accidentally stretch or warp the images depending on how you have your rules set up.

Even with resizing and compressing images, if you are using either JPGs or PNGs, these files will still be larger than WEBP images, one of the newer, widely-accepted image formats. I've noticed about a 30% decrease in image size once converting to WEBP, but I still make sure to serve the original image format for maximum browser compatibility.

I hope you are able to get started with web performance and site optimization with images. This can get tricky once images are served dynamically and art direction is considered, but these are simple steps to get started to help make web sites load more efficiently for everyone.