Step: upload an image with a width of 3000 pixels on the image scaling product page, and the working efficiency of the browser will be doubled. The browser must first load the original 3000 pixel image, and then reload the reduced size image to adapt to the uploaded area.
For example, if the width of website content is 800 pixels, the visitor’s browser must load 3000 pixel images and 800 pixel images. Multiply this process by the number of images on a single web page. How can it suddenly become a rather strange problem? Please recheck the required size before uploading the image to the website. For example, on the woocommerce website, the product image is displayed as 460px x 460px. Important: the image file size is different from the image size. The image size (460px x x460px) is shown in the screenshot above.
The image file size is the size of the actual file (for example, 92461kb). The space required to store the image on the server. The larger the file size, the longer it takes to load the image. Most of the pictures on the website are no more than 150kb. If possible, you will want them to be less than 100kb (depending on the purpose of the pictures). How do I know the required image size? If you use Google Chrome, you can use the inspector tool to determine the size of the image space. Navigate to the site and right-click the area whose width you want to investigate. Then click Check.
The toolbar appears at the bottom. Sort the HTML part of the website and hover over it to see the width of the part. For example, to add an image to a blog post, you must know the maximum width of the content area to upload an image smaller than that size. Open the inspector tool to determine the space of the image. In the following example, the size of the area occupied by the image is 1080 pixels wide. Now, if you don’t want your web browser to load two images of different sizes (as described above), you must resize the image below 1080px.
Step 3: save the web image. Most image editing software has the option of \
In the screenshot below, the image quality toggle bar is highlighted. You may want to adjust the image to the lowest possible file size while focusing on image quality. The arrow of this screenshot points to the image file size. The lower the quality, the smaller the file. I don’t want rough, pixelated images. Therefore, it is important to see the preview on the right before saving the image. Other image editing tools with this option: sketching: https:\/\/www.sketch.com\/ Pixlr: https:\/\/pixlr.com\/ Step 4: run the image compressor through the compressor to delete images with unnecessary information, such as camera details, metadata, color profile, included thumbnails, etc. This will reduce the file size of the image without affecting the quality. When you upload images to a website using WordPress plug-ins such as Smush image compression and optimization or ewww Image optimizer, you can compress images in batch or automatically
