What’s the best way to compress image dimensions and file-size?
I like the settings on my phone capture the largest possible dimensions and file size. This is because you can always compress down but you can’t add pixels back in later. But these files are way too big to just upload to my website directory.
So there is file dimensions and file size. You can make a case that you never need an image dimension of more than 2560 pixels and maybe even significantly smaller than this.
On your hard-drive: You may end up with folder structure like “Originals,” “Resized,” and “Compressed.”
Right now I like using jpeg-optimizer.com but tinypng.com has a batch process which obviously saves time. There is a site called jpegmini.com that shows a before and after preview slider that’s pretty cool. Red ketchup.io / bulk-image – resizer also has a bulk dimension resize option
I know Photoshop has these abilities but I am interested in a non-photoshop solution. Figma seems to be lacking these powers without a plugin. This article says to use the tinyimage plugin to do the trick although it comes with 15 trial uses only. In local-by-flywheel it says they have a free image optimizer but I haven’t tried this yet.
Need a quick image with specific dimensions?
Dummyimage.com is a great resource? Can you just type directly into the url?
In WordPress when you upload an image to the media library it keeps the original and then spits out some additional dimensions that you can then utilize in your theme. The easiest way to tweak these settings are in the admin panel. Setting these all to zero you still get additional images dropped in your uploads file. To prevent this, or add even more image sizes utilize a function in functions.php file, (Perishable Press article showed me the way to remove.)
I was confused a bit at first that the default for WordPress was to keep original (makes perfect sense) but add 7 additional images?! These seven images are the three set in the admin panel, and then a “medium/large” (768px), “2x Med/Large” (1536px), “2x Large” (2048px), “scaled” (2560px). These 2x files are apparently for retina displays.
On a recent site I was working on I wanted to limit the files added to the uploads folder and control the dimensions with the admin settings so I stripped out everything else and used, 150, 445, and 1024 for thumbnail, small, and Large settings. Note that 1024px may not be big enough for large hero images so you will likely need to bulk this up or utilize the original image. Speaking of the original image you still likely want to set dimensions beforehand to avoid bloat in the uploads folder.
Another thing I noticed was If you original matches the size of the settings in the admin panel it will not just spit out a duplicate. For example, I added an original with a width of 1024px so it did not generated a file-1024×1024 in the uploads folder.
Note that you can crop in the media library if needed and also that the gallery uses the thumbnail image so may want to keep the settings at 150 although I wasn’t sure if this meant to just keep a thumbnail at any size or keep the thumbnail at 150×150, (still need to test this).
adding theme support for featured images you utilize “the_post_thumbnail()” and pass it ‘thumbnail’ or ‘large’ or whatever custom size you made (which you would do with the “add_image_size()” method)
Oh and of course since this is WordPress plugins are thing. I messed around with Smush since it has the most active installs. If you are going to utilize a plugin I would recommend implementing early because not all plugin will go back and compress existing images, only the ones uploaded after activating the plugin. Sorted by installations: Smush, EWWW Img Optimizer, Imagify, ShortPixel, resmush.it, and Optimole.
Phone to jpeg-Optimizer for dimensions to drop-box and rename. WP will compress on upload. Compress beforehand so original isn’t Crazy big?
Two approaches: Inside a picture element and a typical image tag
<picture>
<source sizes="1920" srcset="<?php echo get_theme_file_uri('images/hero--large.jpg 1920w');?>" media="(min-width: 1380px)">
<source sizes="1380" srcset="<?php echo get_theme_file_uri('images/hero--medium.jpg 1380w');?>" media="(min-width: 990px)">
<source sizes="990" srcset="<?php echo get_theme_file_uri('images/hero--small.jpg 990w');?>" media="(min-width: 640px)">
<img srcset="<?php echo get_theme_file_uri('images/hero--smaller.jpg 640w');?>" alt="Coastal view of ocean and the mountains" class="large-hero__image">
</picture>