Interview with Steve Teare about faster-loading images.

WordPress Mobile Speed

Updated


There are no affiliate links on PagePipe.

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: http://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:

1. Go the page or post URL.

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

3. Click “view image info.” A list of images on the page may appear or just the single image. Click through the list until you see the same image. The following information will appear in the small screen.

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)
  • $30 – RAM: 8GB included + 8GB added
  • $0 – O/S: Linux Mint Cinnamon 19.3 Tricia
  • $30 – Graphics: Advanced Micro Devices, Inc. Baffin [Radeon RX 550 640SP / RX 560/560X] vendor: Micro-Star MSI
  • Drives:
    $100 Micron 1TB – internal
    $12 Seagate120 GB – external
    $40 Seagate 320 GB – external
  • 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)

$523 Total

Godspeed-

Steve Teare
performance engineer

 

Other unconventional speed articles like this one:

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site TuningGet Speed!


 

Other Related Resources

Build with Empathy
GIVE SPEED