Hi, what is the best plugin to use with RW8 to compress picture sizes and maintain quality as best as possible for faster page loading?
Image optimization is always a compromise between size and quality. To my knowledge there’s no RapidWeaver plugin that does optimizations automatically.
There’s tons of products available, online and apps that do what you want. Some paid some free.
Most allow you to determine what compression degree to be applied. It’s a Balancing act that really depends on what you’re looking for. If the image quality is very important then you would turn down the compare and the file gets larger (slower). If speed is more important than turn up the compression and the file size gets smaller but the image quality goes down.
One thing I would recommend you do before compressing your images is to resize them to be no wider than they will display. For example, If the largest area an image has to display in is only 540px wife and the image is 1200px wide then the browser will need to download the larger file and then resize it. Resizing first can significantly reduce the file size, and losses no quality. After you have resized then compress.
Realmac has an image optimizer called Squash that works well.
1 Like
For single images, I resize them in Preview.app or Infinity Photo.
For batches of images, I use a free tool called DropFix.
I put all images through the free ImageOptim app, prior to adding them to a website.
I had to help a Windows user recently to optimise images for a storefront that had already been resized. This website did a particularly good job of the task.
2 Likes
I would also recommend ImageOptim and/or Squash. Both really useful tools.
A further approach that you could take to ensure that your image looks great on every screen size, is to supply a bank of different width images and have the browser select the most appropriate for whatever device/screen the image is being viewed on. That’s what my latest stack, Srcerer, allows you to do. With Srcerer you are able to supply up to 8 image widths ranging from, for example, 320px (a 1x phone) through to say 2732px (the latest 2x 12.9" iPad Pro). When the page is loaded the browser simply selects the most appropriate image from the bank to load and display.
And @teefers is right about considering the widest that an image will display on screen, however a 540px space on the webpage would need a 1080px image to display perfectly on a 2x screen. Srcerer has you covered for this type of scenario too, as you can also specify how much of the screen an image uses at various breakpoints and the browser can use this information (along with the supplied image bank widths and the device resolution) to serve the right image for the space.
You can read the recent forum post about Srcerer here
(p.s. the launch discount is still good until Friday 
)
1 Like
Thank you everybody
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.