![]() What will happen to the image on mobile devices? While an image may appear one way for desktops, an image may have a totally different width once your website adapts to the mobile view.You can crop the photo in advance, which removes the guesswork about how the automatic software will crop the image. If your theme is cropping the image for you, what will be the final aspect ratio/dimensions of the image? If every time the image appears, your theme is cropping it down to a square, there’s no reason to upload a rectangular image.Will it be a small icon that is repeated several times? If the file is an icon with simple colors or a transparent background, maybe a PNG file or an 8-bit PNG file will get the job done better than a jpg. ![]() ![]() Will you have have an overlay of text or textures? If you have textures or a color-overlay, chances are the image won’t be clearly visible anyways, which means in the next step, you can drop the size and output quality to decrease the file size and shave some weight off your page-load.Where is this image going to show up? If it will only appear in the sidebar, maybe you only need to export a JPG file that is 400px wide.Like any good process, before getting technical, “thinking” is a good place to start. Step 1: Consider Where and How the Image will Appear Some of the most important steps in the process occur before you ever upload your images to the server. However, we’ve found that a simple, four-step process works best and is easy to teach to others. There are a number of ideas out there on the best process for preparing images for use with WordPress. Compress JPG & PNG images doesn’t have file size limits but restricts the total number of image compressions you can run per month, which can be really restrictive if you’re building a new website with dozens of images. The free version of Smush doesn’t compress your full-size images at all and won’t compress any image over 1.0 MB (so say goodbye to compressing any original image shot on a smartphone or better). Recognize that these plugins have limits unless you pay for the costly full versions. The two most popular plugins for image optimization are Smush and Compress JPG & PNG Images. Reason 3: Your Plugins Have Limitsįor those who are thinking “I have a plugin that does that,” it’s good to remember that a plugin only works within certain limits. They always force using the original “full-size” image. In addition, some of the most popular drag-and-drop page builder themes, like Divi or Extra, don’t allow you to select these pre-cropped images from the builder. We will discuss this point a little later. While WordPress as well as your theme may automatically crop images when you upload them, but it doesn’t compress or optimize them, and whether those cropped images make it onto your final page is another matter altogether. You may be thinking, “doesn’t WordPress crop and optimize my images for me?” Think again. Reason 2: WordPress and Your Themes May Not Optimize Images for You To put that in perspective, the largest, full-width images on this site are only about 0.15 MB (about 1% the size of the original image), which is more than enough to display beautifully on any device. A professional DSLR camera like the Canon D6 will produce image files of a whopping 15-20MB (or more!) each. Even though images are normally much smaller than video files, your average home page may have dozens of them, and they really add up.Ī default-settings photo taken with a smartphone like the iPhone X is about 6 MB per file. ![]() Sometimes these requests are for really small files like HTML, JavaScript or CSS files, and sometimes these requests are for huge files like music or videos. However images will comprise the bulk (sizewise) of almost any page load. Why We Optimize Images Reason 1: Original Photos are Way Too BigĮvery time you load a webpage, your browser downloads dozens, sometimes hundreds of files from the web server. Some of the biggest influencers of page-load speed are your media resources, especially images, which is why we’ve put together this guide to help you optimize your images on WordPress. As search engines adapt their algorithms to put even more emphasis on mobile device performance, it’s a good time to brush up on some effective practices for keeping your WordPress pages humming along at top speed. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |