![]() ![]() It can be any of millions of colors, but it is only one single dot that makes up an image. So here goes…Ī pixel is the smallest unit of display on a screen. That’s pretty important when we’re talking about resizing and the canvas size. I recently saw a site with that exact scenario, and the savings were 91% with a resized image. In real life, there is some overhead to the resizing process, so we might not save exactly 93% by resizing. Instead, we sent them a 300 x 300 image, which has 90,000 pixels! Some basic math tells us that we wasted nearly 93% of the pixels in that image. The browser wanted an 80 x 80 image, which is 6,400 pixels. Alas, images are two dimensional constructs, so we have to think in 2D. However, what if you exported the images out of Photoshop at 300 x 300 pixels? The browser will downsize those images to fit in the display space, resulting in a lot of wasted pixels.Ī glance at the numbers might indicate that we have an image a little over 3x larger than it ought to be. Let’s say that you have some images displayed on your page at 80 pixels wide by 80 pixels high. The screen size of the visitor’s device affects this also, but let’s look at a basic example. ![]() The root of the problem is that we have images in our page that are larger than the space where we are displaying them. Before we jump into those, lets learn a bit more about what resizing and scaling means. Plus, some plugins for WordPress can help solve the resizing problem. You may be thinking, “Didn’t I already optimize my images? Why do they need resizing?”įortunately, WordPress has some built-in image resizing tricks. If so, it can be a daunting problem to solve. If you’ve ever run a speed test with, , or PageSpeed Insights, you may have seen a warning about resizing or scaling your images.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |