If you’re using WordPress, a plugin can be used to optimize your Media Library, including the WordPress generated images. Even if your original image was optimized, the CMS reads it as any other image, does its processing, and generates a new image without compression. When you upload a photo in your CMS, it likely goes through processing to generate different sizes for use as thumbnails or small/medium/large sizes in your content. Q: I optimized images and re-uploaded them in WordPress / Magento / other CMS why are the images larger than before?Ī: This is due to your CMS regenerating the photo either at a different size or by cropping. Use a photo editor (Photoshop, GIMP, etc) and resize the photo dimensions down to the maximum display size. Step 3) Resize your image to the maximum display size We discuss srcset in another article, which you can check out here.You shouldn’t need to do anything here, as the WordPress theme should deliver different sized images at different screen resolutions.Later versions of WordPress automatically use srcset to deal with overly scaled images. ![]() If you’re using WordPress, you may see srcset, along with a list of image URLs.Take note of the container size (yellow) on the screen – in this case it’s 683×166 – These are the dimensions you’ll resize your image to.Look to the right and you’ll see the class “ blog-header” having a “ background-image” – You can confirm this is indeed the correct image by right clicking on the URL and opening it in a new tab.Click on the container that the image is displayed in – in this case it’s.Use the Inspect tool to get details for background images. Using the “ Inspect” function, check the CSS panel to see if your image was placed there via “background”:.If you cannot find your image URL, it means it’s most likely a background image (displayed via CSS) or JavaScript is doing something with it.Take note of those dimensions and resize your image accordingly.If the image doesn’t change size when you resize the browser, it means it’s likely already at its maximum display size.This image may get flagged by the “Properly size images” audit, but unless you change your site design to have a max-width, you cannot address this issue.The best thing you can do is export at your best perceived quality and compress the image for file size savings.If your image always follows the browser resizing, even at a maximized screen, it means that image is likely within a container that has no maximum display size.You may discover different situations when inspecting your page’s images: Take note of the first dimensions you see (in this case it’s 524×287) – we’ll call this the maximum display size. The “Intrinsic” size is the actual dimensions of the image. Hover over the highlighted URL of your image and you’ll get the scaled size and Intrinsic size of your image.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |