Do you have a recommended dimension pixel size and actual file size for blog post images?

Usually featured images are set to the full-page width of the theme (maximum screen width). The way to find out is to upload a wide test image wider and see what it’s dimensions are after resizing or scaling. Images embedded in posts are usually the column width. Again we upload and measure the actual size and build images to those actual dimensions. We don’t want images dynamically resizing in the browser if it can be avoided.

Q. How do you optimize images for the PagePipe blog and store?

A: GIMP is my go-to image editor for over 14 years. Our preference is to optimize images offline before uploading. As a safety measure, we use Imsanity plugin to prevent the gross error of loading enormous photos.

REFERENCE: https://wordpress.org/plugins/imsanity/

REFERENCE: https://blog.hubspot.com/website/imsanity-insanely-good-image-upload-resize-plugin

REFERENCE: https://pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/

Imsanity plugin is automatically resizing and optimizing uploaded images. You can change the setting in the plugin control panel.

Q. So you don’t use Adobe or Apple products?

A. I used to use Photoshop software and the Apple Mac OS. That was back in the old days when you actually owned instead of rented software (subscription model).

Linux Mint is my preferred operating system since 2006. Gimp image processor is free open-source software. There are no monthly rental fees like with Apple or Adobe products.

Be sure to install the optional Gimp-plugin-registry using the Linux Software Manager. This adds “Save for web” features necessary for image optimization.

Q. Do you have a recommended dimension pixel size and actual file size for blog post images?

A. Usually featured images are set to the full-page width of the theme (maximum screen width). The way to find out is to upload a wide test image and see what it’s dimensions are after resizing or scaling.

For example: If I upload a large 398k, 1920x1200px test image on a client’s post. Afterwards, it is resized and optimized by Imsanity to 66 KB, 750x469px after upload.

The Firefox page info says it is scaled to 720 x 450px.

So Imsanity could be set to 720 wide instead of 750. That would be ideal. This is small change.

Imsanity automatically resized and optimized the image.

Q. Why are you using Firefox browser? Doesn’t everyone use Google Chrome?

A. I prefer Firefox for reverse engineering websites.

To find the size of any image using Firefox browser. Install the extension:
View Image Info Reborn
Display info for the current image in a new window, new tab, or overlaid on the image.

1. Go the page or post URL.

2. Right click on the image. A contextual menu appears.

3. Click “view image info.” The following information will appear.

Location: the actual URL of the image location.

Type: JPEG Image

Size: Unknown (not cached) – or after reloading the page: 26.82 KB (27,459 bytes)

Dimensions: 700px × 250px (scaled to 691px × 247px)

Scaling means the image is mathematically resized by the browser or theme. The goal is not scaling when possible. In this case, the size difference is negligible and won’t necessarily speed up the site. But if it were 2000px wide x 1200px high being mathematically resized to 150px square thumbnail, that would be wasteful. It would increase page weight significantly and slow things down.

Any image over 100k in size needs evaluation for better optimization.

The featured image may not appear on the page depending upon the theme settings. Only embedded (add media) images can be placed in the body. Featured images often appear in the blog roll listing.

Q: My host has the most advanced optimization addon on the plant. They say I don’t need an image compression plugin because they are already doing that in their framework. Is it still necessary to optimize?

A. No machine can determine if an image is properly sized, let alone if it should be a PNG or JPEG. A human brain is still required. Imsanity prevents gross errors.

Q. OK. You’re a total nonconformist. What kind of computer hardware do you use?
My system is low-cost and built from used ebay components.

• $200 – Dell 64-bit Desktop OptiPlex 7020, year 2016
  CPU: Quad Core model: Intel Core i7 L2 cache: 8192 KiB
  Speed: 3908 MHz min/max: 800/4000 MHz Core speeds (MHz)
• $140 – RAM: 32GB
• $0 – O/S: Linux Mint Cinnamon 20.1
• $30 – Graphics: Advanced Micro Devices, Inc. Baffin [Radeon RX 550 640SP / RX 560/560X] vendor: Micro-Star MSI
• Drives:
  $100 Micron 1TB – internal SSD
  $12 Seagate 120 GB – external USB
  $40 Seagate 320 GB – external USB
  $80 Toshiba 1TB – external USB
• Displays:
  $64 Acer Technologies 20” 1600×900 (16:9), rotation 180 degrees
  $47 Acer Technologies 20” 1600×900 (16:9), rotation clockwise
  $0 Integrated Tech Express Inc 27” 1366×768 (16:9), rotation normal (salvage)

$713 Total