How to make images load fast

#21

Once the framework is understood it is quite simple using PHP to extract the specific JavaScript files and create templates to pass the “body content” of the web-page.

#22

May I ask what you posted when you got that answer in FB?

The “make sure they fit the size of the container” you learned in FB doesn’t make much sense to me reading your question here. So please, what was that statement about exactly?

#23

LOL, Dahhh - I used to come onto SP ALL the time back in the early 2000’s, then I stopped & when I logged in once the design of the forum was soooo different, I couldn’t figure out WHAT was going on.

I like the regular VB design.

I came back here just to try & get an answer to my question.

Thanks

1 Like
#24

"So I posted a hiring ad for someone to code a PSD to WP, & their site examples they’ve coded are RIDDLED with errors for CSS & xhtml.

Not to mention when I use this site to test, it gives them a low score.

https://ready.mobi/

I used other sites to gauge loading, mobile, etc.

My question is…

When they tell me the errors are from plugins, should I believe them?

And is that excuse just for html errors, or CSS errors too?

Yesterday another one ignored the “errors” & only focused on the slow loading saying that ALL of her clients want HD images.

LOL I know this is BS, but do clients actually ONLY request HD images?

Does compressing them remove the HD?"

That was my question.

Why are you saying that the container answer doesn’t make any sense in relation to my question here? :frowning:

#25

Oh, so you have to know PHP to use that?

#27

No it is a display screen with a higher pixel density for a sharper image.


On a double density screen what is measured as 1 pixel is 2 pixels in width and height, so 4 pixels in total make it up.
So to get crisp images on retina displays, if you have an image 200px wide, you would make the image 400px wide. That is a larger (4x) image so a larger file and slower loading. But one trick is to boost the compression to reduce filesize. The extra compression will create visible artefacts, but viewing the image scaled down will significantly reduce the appearance of the artefacts.

It’s covered here, even if the container is not specifically mentioned

If the container is a particular size or has a max-width, the image will be no bigger than that size (except if you cater for retina, it may be no bigger than double the size).

Though often the container size is not a concern as generally the size is defined by the content, Eg, a float containing a 400px wide image will be about 400px plus margin and padding, the image defines it. In a responsive page the container size may be fluid and a different size on any given device.

2 Likes
#28

I meant I couldn’t see that your generic questions gives any ground for such an answer.

Anyway, I think you got useful answers and good explainings in this thread.

About your original FB experience:

So I posted a hiring ad for someone to code a PSD to WP, & their site examples they’ve coded are RIDDLED with errors for CSS & xhtml.

Wordpress uses themes for layout and look. Did you mention what theme you had in mind? All themes can be tweaked with a child theme, or was the job to code a completely new theme after the PSD mockup? (That is a huge task and a PSD can’t describe what needs to be coded there.)

Or was it actually a regular static web page you wanted? (That is what I would think.)

Then when you evaluate the applications for the job, keep in mind that FB is crowded with wannabe people who sometimes just doesn’t know how little they do know. You can’t take what they say at face value. :wink:

No, but I think you already knew that now. :slight_smile:

2 Likes
#29

I tried to follow what you said, but unfortunately I couldn’t. Math isn’t my forte.

Thanks anyway

#30

Hmmm, I didn’t know that & the theme would be Generate Press & it would be new b/c I hadn’t started using that theme when the site was designed last time.

Static, meaning without slides?

If yes, no, I don’t need/want any of that.

I started looking on FB b/c I couldn’t find anyone on Upwork.

I’m under a very tight budget.

It won’t matter where I look, they all have errors & now that I’m testing for page load/weight (I wasn’t before), they are even worse.

I was willing to look at someone who has maybe 10 errors or less on html/CSS, but that was very hard to find & if I’m reviewing 5 sites, one may be ok, & the rest fail.

Thanks

1 Like
#31

No, not quite. :smiley:

Wordpress is a Content Management System that automatically puts together the pages at the server and send them to the browser when they are asked for by e.g. clicking a menu button. WP sites are dynamic pages that are created on the fly.

A static page is an already made page with all necessary files attached to the HTML page, e.g. CSS and images and eventual Javascripts. The page is always the same, it’s static and a site can be built fully on static pages.
(Even so when server side PHP is used to include other common separate parts to be present in the static page.)

I appreciate your situation and hope you’ll find a knowledgeable friend or someone you could reason with to make the best decisions for your project.

The Generate Press theme seems good. :slight_smile:

#32

PHP is not essential but it makes writing web pages a lot easier… because rendered page content can be filtered and extracted from a database, then passed to PHP included templates.

Same applies to the page header, $title, style sheet file name, canonical reference can all be passed to a single included page header file and the rendered results will all have different variable.

DRY principle of Dont Repeat Yourself.

#33

Hi everyone!

Some of you already mention about compressing images, so I want to show the way I do it.

For compressing images, I installed a program called Radical Image Optimization Tool (RIOT) so all you have to do is open an image you want to compress, choose the quality percentage you want to keep (I have set it at 80% - at less than 80% the quality of the image has to suffer) and save the image.

As you can see above, the image is compressed from 116.25 KiB to 67.38 KiB. All the images that I upload on my website have a resolution of 720 x 480 px. By the way, RIOT is not the only program for this task, there are dozens more.

I have a php page on my website where I display lots of images at a size of 180x120 px. At first, when I started building the website, being a newbie, the pics with the actual size of 720x480px were resized with CSS to 180x120. So the page was loading slowly.

So I made another field in my database table where I upload the 180 by 120 px version of the main image.
This improved the page loading speed a lot. I also compressed the thumbnail versions too. So from about ~20 KiB in size they now have ~ 6KiB.

Hope this helps.

3 Likes
#34

Hi AndreiDcs, welcome to the forums!

In addition to what has been posted about compression rates here when saving in a lossy format like JPG, I wish to mention the importance to always have an original copy saved in a lossless format, like PNG.

Then when you need a different pixel size or compression rate or further edit the image you always go from the lossless original. That way you can also compare different lossy compression rates to decide how low you can go in quality for the particular case. You could also try different sampling settings for the format to get the smallest file size in an exceptable quality. (The subsampling options in your app.)

And if you want to save an edited image to further work on, make the temporary savings in a lossless format. Only save in a lossy format as the last step.

As an experiment; repeatedly load and save with a new name an image at the same compression settings in the JPG format, and view the gradual decrease in quality by each new cycle compared with the first save.

Just my two cents, and this is probably covered in the links already posted. :slight_smile:

4 Likes
#35

Thanks for your valuable clarifications. I learned something new. I will make copies of the photos in PNG format too (or at least try because there are ~4000 :smile:). But my project is so vast that I have problems with prioritizing my tasks. So when I had the issue with the pics loading slowly, I search for the fastest solution without dive too deep in the subject. :slight_smile:

1 Like
#36

To save time you can do this automatically in batches, there are some excellent tools that does not cost a fortune. Take a look at two of the most advanced tools I know of and have used in many years:

The complete XnView (Windows) and XnView MP (multi platform, my current tool) packages and other tools at: https://www.xnview.com/en/

And my favorite from my Windows period, IrfanView (Windows) that also has plugins for all imaginable tasks: https://www.irfanview.com/

Both are freeware and have active forums if you got stuck.

Edit)
I noticed that the “RIOT” tool you use for optimizing images also comes as a plugin for both the above apps. :slight_smile:

2 Likes
#37

Thanks! I installed both XnView MP and IrfanView.

1 Like
#39

I usually resize images in Photoshop and upload it on my website where I’m using lazyload. Otherwise you can use CDN for this purpose.

#41

If you’re using Wordpress, you can install any plugin that transforms your png files to webp. This plugin will optimize your photos and it will load faster in this format

#42

Do take care though that IE and any version of Edge except for the last one do not support webp images: https://caniuse.com/#search=webp

2 Likes
#43

i suggest use plugin