Photo Galleries

HTML & CSS
122

Okay give me a minute and I will set up some instructions from the irfanview menu bar.

In the meantime see my EDIT in post #119

And fix your h1 tag so Trigger is Capatalized

123

There is a way to do batch conversions with a plugin but I don’t have that. You may be able to find that info on the support pages at the website.

But for one image at a time it’s still simple…

  1. Open your large image with irfanview
  2. In the top menu bar select > File
  3. Then scroll down and select > Save (original folder)
  4. A “Save Options” window will pop up on the right side

  1. Select 65% and then be sure to click “Save” at the bottom
  2. Then Select “Save” on the left window ( your files original folder)

I just ran your photo-05 squirrel through that process and got it down to 297kb from 1.79mb

Important:

I always paste a copy of my original image folder to my desktop, from there I do my edits.
That way I still have a copy of my full size original images that have not been changed.

1 Like
124

After selecting 65%, it would not let me click save.

125

It wouldn’t let you click save directly below 65% in the options panel?

Show me a screenshot of that options window so I can see which options are ticked

126

at the bottom of the right corner of panel ? no. What I did was drop an image from folder to the center of program.

127

You don’t have to click the save button in the options panel every time you edit an image.

When you make a change to your save options (such as 65%) you do have to click save so it remembers your new settings.

After you run one of your images through that process, go back to your image folder, right click and refresh. Then see if your file size was changed

128

i don’t see a change. But what do I look for?

129

Here is your thumbnails folder after I optimized those images.

After you save the image in irfanview sometimes you have to right click and select refresh.

592×276 119 KB

Do you see the file sizes in the bottom right corner as I select each image?

130

I have no refresh.

1158×888 361 KB

131

Yes you should, if you right click in the window. Not right clicking on the the image.

I was just saying that sometimes you have to refresh the folder in order to see that the image sizes have indeed changed after you saved them at 65%

132

Ok we got it figured out now. I did one and it was 1.56 and now 210.

1 Like
133

Very Good! Your visitors will thank you and your pages will load much faster.

Now, so you don’t have to do things twice run through this checklist…

  1. Resize all large images to 1500 x 1125
  2. Save all images @ 65% quality ( thumbnails and large images)
  3. Get your width & height attributes corrected in the html ( see post #119)

That should get you going in the right direction

134

We did #3 all ready :slight_smile:

1 Like
135

Try this free tool from w3.org

https://validator.w3.org/checklink?uri=http%3A%2F%2Fwww.charismacommunications.ca%2Frebuild2%2Fphotography.html&hide_type=all&depth=&check=Check

14 x 404’s

Edit:
After the links are fixed investigate:

  1. Google Webmaster Tools
  2. Google Analytics
  3. Google Responsive Friendly Web Pages
1 Like
136

I have a question. Where it saysPrevious, Gallery, and next. Can I make that font just a tiny bigger?

137

Yes, those styles are all located where it says …

/— Single Image Page Styles –/

I just bumped it up to 1em from .9em

.index a {
  display: table-cell;
  width: 33.33%;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
138

ok. I seen that but did not want to screw anything up

139

When I was learning I always made a duplicate copy of a file and added a -bu extension to it.

For example, screen-bu.css

The bu stands for “back up” and I could always revert back if I messed things up too bad. :slight_smile:

1 Like
140

Good to know. Are you in Canada or States?

141

I’m in the south end of the States, Texas