Image Compression

Before I’m having trouble same as you all in regards to my site projects being so slow and I found this amazing Site that can easily compresses your images without worry of distortion. Check out TinyPNG works like a charm. :wink:

3 Likes

Nice share @mackyangeles

I would also recommend ImageOptim:

Great compression and not only PNG files :+1:

3 Likes

+1 for ImageOptim.

This also offers a good comparison, with a few others listed as well, if you like numbers :wink:
https://jamiemason.github.io/ImageOptim-CLI/

1 Like

Well ImageOptim is a great App no doubt (my first compression App I used) though I tried it already and got some issues like not compressed well and sometimes photos are distorted hehe based on my experience. :slight_smile:

I have found that JPEGmini is the best for jpg and ImageOptim best for PNG’s. They are both long-established and well respected. I am concerned with the smallest size for no visible degradation in image quality as opposed in just one making smaller files that another. I think that some of the Optimisers play that game a bit.

If you want to use 2x retina resolution images you can save them with heavier compression than usual and they will still look good on the display.

Using Photoshop on a normal display I view them at 50% when saving for web and drag down the quality slider as low as possible without hurting the visual quality. This will vary from image to image but I can generally get down to 30%, whereas I would normally save at around 70% quality.

The amazing trick in all of this is that the retina images can end up smaller sized than the normal ones and still look considerably sharper :wink:

One caveat with this is that webkit browsers currently have a bug where retina resolution images are appearing very soft on standard displays. I use a bit of CSS to workaround that, but the new Blocs solution of multiple image resolution will be easier for most users. Nevertheless you can still compress the retina images heavily and still achieve great results.

NB Another thumbs up for TinyPNG when saving PNG files. I’ve not been able to match that elsewhere.

2 Likes

I use compress. Very useful and it has a zoom preview.
Available in the Mac App store.

1 Like

@Flashman I’ve noticed the same thing with the images on some standard displays, some look soft. I’m not sure if its because Retina display images look so good or for the reason you talked about.

Could you give us some pointers (or an example) on what you do in css to make them look better?

Casey

It’s basically a fault in webkit and the way they handle retina images on standard displays. I reported this to Apple, Chrome and Webkit months ago but still waiting for them to fix it. If you view the same pages in Firefox they’ll look great on a standard display.

After a lot of messing around I came up with this as the best compromise, which can either be applied to page or site wide CSS:

/* applies to Jpg images; avoids blurry edges */

img[src$=".jpg"] {
image-rendering: -o-crisp-edges; /* Opera /
image-rendering: -webkit-optimize-contrast;/
Webkit (non-standard naming) /
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /
IE (non-standard property) */
}

After adding that to your page and publishing those retina images should look much better on a standard display. Chrome looks pretty close to Firefox after doing this and Safari looks good apart from some slightly jagged curved edges.

As a curiosity if you find a page like this at the moment with blurred soft images try clicking on the browser window and start dragging it narrower or wider. You should see that it is immediately sharper until the moment you release it. This is all related to a a bug in recent webkit browsers but if you are using an old version of Safari it is no nearly so evident.

Thanks, I’ll give it a try. Hopefully they will just fix the problem. Someday everyone will have some type of Retina display.

Casey

A fix is long overdue but I imagine there must be a reason why they have ignored this to date, because it works perfectly in Firefox. When everybody has a retina display this won’t be a problem because it only affects older displays. At that point the problem will be millions of web sites with fuzzy images that were never saved for retina…

1 Like

Are you taking small images and making them bigger? That would definitely cause quality issues and bigger file sizes, otherwise it would only become bigger if saving at a higher quality setting.

Hi ~ I am very new to Blocs. I actually love all the features and options, but it does take a while to get my head around it… So, apologies for the beginners questions. I have added a carousel and a gallery. With both features the image placeholders have a designated size and I can add my images into them and they automatically resize to fit; or I can change the size in the side bar.

However, when I got to preview, the images then come in random (their original?) sizes. I have now played with this for hours. Do I need to resize them (.jpg files) in a program like jpegmini to the precise size for my site??

Thanks for your help! :slight_smile:

IMG_8178

Sorry, for the crap quality, but you can see the images are aligned in the editor page here:

IMG_8179

and out of alignment here :expressionless:

I’m new to Blocs too and had a similar problem with a carousel. I put my images into Preview and resized them (smaller, as I had quite high resolution images to start with) to be all the same height. That solved my problem.

If you want them to be the same size in both dimensions, you’ll probably need to crop some too so that they all meet the same width and height. Resizing downwards s unlikely to give quality problems unless your images are already marginal (or you’re an image website that needs the very best quality).

I’m keen to know if there’s an easier way than what I did.