Page Size Optimization & Digital Graphics

A website is more than just links, graphics, and words. There’s another side of web development that makes the page more user-friendly. A website can’t only look functional, it has to work functional as well. And that includes what is added to the web page. When a web page is slow, it doesn’t matter how amazing it looked (or could’ve looked) because humanity no longer has the time to wait a few seconds for a digital location rich in information. This is what makes Page Size Optimization so important, as it directly effects the size of your web page along with the time it takes to load for a user. I’ll also cover the type of digital graphics that can be inserted in to a web page and how it’s efficiently used.

Managing the Page Weight

Photo by Christina Morillo from Pexels

To start off, we need to know what Page Size Optimization it. It’s the practice of managing the weight or size of a web page by its amount of content in order for it to keep its functionality. Think of it as a wheelbarrow being pushed up a hill. It does its job well at holding objects, but the heavier the items inside the wheelbarrow, the harder it will take to reach the top of the hill. This of course results in a slower time to push the wheelbarrow. A web page can only load so much content at a time, which is something that a user is quick to notice. To reduce the page weight and speed up loading time, try to remove excessive custom fonts. Of course, custom fonts add uniqueness and originality to a web page, but it carries a lot of weight which adds up to your overall page size. Therefore, it’s best to also limit the number of custom fonts you use to at least two. If you can’t bear to let them go, many web developers recommend making WOFF2 files. It converts your custom font to the most efficient format for browsers, which helps reduce the weight of your web page. Another thing that can reduce the page weight would be to limit the sizes of your images. The dimensions of an image should never be bigger than its container. You can make the size to fill up the entire container if you wish, but never make it bigger. To help with the image’s file size, you can also compress the image, which shrinks the image even more.

Digital Graphics for Web Pages

Photo by Tranmautritam from Pexels

To add on to images in a web page, it’s important to know when it’s best to use JPG, GIF, PNG, should be used in a web page. To start off, JPG have always been the first file type to depend on for web images. They allow raster editing and compression, which helps them download easier. Next, there’s GIF, or Graphics Interchange Format. It’s a raster format that is used for animated graphics and comes with customization settings which could help reduce the file size. It’s best to use it when you need a web animation that’s a small file and allows transparency. Lastly, there’s PNG, or Portable Network Graphic. It’s also a raster format that comes with transparency and a higher color depth. PNGs have currently taken the crown for the best file to use when needing high-quality web graphics that are still small in file size. 


Overall, web development can be very methodical, so I hope this collection of information helped clear things up. If you couldn’t tell, I am not a professional web developer, so I too had to research information on it. If you would like to learn more about Page Size Optimization and when to use Digital Graphics, check out the links respectively. Good Luck!